/* Booking Services – Public Styles v2 */
:root {
    --rb-primary:#2563eb; --rb-primary-dark:#1d4ed8;
    --rb-success:#16a34a; --rb-danger:#dc2626;
    --rb-warning:#d97706;
    --rb-bg:#f8fafc; --rb-card:#ffffff;
    --rb-border:#e2e8f0; --rb-text:#1e293b; --rb-muted:#64748b;
    --rb-radius:12px; --rb-shadow:0 4px 16px rgba(0,0,0,.08);
}

.rb-booking-wrap { max-width:820px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--rb-text);position:relative; }
.rb-hidden { display:none!important; }
.rb-step { animation:rbFade .3s ease; }
@keyframes rbFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Step header */
.rb-step-header { display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--rb-border); }
.rb-step-num { width:32px;height:32px;background:var(--rb-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0; }
.rb-step-title { font-size:20px;font-weight:700;color:var(--rb-text);margin:0; }

/* Category headings */
.rb-service-category { margin-bottom:28px; }
.rb-cat-label { font-size:15px;font-weight:700;color:var(--rb-primary);margin:0 0 12px;padding-left:10px;border-left:3px solid var(--rb-primary); }

/* Service cards */
.rb-services-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px; }
.rb-service-card { background:var(--rb-card);border:2px solid var(--rb-border);border-radius:var(--rb-radius);padding:18px;cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s; }
.rb-service-card:hover { border-color:var(--rb-primary);transform:translateY(-2px);box-shadow:var(--rb-shadow); }
.rb-service-card.rb-selected { border-color:var(--rb-primary);background:#eff6ff; }
.rb-svc-name { font-size:15px;font-weight:700;color:var(--rb-text);margin-bottom:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.rb-svc-free-tag { background:#dcfce7;color:#15803d;font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px; }
.rb-svc-desc { font-size:12px;color:var(--rb-muted);margin-bottom:10px;line-height:1.5; }
.rb-svc-meta { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px; }
.rb-svc-duration { background:#dbeafe;color:#1d4ed8;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px; }
.rb-svc-buffer   { background:#fef3c7;color:#92400e;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px; }
.rb-svc-price    { background:#f1f5f9;color:var(--rb-text);font-size:12px;font-weight:700;padding:3px 8px;border-radius:20px;margin-left:auto;text-align:right; }
.rb-svc-notice   { font-size:11px;color:var(--rb-warning);margin-bottom:10px;background:#fef9c3;padding:5px 8px;border-radius:6px; }

/* Buttons */
.rb-btn { display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:2px solid transparent;transition:all .15s; }
.rb-btn-primary  { background:var(--rb-primary);color:#fff;border-color:var(--rb-primary); }
.rb-btn-primary:hover { background:var(--rb-primary-dark);border-color:var(--rb-primary-dark); }
.rb-btn-back     { background:transparent;color:var(--rb-muted);border-color:var(--rb-border); }
.rb-btn-back:hover { border-color:var(--rb-text);color:var(--rb-text); }
.rb-btn-select   { width:100%;justify-content:center;background:var(--rb-primary);color:#fff;padding:8px;font-size:13px;margin-top:8px; }
.rb-btn-pay      { min-width:200px;justify-content:center;font-size:15px;padding:13px 28px; }
.rb-btn:disabled { opacity:.6;cursor:not-allowed; }

/* Inputs */
.rb-label { display:block;font-size:13px;font-weight:600;color:var(--rb-text);margin-bottom:5px; }
.rb-req   { color:var(--rb-danger); }
.rb-input { width:100%;box-sizing:border-box;padding:10px 13px;border:1.5px solid var(--rb-border);border-radius:8px;font-size:14px;color:var(--rb-text);background:#fff;transition:border-color .15s,box-shadow .15s; }
.rb-input:focus { outline:none;border-color:var(--rb-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.rb-textarea { resize:vertical;min-height:80px; }

/* Selected banner */
.rb-selected-service-banner { background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:11px 14px;margin-bottom:18px;font-size:14px;color:var(--rb-primary);font-weight:500; }

/* Slots */
.rb-slots-grid { display:flex;flex-wrap:wrap;gap:8px;margin-top:10px; }
.rb-slot { padding:8px 14px;border:2px solid var(--rb-border);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;background:var(--rb-card);color:var(--rb-text);transition:all .15s; }
.rb-slot:hover    { border-color:var(--rb-primary);color:var(--rb-primary); }
.rb-slot.rb-slot-selected { background:var(--rb-primary);border-color:var(--rb-primary);color:#fff; }

/* Summary */
.rb-booking-summary { background:var(--rb-bg);border:1px solid var(--rb-border);border-radius:10px;padding:14px 18px;margin-bottom:18px;font-size:14px;line-height:1.9; }

/* Form grid */
.rb-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px; }
.rb-form-field { display:flex;flex-direction:column; }
.rb-form-field-full { grid-column:span 2; }

/* Policy box */
.rb-policy-box { background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:16px;margin-bottom:18px; }
.rb-policy-box h4 { margin:0 0 10px;font-size:14px;color:var(--rb-warning);font-weight:700; }
.rb-policy-box ul { margin:0 0 12px;padding-left:18px;font-size:13px;color:var(--rb-text);line-height:1.8; }
.rb-policy-check { display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;cursor:pointer; }
.rb-policy-check input { margin-top:2px;flex-shrink:0; }

/* Deposit note */
.rb-deposit-note { background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:13px;color:#1e40af; }

/* Card element */
.rb-card-element { padding:12px 13px;border:1.5px solid var(--rb-border);border-radius:8px;background:#fff;margin-bottom:12px;min-height:44px; }
.rb-card-element.StripeElement--focus { border-color:var(--rb-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1); }

/* Step nav */
.rb-step-nav { display:flex;gap:12px;align-items:center;margin-top:20px; }

/* Alerts */
.rb-alert { padding:10px 14px;border-radius:8px;font-size:13px; }
.rb-alert-danger  { background:#fee2e2;color:#b91c1c;border:1px solid #fecaca; }
.rb-alert-info    { background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe; }
.rb-alert-success { background:#dcfce7;color:#15803d;border:1px solid #bbf7d0; }

/* Success */
.rb-success-wrap { text-align:center;padding:36px 20px; }
.rb-success-icon { font-size:60px;margin-bottom:14px; }
.rb-success-wrap h2 { font-size:26px;font-weight:800;color:var(--rb-success);margin:0 0 8px; }
.rb-success-wrap p  { font-size:15px;color:var(--rb-muted); }
.rb-confirm-details { background:var(--rb-bg);border:1px solid var(--rb-border);border-radius:10px;padding:16px;margin:18px auto 0;text-align:left;font-size:14px;max-width:400px; }
.rb-cd-row { padding:5px 0;border-bottom:1px solid #f1f5f9; }
.rb-cd-row:last-child { border:none; }
.rb-success-reminder { background:#fef9c3;border:1px solid #fde68a;border-radius:10px;padding:14px;margin:16px auto 0;text-align:left;font-size:13px;color:#92400e;max-width:400px; }
.rb-success-reminder p { margin:0 0 6px; }
.rb-success-reminder p:last-child { margin:0; }

/* My Bookings / Cancel */
.rb-my-bookings-wrap,.rb-cancel-wrap { max-width:680px;margin:0 auto; }
.rb-lookup-box { background:var(--rb-card);border:1px solid var(--rb-border);border-radius:var(--rb-radius);padding:26px; }
.rb-lookup-title { font-size:17px;font-weight:700;margin:0 0 5px; }
.rb-lookup-desc  { font-size:13px;color:var(--rb-muted);margin:0 0 16px; }
.rb-lookup-form  { display:flex;gap:8px; }
.rb-lookup-form .rb-input { flex:1; }
.rb-results-title { font-size:16px;font-weight:700;margin:22px 0 12px; }
.rb-booking-card  { background:var(--rb-card);border:1px solid var(--rb-border);border-radius:var(--rb-radius);margin-bottom:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05); }
.rb-bc-header { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--rb-bg);border-bottom:1px solid var(--rb-border); }
.rb-bc-service { font-size:14px;font-weight:700; }
.rb-bc-body { padding:12px 16px; }
.rb-bc-row { display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;border-bottom:1px solid #f1f5f9; }
.rb-bc-row:last-child { border:none; }
.rb-bc-row span:first-child { color:var(--rb-muted); }
.rb-bc-footer { padding:10px 16px;background:var(--rb-bg);border-top:1px solid var(--rb-border); }
.rb-cancelled-msg { font-size:13px;color:var(--rb-success);font-weight:600; }

/* Summary card */
.rb-summary-card { background:var(--rb-card);border:1px solid var(--rb-border);border-radius:var(--rb-radius);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);max-width:540px; }
.rb-summary-header { display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px;background:linear-gradient(135deg,#eff6ff 0%,#f0fdf4 100%);border-bottom:1px solid var(--rb-border);gap:10px; }
.rb-summary-title { display:flex;align-items:center;gap:10px; }
.rb-summary-icon { font-size:30px; }
.rb-summary-service { font-size:16px;font-weight:800; }
.rb-summary-id { font-size:12px;color:var(--rb-muted);margin-top:2px; }
.rb-summary-badges { display:flex;flex-direction:column;gap:4px;align-items:flex-end; }
.rb-summary-grid { padding:6px 20px 16px; }
.rb-summary-row { display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #f1f5f9;font-size:13px;gap:14px; }
.rb-summary-row:last-child { border:none; }
.rb-summary-label { color:var(--rb-muted);font-size:12px;flex-shrink:0; }
.rb-summary-value { font-weight:600;text-align:right; }
.rb-mono { font-family:monospace;font-size:11px;word-break:break-all; }

/* Upcoming bookings */
.rb-upcoming-list { display:flex;flex-direction:column;gap:10px; }
.rb-upcoming-card { display:flex;align-items:center;gap:14px;background:var(--rb-card);border:1px solid var(--rb-border);border-radius:var(--rb-radius);padding:14px 18px;box-shadow:0 1px 4px rgba(0,0,0,.05); }
.rb-uc-date-block { text-align:center;background:var(--rb-primary);color:#fff;border-radius:10px;padding:9px 12px;min-width:50px;flex-shrink:0; }
.rb-uc-month { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.85; }
.rb-uc-day   { font-size:24px;font-weight:900;line-height:1; }
.rb-uc-dow   { font-size:10px;opacity:.85;margin-top:2px; }
.rb-uc-body  { flex:1; }
.rb-uc-service { font-size:14px;font-weight:700;margin-bottom:3px; }
.rb-uc-time,.rb-uc-customer { font-size:12px;color:var(--rb-muted);margin-top:2px; }
.rb-uc-meta { display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0; }
.rb-uc-id { font-size:11px;color:var(--rb-muted); }

/* Cancel */
.rb-cancel-card { background:var(--rb-card);border:2px solid #fca5a5;border-radius:var(--rb-radius);padding:30px;text-align:center;max-width:480px;margin:0 auto; }
.rb-cancel-icon { font-size:48px;margin-bottom:10px; }
.rb-cancel-card h3 { font-size:20px;font-weight:800;color:var(--rb-danger);margin:0 0 14px; }
.rb-cancel-actions { display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px; }
.rb-btn-danger-solid   { background:var(--rb-danger);color:#fff;border-color:var(--rb-danger); }
.rb-btn-danger-solid:hover { background:#b91c1c; }
.rb-btn-danger-outline { color:var(--rb-danger);border-color:var(--rb-danger);background:transparent; }
.rb-btn-danger-outline:hover { background:#fee2e2; }

/* Inline loading */
.rb-inline-loading { display:flex;align-items:center;gap:8px;color:var(--rb-primary);font-size:13px;padding:10px 0; }

/* Booking count badge */
.rb-booking-count { background:var(--rb-primary);color:#fff;font-size:14px;font-weight:700;padding:3px 12px;border-radius:20px;display:inline-block; }

/* Full-screen loading overlay */
.rb-loading { position:absolute;inset:0;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--rb-radius);font-size:14px;font-weight:600;color:var(--rb-primary);z-index:10; }
.rb-spinner { width:22px;height:22px;border:3px solid #bfdbfe;border-top-color:var(--rb-primary);border-radius:50%;animation:rbSpin .7s linear infinite; }
@keyframes rbSpin { to{transform:rotate(360deg)} }

/* Buffer tag */
.rb-buffer-tag { background:#fef3c7;color:#92400e;font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px; }
.rb-empty-box { text-align:center;padding:36px 16px;color:var(--rb-muted); }
.rb-empty-icon { font-size:44px;margin-bottom:8px; }

@media(max-width:600px){
    .rb-services-grid,.rb-form-grid { grid-template-columns:1fr; }
    .rb-form-field-full { grid-column:span 1; }
    .rb-lookup-form { flex-direction:column; }
    .rb-upcoming-card { flex-wrap:wrap; }
    .rb-summary-header { flex-direction:column; }
    .rb-summary-badges { flex-direction:row; }
}

/* Services list display mode */
.rb-services-wrap .rb-service-category { margin-bottom:32px; }
.rb-svc-steps,.rb-svc-benefits { font-size:12px;color:var(--rb-muted);margin-top:8px;line-height:1.6;border-top:1px solid var(--rb-border);padding-top:8px; }

/* Flat deposit badge on service cards */
.rb-svc-deposit-badge {
    display: inline-block;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    margin: 6px 0 4px;
}

/* ═══════════════════════════════════════════════════
   SERVICE LIST — Screenshot-matching design
   Grid of rows: bold name top-left, price/duration
   below, image top-right, subtle divider, light bg
   ═══════════════════════════════════════════════════ */

/* Wrap the whole step 1 in the light cream background */
#rb-step-1 {
    background: #f5f5f3;
    padding: 32px 28px 40px;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Section heading — large serif-style */
.rb-section-heading {
    font-size: clamp(22px, 4vw, 36px);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 28px;
    letter-spacing: -0.02em;
    font-family: Georgia, 'Times New Roman', serif;
}

.rb-service-section {
    margin-bottom: 48px;
}
.rb-service-section:last-child {
    margin-bottom: 0;
}

/* 3-column grid of rows — matches screenshot */
.rb-svc-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

/* Each service row: text left, image right */
.rb-svc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 16px 16px;
    border-bottom: 1px solid #d8d8d6;
    cursor: pointer;
    transition: background 0.18s;
    position: relative;
    gap: 10px;
}
.rb-svc-row:hover {
    background: rgba(0,0,0,0.03);
}
/* Vertical dividers between columns */
.rb-svc-list > .rb-svc-row:nth-child(3n+2) {
    border-left: 1px solid #d8d8d6;
    border-right: 1px solid #d8d8d6;
}

/* Left info block */
.rb-svc-info {
    flex: 1;
    min-width: 0;
}

.rb-svc-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rb-svc-sub {
    font-size: 13px;
    color: #444;
    margin-bottom: 4px;
    font-weight: 400;
}

.rb-svc-tagline {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
    line-height: 1.4;
    font-style: italic;
}

    font-size: 11px;
    color: #b45309;
    margin-top: 5px;
}

.rb-free-pill {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

/* Right block: image + book button */
.rb-svc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.rb-svc-img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    flex-shrink: 0;
}

/* Book button — minimal, appears on hover + always visible on mobile */
.rb-btn-book {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    background: transparent;
    border: 1.5px solid #1a1a1a;
    border-radius: 20px;
    padding: 5px 14px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    opacity: 0;
}
.rb-svc-row:hover .rb-btn-book {
    opacity: 1;
    background: #1a1a1a;
    color: #fff;
}
/* Always show on touch/mobile */
@media (hover: none), (max-width: 640px) {
    .rb-btn-book { opacity: 1; }
}

/* Selected state */
.rb-svc-row.rb-svc-selected {
    background: #eff6ff;
}
.rb-svc-row.rb-svc-selected .rb-svc-title {
    color: #2563eb;
}
.rb-svc-row.rb-svc-selected .rb-btn-book {
    opacity: 1;
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* Responsive — 2 cols on tablet */
@media (max-width: 900px) {
    .rb-svc-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .rb-svc-list > .rb-svc-row:nth-child(3n+2) {
        border-left: none;
        border-right: none;
    }
    .rb-svc-list > .rb-svc-row:nth-child(2n) {
        border-left: 1px solid #d8d8d6;
    }
}

/* Responsive — 1 col on mobile */
@media (max-width: 540px) {
    #rb-step-1 { padding: 20px 14px; }
    .rb-svc-list { grid-template-columns: 1fr; }
    .rb-svc-list > .rb-svc-row:nth-child(2n) { border-left: none; }
    .rb-svc-img { width: 80px; height: 65px; }
    .rb-section-heading { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════
   STEPS 2–5 — Redesigned flow
   ═══════════════════════════════════════════════════ */

/* Shared flow wrapper */
.rb-flow-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 0 8px;
}

/* ── Progress bar ─────────────────────────────── */
.rb-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    gap: 0;
}
.rb-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.rb-progress-step span {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
}
.rb-prog-active span  { color: var(--rb-primary); font-weight: 700; }
.rb-prog-done span    { color: #16a34a; font-weight: 600; }

.rb-prog-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.rb-prog-active .rb-prog-dot {
    background: var(--rb-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.rb-prog-done .rb-prog-dot {
    background: #16a34a;
    color: #fff;
    font-size: 14px;
}

.rb-progress-line {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    min-width: 24px;
    max-width: 60px;
    margin: 0 4px;
    margin-bottom: 18px;
}
.rb-prog-line-done { background: #16a34a; }

/* ── Step 2: Date & Time ──────────────────────── */
.rb-dt-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.rb-dt-panel {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* Staff Selection */
.rb-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 20px 0; }
.rb-staff-card { background: #fff; border: 2px solid var(--rb-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; }
.rb-staff-card:hover { border-color: var(--rb-primary); background: #f8fafc; }
.rb-staff-card.rb-staff-selected { border-color: var(--rb-primary); background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.rb-staff-avatar { font-size: 32px; margin-bottom: 8px; }
.rb-staff-name { font-weight: 600; color: #1e293b; }

.rb-panel-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--rb-text);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rb-border);
}

.rb-date-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid var(--rb-border);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rb-text);
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    margin-bottom: 10px;
}
.rb-date-input:focus {
    outline: none;
    border-color: var(--rb-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    background: #fff;
}
.rb-dt-hint {
    font-size: 12px;
    color: var(--rb-muted);
    line-height: 1.5;
}

/* Slots */
.rb-slots-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rb-primary);
    padding: 8px 0;
}
.rb-mini-spinner {
    width: 16px; height: 16px;
    border: 2px solid #bfdbfe;
    border-top-color: var(--rb-primary);
    border-radius: 50%;
    animation: rbSpin .7s linear infinite;
    flex-shrink: 0;
}
.rb-slots-placeholder {
    font-size: 13px;
    color: #94a3b8;
    text-align: center;
    padding: 20px 10px;
    border: 1.5px dashed #e2e8f0;
    border-radius: 10px;
}
.rb-no-slots-msg {
    text-align: center;
    padding: 20px 10px;
    font-size: 13px;
    color: var(--rb-muted);
    background: #f8fafc;
    border-radius: 10px;
    line-height: 1.7;
}

/* Slot buttons */
.rb-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.rb-slot {
    padding: 9px 6px;
    border: 1.5px solid var(--rb-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #fff;
    color: var(--rb-text);
    text-align: center;
    transition: all .15s;
}
.rb-slot:hover    { border-color: var(--rb-primary); color: var(--rb-primary); background: #eff6ff; }
.rb-slot.rb-slot-selected { background: var(--rb-primary); border-color: var(--rb-primary); color: #fff; }

/* ── Recap card (steps 3 & 4) ─────────────────── */
.rb-recap-card {
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.rb-recap-service {
    font-size: 16px;
    font-weight: 800;
    color: var(--rb-primary);
    margin-bottom: 10px;
}
.rb-recap-rows { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.rb-recap-row  { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--rb-muted); }
.rb-recap-row strong { color: var(--rb-text); font-weight: 600; }
.rb-recap-row small  { color: var(--rb-muted); font-weight: 400; }
.rb-recap-free { color: #16a34a !important; }

/* ── Step 3: Details card ─────────────────────── */
.rb-details-card {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 14px;
    padding: 22px 22px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.rb-details-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--rb-text);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rb-border);
}
.rb-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.rb-field-group { display: flex; flex-direction: column; gap: 5px; }
.rb-field-full  { grid-column: span 2; }
.rb-field-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rb-field-opt {
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.rb-field-input {
    padding: 11px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 14px;
    color: var(--rb-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.rb-field-input:focus {
    outline: none;
    border-color: var(--rb-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.rb-field-textarea { resize: vertical; min-height: 80px; }

/* ── Policy card ──────────────────────────────── */
.rb-policy-card {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
}
.rb-policy-heading {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 14px;
}
.rb-policy-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rb-policy-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #1e293b;
    line-height: 1.5;
}
.rb-policy-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.rb-agree-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding-top: 14px;
    border-top: 1px solid #fde68a;
}
.rb-agree-check { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--rb-primary); }
.rb-agree-text  { font-size: 13px; font-weight: 600; color: #92400e; line-height: 1.4; }

/* Continue button */
.rb-btn-continue { padding: 12px 28px; font-size: 15px; }

/* ── Step 4: Payment card ─────────────────────── */
.rb-payment-card {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.rb-payment-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--rb-text);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rb-border);
}

.rb-fee-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.6;
}
.rb-fee-icon { font-size: 20px; flex-shrink: 0; }
.rb-fee-banner strong { display: block; font-size: 15px; font-weight: 800; }

.rb-free-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #15803d;
    line-height: 1.6;
}

.rb-card-element {
    padding: 13px 14px;
    border: 1.5px solid var(--rb-border);
    border-radius: 10px;
    background: #fff;
    margin: 0 0 10px;
    min-height: 46px;
    transition: border-color .15s, box-shadow .15s;
}
.rb-card-element.StripeElement--focus {
    border-color: var(--rb-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.rb-card-error {
    font-size: 13px;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.rb-stripe-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 10px;
}

/* Pay button */
.rb-btn-pay {
    background: #1a1a1a;
    color: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 10px;
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    justify-content: center;
}
.rb-btn-pay:hover { background: #333; border-color: #333; }
.rb-btn-pay:disabled { opacity: .6; cursor: not-allowed; }

/* ── Step nav (shared) ────────────────────────── */
.rb-step-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    flex-wrap: wrap;
}

/* ── Step 5: Confirmed ────────────────────────── */
.rb-confirmed-wrap {
    text-align: center;
    padding: 24px 0 40px;
}
.rb-confirmed-icon  { font-size: 64px; margin-bottom: 14px; }
.rb-confirmed-title { font-size: 28px; font-weight: 800; color: #16a34a; margin: 0 0 8px; }
.rb-confirmed-sub   { font-size: 15px; color: var(--rb-muted); margin-bottom: 24px; }

.rb-confirmed-card {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 14px;
    padding: 6px 20px;
    max-width: 420px;
    margin: 0 auto 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    text-align: left;
}
.rb-confirmed-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    gap: 12px;
}
.rb-confirmed-row:last-child { border: none; }
.rb-confirmed-row span  { color: var(--rb-muted); flex-shrink: 0; }
.rb-confirmed-row strong { font-weight: 600; color: var(--rb-text); text-align: right; }

.rb-confirmed-reminders {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rb-reminder-item {
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    color: #92400e;
    text-align: left;
    line-height: 1.5;
}

/* ── Back button ──────────────────────────────── */
.rb-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}
.rb-btn-back:hover { border-color: #94a3b8; color: #1e293b; }

/* Responsive */
@media (max-width: 640px) {
    .rb-dt-layout      { grid-template-columns: 1fr; }
    .rb-fields-grid    { grid-template-columns: 1fr; }
    .rb-field-full     { grid-column: span 1; }
    .rb-progress-step span { display: none; }
    .rb-progress-line  { min-width: 16px; }
    .rb-btn-pay, .rb-btn-continue { width: 100%; justify-content: center; }
}