/* Booking Services – Public Styles v2 */
:root {
    --rb-primary:#2563eb; --rb-primary-dark:#1d4ed8;
    --rb-success:#16a34a; --rb-danger:#dc2626;
    --rb-warning:#d97706; --rb-accent:#0f766e;
    --rb-bg:#f8fafc; --rb-card:#ffffff;
    --rb-border:#e2e8f0; --rb-text:#1e293b; --rb-muted:#64748b;
    --rb-button-text:#ffffff; --rb-input-bg:#ffffff; --rb-selected-bg:#eff6ff;
    --rb-body-font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --rb-body-size:14px; --rb-body-weight:400; --rb-body-line:1.6; --rb-body-spacing:0px;
    --rb-heading-font:var(--rb-body-font); --rb-heading-size:20px; --rb-heading-weight:700; --rb-heading-line:1.3; --rb-heading-spacing:0px;
    --rb-paragraph-font:var(--rb-body-font); --rb-paragraph-size:14px; --rb-paragraph-weight:400; --rb-paragraph-line:1.6; --rb-paragraph-spacing:0px;
    --rb-button-font:var(--rb-body-font); --rb-button-size:14px; --rb-button-weight:600; --rb-button-line:1.2; --rb-button-spacing:0px;
    --rb-label-font:var(--rb-body-font); --rb-label-size:13px; --rb-label-weight:600; --rb-label-line:1.4; --rb-label-spacing:0px;
    --rb-radius:5px; --rb-shadow:0 4px 16px rgba(0,0,0,.08);
}

.rb-booking-wrap { max-width:820px;margin:0 auto;font-family:var(--rb-body-font);font-size:var(--rb-body-size);font-weight:var(--rb-body-weight);line-height:var(--rb-body-line);letter-spacing:var(--rb-body-spacing);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; }
.rb-panel-heading,.rb-details-heading,.rb-policy-heading,.rb-payment-heading { position:relative;padding-left:14px; }
.rb-panel-heading::before,.rb-details-heading::before,.rb-policy-heading::before,.rb-payment-heading::before { content:"";position:absolute;left:0;top:.2em;width:3px;height:1.1em;border-radius:3px;background:var(--rb-accent); }
.rb-staff-avatar,.rb-confirmed-icon,.rb-cancel-icon,.rb-summary-icon,.rb-empty-icon { color:var(--rb-primary);font-size:0!important; }
.rb-staff-avatar::before { content:"";display:block;width:28px;height:28px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.rb-confirmed-icon::before,.rb-cancel-icon::before { content:"✓";display:inline-flex;width:48px;height:48px;border:2px solid currentColor;border-radius:50%;align-items:center;justify-content:center;font-size:25px;font-weight:700; }
.rb-summary-icon::before { content:"";display:inline-block;width:24px;height:24px;border:2px solid currentColor;border-radius:5px;box-shadow:inset 0 5px 0 rgba(37,99,235,.12); }
.rb-empty-icon::before { content:"—";display:inline-flex;width:42px;height:42px;border:2px solid var(--rb-border);border-radius:50%;align-items:center;justify-content:center;font-size:22px;color:var(--rb-muted); }
.rb-policy-icon,.rb-fee-icon { display:inline-flex;width:30px;height:30px;border:1px solid var(--rb-border);border-radius:8px;align-items:center;justify-content:center;color:var(--rb-primary);font-size:0!important; }
.rb-policy-icon::before,.rb-fee-icon::before { content:"";width:12px;height:12px;border:2px solid currentColor;border-radius:3px; }

/* 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;
}

/* Booking workspace: sidebar + always-visible calendar */
.rb-booking-wrap { max-width:1180px; }
.rb-booking-shell { display:grid;grid-template-columns:260px minmax(0,1fr);min-height:650px;background:#fff;border:1px solid var(--rb-border);border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(15,23,42,.10); }
.rb-booking-sidebar { background:#172554;color:#fff;padding:28px 18px;display:flex;flex-direction:column; }
.rb-sidebar-brand { padding:0 10px 20px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#bfdbfe; }
.rb-sidebar-steps { list-style:none;margin:0;padding:0;display:grid;gap:9px; }
.rb-sidebar-step { display:grid;grid-template-columns:32px minmax(0,1fr);gap:11px;align-items:start;padding:13px 12px;border-radius:10px;color:#cbd5e1;background:rgba(255,255,255,.045);transition:.2s; }
.rb-sidebar-step strong { display:block;color:inherit;font-size:14px;line-height:1.25; }
.rb-sidebar-step small { display:block;margin-top:4px;color:#94a3b8;font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis; }
.rb-sidebar-num { width:27px;height:27px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700; }
.rb-sidebar-step.is-active { background:rgba(59,130,246,.23);color:#fff;box-shadow:inset 3px 0 0 #60a5fa; }
.rb-sidebar-step.is-active .rb-sidebar-num { background:var(--rb-primary);border-color:var(--rb-primary); }
.rb-sidebar-step.is-complete { color:#fff; }
.rb-sidebar-step.is-complete .rb-sidebar-num { font-size:0;background:#0f766e;border-color:#2dd4bf; }
.rb-sidebar-step.is-complete .rb-sidebar-num::before { content:"✓";font-size:13px; }
.rb-sidebar-secure { margin-top:auto;padding:22px 10px 0;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:#94a3b8; }
.rb-booking-main { min-width:0;padding:30px 34px; }
.rb-booking-main > .rb-step { min-width:0; }
.rb-booking-main .rb-flow-wrap { max-width:none;margin:0;padding:0; }
.rb-booking-main .rb-progress { display:none; }
.rb-mobile-steps-toggle { display:none; }

.rb-date-time-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 22px; }
.rb-date-time-heading h2 { margin:0 0 5px;font-size:25px;line-height:1.2;color:var(--rb-text); }
.rb-date-time-heading p { margin:0;color:var(--rb-muted);font-size:13px; }
.rb-timezone { display:inline-flex;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--rb-primary) 10%,white);color:var(--rb-primary);font-size:11px;font-weight:700;white-space:nowrap; }
.rb-dt-layout { grid-template-columns:minmax(360px,1.45fr) minmax(220px,.75fr);gap:24px; }
.rb-calendar-panel,.rb-time-panel { background:#fff;border:1px solid var(--rb-border);border-radius:14px;padding:20px;box-shadow:0 1px 4px rgba(15,23,42,.04); }
.rb-calendar-toolbar { display:grid;grid-template-columns:minmax(120px,1fr) 100px auto;gap:10px;margin-bottom:20px; }
.rb-calendar-toolbar select { width:100%;min-height:42px;padding:0 12px;border:1px solid var(--rb-border);border-radius:8px;background:#fff;color:var(--rb-text);font-size:14px; }
.rb-calendar-nav { display:flex; }
.rb-calendar-nav button { width:42px;height:42px;border:1px solid var(--rb-border);background:#fff;color:var(--rb-text);font-size:17px;cursor:pointer; }
.rb-calendar-nav button:first-child { border-radius:8px 0 0 8px; }
.rb-calendar-nav button:last-child { border-radius:0 8px 8px 0;border-left:0; }
.rb-calendar-nav button:hover:not(:disabled) { color:var(--rb-primary);background:var(--rb-bg); }
.rb-calendar-nav button:disabled { opacity:.4;cursor:not-allowed; }
.rb-calendar-weekdays,.rb-calendar-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px; }
.rb-calendar-weekdays { margin-bottom:8px; }
.rb-calendar-weekdays span { text-align:center;color:var(--rb-muted);font-size:11px;font-weight:700;text-transform:uppercase; }
.rb-calendar-day { aspect-ratio:1.12/1;min-width:0;border:1px solid transparent;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:13px;font-weight:650;cursor:default;transition:.15s; }
.rb-calendar-day.is-available { border-color:color-mix(in srgb,var(--rb-primary) 38%,white);background:color-mix(in srgb,var(--rb-primary) 7%,white);color:var(--rb-primary);cursor:pointer; }
.rb-calendar-day.is-checking { background:#f1f5f9;color:#94a3b8;opacity:.65;cursor:wait;animation:rbCalendarPulse 1.1s ease-in-out infinite alternate; }
@keyframes rbCalendarPulse { to { opacity:.35; } }
.rb-calendar-day.is-available:hover { border-color:var(--rb-primary);background:color-mix(in srgb,var(--rb-primary) 14%,white);transform:translateY(-1px); }
.rb-calendar-day.is-selected { background:var(--rb-primary);border-color:var(--rb-primary);color:#fff;box-shadow:0 4px 10px color-mix(in srgb,var(--rb-primary) 25%,transparent); }
.rb-calendar-day.is-unavailable { background:#f1f5f9;color:#a8b0bc;opacity:.65; }
.rb-calendar-day.is-other-month { opacity:.32; }
.rb-calendar-legend { display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;color:var(--rb-muted);font-size:10px; }
.rb-calendar-legend span { display:flex;align-items:center;gap:5px; }
.rb-calendar-legend i { width:10px;height:10px;border-radius:3px;background:#f1f5f9; }
.rb-calendar-legend .is-available { border:1px solid var(--rb-primary);background:color-mix(in srgb,var(--rb-primary) 8%,white); }
.rb-calendar-legend .is-selected { background:var(--rb-primary); }
.rb-selected-date-label { margin:-5px 0 14px;color:var(--rb-primary);font-size:12px;font-weight:700; }
.rb-inline-error { margin:12px 0;padding:10px 12px;border:1px solid #fecaca;border-radius:8px;background:#fef2f2;color:#b91c1c;font-size:12px;font-weight:600; }
.rb-time-panel .rb-slots-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rb-time-panel .rb-slot { min-height:42px; }
.rb-step-nav .rb-date-continue { margin-left:auto;min-width:130px;justify-content:center; }

@media (max-width:900px) {
    .rb-booking-shell { grid-template-columns:210px minmax(0,1fr); }
    .rb-booking-main { padding:24px 22px; }
    .rb-dt-layout { grid-template-columns:1fr; }
    .rb-time-panel .rb-slots-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .rb-booking-wrap { width:100%; }
    .rb-mobile-steps-toggle { width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:1px solid var(--rb-border);border-radius:10px;background:#fff;color:var(--rb-text);font-weight:700;margin-bottom:10px; }
    .rb-mobile-steps-toggle span { color:var(--rb-primary);font-size:12px; }
    .rb-booking-shell { display:block;min-height:0;border-radius:12px;overflow:visible; }
    .rb-booking-sidebar { display:none;padding:14px;border-radius:12px 12px 0 0; }
    .rb-booking-sidebar.is-open { display:block; }
    .rb-sidebar-brand,.rb-sidebar-secure { display:none; }
    .rb-sidebar-steps { gap:5px; }
    .rb-sidebar-step { padding:9px 10px;grid-template-columns:28px minmax(0,1fr); }
    .rb-sidebar-num { width:24px;height:24px; }
    .rb-sidebar-step small { display:none; }
    .rb-booking-main { padding:18px 12px; }
    .rb-date-time-heading { display:block;margin-bottom:16px; }
    .rb-date-time-heading h2 { font-size:21px; }
    .rb-timezone { margin-top:10px; }
    .rb-calendar-panel,.rb-time-panel { padding:14px 10px; }
    .rb-calendar-toolbar { grid-template-columns:1fr 82px; }
    .rb-calendar-nav { grid-column:1/-1;justify-content:flex-end; }
    .rb-calendar-weekdays,.rb-calendar-grid { gap:3px; }
    .rb-calendar-weekdays span { font-size:9px; }
    .rb-calendar-day { border-radius:6px;font-size:11px;aspect-ratio:1/1; }
    .rb-calendar-legend { gap:8px; }
    .rb-time-panel .rb-slots-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .rb-step-nav { position:sticky;bottom:0;z-index:5;margin:18px -12px -18px;padding:12px;background:#fff;border-top:1px solid var(--rb-border); }
    .rb-step-nav .rb-btn { min-width:0; }
    .rb-step-nav .rb-date-continue { flex:1; }
}

    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; }
}

/* ── Medical History & Health Screen ───────────────────── */
.rb-medical-card {
    border-left: 4px solid #f59e0b;
    margin-bottom: 16px;
}
.rb-medical-intro {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.5;
}
.rb-medical-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.rb-medical-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fafafa;
    transition: background .15s, border-color .15s;
}
.rb-medical-row:hover {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.rb-medical-row-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f1f5f9;
}
.rb-medical-row-disabled:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
}
.rb-medical-check {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #3b82f6;
    cursor: pointer;
}
.rb-medical-select,
.rb-medical-answer {
    width: min(220px, 45%);
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    padding: 7px 9px;
    color: #1e293b;
}
.rb-medical-answer:focus,
.rb-medical-select:focus {
    outline: 2px solid color-mix(in srgb, var(--rb-primary) 25%, transparent);
    border-color: var(--rb-primary);
}
.rb-medical-text {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.5;
}
.rb-medical-eg {
    font-size: 12px;
    color: #64748b;
}
.rb-medical-note {
    font-size: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 600px) {
    .rb-medical-row { flex-wrap: wrap; }
    .rb-medical-select, .rb-medical-answer { width: 100%; order: 2; }
}

/* Dashboard-controlled frontend design system */
#rb-booking-app h1, #rb-booking-app h2, #rb-booking-app h3, #rb-booking-app h4,
#rb-booking-app h5, #rb-booking-app h6, #rb-booking-app .rb-step-title,
#rb-booking-app .rb-panel-heading, #rb-booking-app .rb-details-heading,
#rb-booking-app .rb-policy-heading, #rb-booking-app .rb-payment-heading,
#rb-booking-app .rb-cat-label, #rb-booking-app .rb-sidebar-brand {
    font-family:var(--rb-heading-font);font-size:var(--rb-heading-size);font-weight:var(--rb-heading-weight);
    line-height:var(--rb-heading-line);letter-spacing:var(--rb-heading-spacing);
}
#rb-booking-app p, #rb-booking-app .rb-svc-desc, #rb-booking-app .rb-medical-intro,
#rb-booking-app .rb-medical-note, #rb-booking-app .rb-hint, #rb-booking-app small {
    font-family:var(--rb-paragraph-font);font-size:var(--rb-paragraph-size);font-weight:var(--rb-paragraph-weight);
    line-height:var(--rb-paragraph-line);letter-spacing:var(--rb-paragraph-spacing);
}
#rb-booking-app button, #rb-booking-app .rb-btn, #rb-booking-app [role="button"] {
    font-family:var(--rb-button-font);font-size:var(--rb-button-size);font-weight:var(--rb-button-weight);
    line-height:var(--rb-button-line);letter-spacing:var(--rb-button-spacing);
}
#rb-booking-app label, #rb-booking-app .rb-label, #rb-booking-app .rb-field-label,
#rb-booking-app input, #rb-booking-app select, #rb-booking-app textarea {
    font-family:var(--rb-label-font);font-size:var(--rb-label-size);font-weight:var(--rb-label-weight);
    line-height:var(--rb-label-line);letter-spacing:var(--rb-label-spacing);
}
#rb-booking-app .rb-btn-primary, #rb-booking-app .rb-btn-select,
#rb-booking-app .rb-slot.rb-slot-selected, #rb-booking-app .rb-date-cell.is-selected {
    color:var(--rb-button-text);
}
#rb-booking-app input, #rb-booking-app select, #rb-booking-app textarea,
#rb-booking-app .rb-field-input, #rb-booking-app .rb-input { background-color:var(--rb-input-bg);color:var(--rb-text);border-color:var(--rb-border); }
#rb-booking-app .rb-service-card.rb-selected, #rb-booking-app .rb-selected-service-banner,
#rb-booking-app .rb-date-cell.is-available:hover, #rb-booking-app .rb-staff-card.rb-selected { background-color:var(--rb-selected-bg); }
#rb-booking-app .rb-service-card, #rb-booking-app .rb-details-card, #rb-booking-app .rb-policy-card,
#rb-booking-app .rb-payment-card, #rb-booking-app .rb-calendar-panel { background-color:var(--rb-card);border-color:var(--rb-border); }

/* ── Step 0: Category Grid ────────────────────────── */
.rb-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 8px 0 24px;
}
.rb-cat-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.09);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
}
.rb-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}
.rb-cat-img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.rb-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.rb-cat-card:hover .rb-cat-img {
    transform: scale(1.04);
}
.rb-cat-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.rb-cat-name {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.rb-cat-count {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
}
.rb-cat-select {
    margin-top: 4px;
    padding: 9px 28px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
}
.rb-cat-select:hover {
    background: #333;
}

/* ── Step 1: header with back + title ──────────────── */
.rb-step1-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.rb-btn-back-cat {
    background: none;
    border: 1.5px solid #d1d5db;
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.rb-btn-back-cat:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.rb-step1-cat-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

@media (max-width: 640px) {
    .rb-cat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}
@media (max-width: 400px) {
    .rb-cat-grid {
        grid-template-columns: 1fr;
    }
}

/* Final booking workspace overrides (kept last to supersede legacy flow rules) */
.rb-booking-main .rb-flow-wrap { max-width:none;margin:0;padding:0; }
.rb-booking-main .rb-progress { display:none; }
.rb-booking-main .rb-dt-layout { grid-template-columns:minmax(360px,1.45fr) minmax(220px,.75fr);gap:24px; }
@media (max-width:900px) {
    .rb-booking-main .rb-dt-layout { grid-template-columns:1fr; }
}
@media (max-width:680px) {
    .rb-booking-main .rb-dt-layout { grid-template-columns:minmax(0,1fr);gap:14px; }
    .rb-booking-main .rb-step-nav { position:sticky;bottom:0;z-index:5;margin:18px -12px -18px;padding:12px;background:#fff;border-top:1px solid var(--rb-border); }
}

/* Keep user-selected design settings authoritative over legacy component rules. */
#rb-booking-app [class*="-title"], #rb-booking-app [class*="-heading"] {
    font-family:var(--rb-heading-font);font-size:var(--rb-heading-size);font-weight:var(--rb-heading-weight);
    line-height:var(--rb-heading-line);letter-spacing:var(--rb-heading-spacing);color:var(--rb-text);
}
#rb-booking-app [class*="-desc"], #rb-booking-app [class*="-intro"],
#rb-booking-app [class*="-note"], #rb-booking-app [class*="-hint"] {
    font-family:var(--rb-paragraph-font);font-size:var(--rb-paragraph-size);font-weight:var(--rb-paragraph-weight);
    line-height:var(--rb-paragraph-line);letter-spacing:var(--rb-paragraph-spacing);color:var(--rb-muted);
}
#rb-booking-app .rb-cat-select, #rb-booking-app .rb-btn-primary, #rb-booking-app .rb-btn-select {
    background:var(--rb-primary);border-color:var(--rb-primary);color:var(--rb-button-text);
}
#rb-booking-app .rb-cat-select:hover, #rb-booking-app .rb-btn-primary:hover { background:var(--rb-primary-dark);border-color:var(--rb-primary-dark); }
#rb-booking-app .rb-step-nav { background-color:var(--rb-card);border-color:var(--rb-border); }

/* Professional compact defaults */
#rb-booking-app, #rb-booking-app * { text-transform:none;letter-spacing:var(--rb-body-spacing);font-style:normal; }
#rb-booking-app h1, #rb-booking-app h2, #rb-booking-app h3, #rb-booking-app h4,
#rb-booking-app h5, #rb-booking-app h6, #rb-booking-app [class*="-title"], #rb-booking-app [class*="-heading"] { letter-spacing:var(--rb-heading-spacing); }
#rb-booking-app p, #rb-booking-app [class*="-desc"], #rb-booking-app [class*="-intro"],
#rb-booking-app [class*="-note"], #rb-booking-app [class*="-hint"] { letter-spacing:var(--rb-paragraph-spacing); }
#rb-booking-app button, #rb-booking-app .rb-btn, #rb-booking-app [role="button"] { letter-spacing:var(--rb-button-spacing); }
#rb-booking-app label, #rb-booking-app input, #rb-booking-app select, #rb-booking-app textarea { letter-spacing:var(--rb-label-spacing); }

#rb-booking-app button, #rb-booking-app img, #rb-booking-app input, #rb-booking-app select,
#rb-booking-app textarea, #rb-booking-app [class*="card"], #rb-booking-app [class*="panel"],
#rb-booking-app [class*="box"], #rb-booking-app [class*="banner"], #rb-booking-app [class*="notice"],
#rb-booking-app [class*="placeholder"], #rb-booking-app .rb-booking-shell,
#rb-booking-app [class*="tag"], #rb-booking-app [class*="badge"], #rb-booking-app .rb-timezone,
#rb-booking-app .rb-sidebar-step, #rb-booking-app .rb-step-nav { border-radius:5px!important; }

#rb-booking-app .rb-staff-grid { display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px; }
#rb-booking-app .rb-staff-card { width:auto;min-width:126px;display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;padding:9px 13px;border:1px solid var(--rb-border);background:var(--rb-card);box-shadow:none;text-align:left; }
#rb-booking-app .rb-staff-card:hover { border-color:var(--rb-primary);background:var(--rb-selected-bg);transform:none; }
#rb-booking-app .rb-staff-card.rb-staff-selected { border-color:var(--rb-primary);background:var(--rb-selected-bg);box-shadow:inset 3px 0 0 var(--rb-primary); }
#rb-booking-app .rb-staff-avatar { margin:0; }
#rb-booking-app .rb-staff-avatar::before { width:20px;height:20px; }
#rb-booking-app .rb-staff-name { color:var(--rb-text);font-size:13px;font-weight:600; }

#rb-booking-app .rb-time-panel .rb-slots-grid { display:flex;flex-wrap:wrap;gap:7px; }
#rb-booking-app .rb-time-panel .rb-slot { width:auto;min-width:62px;min-height:30px;padding:5px 9px;border:1px solid var(--rb-border);font-size:11px;font-weight:600;line-height:1.2;box-shadow:none; }
#rb-booking-app .rb-time-panel .rb-slot:hover { transform:none;background:var(--rb-selected-bg); }
#rb-booking-app .rb-calendar-day.is-unavailable { opacity:1;background:#f3f4f6;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed; }
#rb-booking-app .rb-calendar-day.is-other-month { opacity:.55;color:#aeb5bf; }

/* Balanced Date & Time layout */
#rb-booking-app .rb-dt-layout,
#rb-booking-app .rb-booking-main .rb-dt-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px; }
#rb-booking-app .rb-calendar-day { font-family:var(--rb-body-font);font-size:min(var(--rb-body-size),16px);font-weight:400;line-height:1; }
#rb-booking-app .rb-calendar-day.is-unavailable { opacity:1;background:#f0f1f4;color:#a7adb5;border-color:#eef0f3; }
#rb-booking-app .rb-calendar-day.is-other-month { opacity:.55;background:#f3f4f6;color:#b3b8c0; }
#rb-booking-app .rb-time-panel .rb-slots-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px; }
#rb-booking-app .rb-time-panel .rb-slot { width:100%;min-width:0;max-width:none;font-size:min(var(--rb-button-size),14px);white-space:nowrap; }

/* Compact controls: prevent theme button rules and wide calendars from inflating UI. */
#rb-booking-app button {
    box-sizing:border-box;height:auto;min-height:34px;max-height:44px;padding:7px 12px!important;
    line-height:1.2!important;white-space:nowrap;
}
#rb-booking-app .rb-calendar-panel { padding:16px; }
#rb-booking-app .rb-calendar-toolbar { grid-template-columns:minmax(100px,1fr) minmax(80px,.72fr) auto;gap:8px;margin-bottom:14px;align-items:center; }
#rb-booking-app .rb-calendar-toolbar select { box-sizing:border-box;height:36px;min-height:36px;max-height:36px;padding:0 9px;font-size:min(var(--rb-label-size),14px); }
#rb-booking-app .rb-calendar-nav { gap:4px; }
#rb-booking-app .rb-calendar-nav button,
#rb-booking-app #rb-calendar-prev,
#rb-booking-app #rb-calendar-next {
    flex:0 0 36px;width:36px;min-width:36px;max-width:36px;height:36px;min-height:36px;max-height:36px;
    padding:0!important;display:inline-flex;align-items:center;justify-content:center;font-size:15px!important;border-radius:5px!important;
}
#rb-booking-app .rb-calendar-nav button:last-child { border-left:1px solid var(--rb-border); }
#rb-booking-app .rb-calendar-weekdays,
#rb-booking-app .rb-calendar-grid { gap:4px; }
#rb-booking-app .rb-calendar-weekdays { margin-bottom:5px; }
#rb-booking-app .rb-calendar-weekdays span { padding:4px 0;font-size:min(var(--rb-label-size),12px);font-weight:500; }
#rb-booking-app .rb-calendar-day {
    aspect-ratio:auto;width:100%;height:34px;min-height:34px;max-height:34px;padding:2px!important;
    overflow:hidden;text-align:center;box-shadow:none!important;transform:none!important;
}
#rb-booking-app .rb-time-panel .rb-slot { height:32px;min-height:32px;max-height:32px;padding:4px 6px!important; }
#rb-booking-app .rb-step-nav .rb-btn { width:auto;min-width:96px;min-height:38px;max-height:42px;padding:8px 14px!important; }
#rb-booking-app .rb-step-nav .rb-date-continue { width:auto;min-width:116px;flex:0 0 auto; }

@media (max-width:900px) and (min-width:681px) {
    #rb-booking-app .rb-dt-layout,
    #rb-booking-app .rb-booking-main .rb-dt-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px; }
    #rb-booking-app .rb-calendar-panel, #rb-booking-app .rb-time-panel { padding:14px 10px; }
    #rb-booking-app .rb-time-panel .rb-slots-grid { gap:5px; }
}

@media (max-width:680px) {
    #rb-booking-app .rb-booking-sidebar { display:block;padding:8px;overflow-x:auto;border-radius:5px 5px 0 0; }
    #rb-booking-app .rb-sidebar-brand, #rb-booking-app .rb-sidebar-secure { display:none; }
    #rb-booking-app .rb-sidebar-steps { display:flex;gap:5px;min-width:max-content; }
    #rb-booking-app .rb-sidebar-step { display:flex;align-items:center;gap:6px;padding:6px 8px; }
    #rb-booking-app .rb-sidebar-step small { display:none; }
    #rb-booking-app .rb-sidebar-step strong { font-size:11px;font-weight:500; }
    #rb-booking-app .rb-sidebar-num { width:21px;height:21px; }
    #rb-booking-app .rb-dt-layout,
    #rb-booking-app .rb-booking-main .rb-dt-layout { grid-template-columns:minmax(0,1fr);gap:14px; }
    #rb-booking-app .rb-time-panel .rb-slots-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:5px; }
    #rb-booking-app .rb-time-panel .rb-slot { padding:5px 4px;font-size:min(var(--rb-button-size),12px); }
    #rb-booking-app .rb-calendar-day { height:31px;min-height:31px;max-height:31px; }
    #rb-booking-app .rb-calendar-panel { padding:12px 8px; }
}

/* The same restrained defaults apply to the plugin's other frontend shortcodes. */
.rb-services-wrap, .rb-my-bookings-wrap, .rb-cancel-wrap, .rb-upcoming-wrap, .rb-summary-card {
    font-family:var(--rb-body-font);font-size:var(--rb-body-size);font-weight:var(--rb-body-weight);
    line-height:var(--rb-body-line);letter-spacing:var(--rb-body-spacing);text-transform:none;font-style:normal;color:var(--rb-text);
}
.rb-services-wrap *, .rb-my-bookings-wrap *, .rb-cancel-wrap *, .rb-upcoming-wrap *, .rb-summary-card * { text-transform:none; }
.rb-services-wrap button, .rb-services-wrap img, .rb-services-wrap [class*="card"],
.rb-my-bookings-wrap button, .rb-my-bookings-wrap input, .rb-my-bookings-wrap [class*="box"], .rb-my-bookings-wrap [class*="card"],
.rb-cancel-wrap button, .rb-cancel-wrap input, .rb-cancel-wrap [class*="card"],
.rb-upcoming-wrap button, .rb-upcoming-wrap img, .rb-upcoming-wrap [class*="card"], .rb-upcoming-wrap [class*="box"],
.rb-summary-card, .rb-summary-card button, .rb-summary-card img { border-radius:5px!important; }
.rb-services-wrap [class*="tag"], .rb-services-wrap [class*="badge"],
.rb-my-bookings-wrap [class*="tag"], .rb-my-bookings-wrap [class*="badge"],
.rb-cancel-wrap [class*="tag"], .rb-cancel-wrap [class*="badge"],
.rb-upcoming-wrap [class*="tag"], .rb-upcoming-wrap [class*="badge"],
.rb-summary-card [class*="tag"], .rb-summary-card [class*="badge"] { border-radius:5px!important; }