/* Rapid Booking – patient widget.
   Inherits the theme's font so it sits naturally on myrapidcard.com; only color + structure are ours. */
.rb-scope {
	--rb-accent: #1d4d3f;
	--rb-ink: #1b2420;
	--rb-mute: #5b6862;
	--rb-line: #d6ded9;
	--rb-wash: #f1f5f2;
	--rb-paper: #fbfcfa;
	--rb-warn: #9a3a1c;
	--rb-radius: 8px;
	color: var(--rb-ink);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.rb-scope *, .rb-scope *::before, .rb-scope *::after { box-sizing: inherit; }
.rb-scope button, .rb-scope input, .rb-scope select, .rb-scope textarea { font: inherit; color: inherit; }
.rb-scope :focus-visible { outline: 3px solid color-mix(in srgb, var(--rb-accent) 45%, transparent); outline-offset: 2px; }

.rb-w { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; align-items: start; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) {
	.rb-w { grid-template-columns: 1fr; gap: 16px; }
	.rb-slip { order: -1; }
}

/* Step rail – a real sequence, so numbered */
.rb-rail { display: flex; gap: 4px; list-style: none; margin: 0 0 22px; padding: 0; counter-reset: none; }
.rb-rail li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--rb-line); color: var(--rb-mute); font-size: 14px; margin: 0; }
.rb-rail li.is-done { border-color: color-mix(in srgb, var(--rb-accent) 45%, #fff); }
.rb-rail li.is-current { border-color: var(--rb-accent); color: var(--rb-ink); font-weight: 600; }
.rb-rail-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; background: var(--rb-wash); flex: none; }
.rb-rail li.is-current .rb-rail-n { background: var(--rb-accent); color: #fff; }
@media (max-width: 520px) { .rb-rail-t { display: none; } .rb-rail li.is-current .rb-rail-t { display: inline; } }

.rb-panel:focus { outline: none; }
.rb-panel h2 { font-size: 1.45em; line-height: 1.2; margin: 0 0 8px; }
.rb-panel h2:focus { outline: none; }
.rb-panel h3 { font-size: 1.05em; margin: 0 0 10px; }
.rb-lead { color: var(--rb-mute); margin: 0 0 18px; max-width: 60ch; }
.rb-muted { color: var(--rb-mute); font-size: .92em; }
.rb-note { background: var(--rb-wash); padding: 12px 14px; border-radius: var(--rb-radius); margin: 0; }
.rb-alert { background: #fbeee8; color: var(--rb-warn); padding: 10px 14px; border-radius: var(--rb-radius); margin: 0 0 14px; }

/* Choices */
.rb-choices { display: grid; gap: 10px; }
.rb-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--rb-line); border-radius: var(--rb-radius); padding: 14px 16px; cursor: pointer; transition: border-color .15s; }
.rb-choice:hover { border-color: var(--rb-accent); }
.rb-choice-title { font-weight: 600; font-size: 1.05em; display: inline-flex; align-items: center; gap: 8px; }
.rb-choice-desc { color: var(--rb-mute); font-size: .93em; }
.rb-choice-meta { font-size: .88em; color: var(--rb-accent); }
.rb-choice--any { background: var(--rb-wash); }
.rb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dc, var(--rb-accent)); }

/* Date + time */
.rb-when { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; }
@media (max-width: 640px) { .rb-when { grid-template-columns: 1fr; } }
.rb-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rb-cal-nav { width: 36px; height: 36px; border: 1px solid var(--rb-line); border-radius: 50%; background: #fff; cursor: pointer; font-size: 18px; line-height: 1; }
.rb-cal-nav:disabled { opacity: .3; cursor: default; }
.rb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rb-cal-grid.is-loading { opacity: .5; }
.rb-cal-dow { text-align: center; font-size: 12px; color: var(--rb-mute); padding: 4px 0; }
.rb-day { aspect-ratio: 1; border: 0; background: none; border-radius: 6px; font-size: 14px; cursor: pointer; color: #a8b2ad; font-variant-numeric: tabular-nums; }
.rb-day:disabled { cursor: default; }
.rb-day.is-open { color: var(--rb-ink); background: var(--rb-wash); font-weight: 600; }
.rb-day.is-open:hover { background: color-mix(in srgb, var(--rb-accent) 15%, #fff); }
.rb-day.is-selected { background: var(--rb-accent) !important; color: #fff !important; }
.rb-times-label { font-size: 13px; color: var(--rb-mute); margin: 12px 0 6px; }
.rb-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.rb-time { border: 1px solid var(--rb-line); background: #fff; border-radius: 6px; padding: 9px 4px; cursor: pointer; font-variant-numeric: tabular-nums; }
.rb-time:hover { border-color: var(--rb-accent); color: var(--rb-accent); }

/* Details form */
.rb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.rb-f { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rb-f.is-half { grid-column: auto; }
@media (max-width: 520px) { .rb-f.is-half { grid-column: 1 / -1; } }
.rb-f > label, .rb-f legend { font-weight: 600; font-size: .95em; padding: 0; }
.rb-req { color: var(--rb-warn); }
.rb-f input:not([type=checkbox]):not([type=radio]), .rb-f select, .rb-f textarea { width: 100%; padding: 10px 12px; border: 1px solid #b9c5bf; border-radius: 6px; background: #fff; min-height: 44px; }
.rb-f input:focus, .rb-f select:focus, .rb-f textarea:focus { border-color: var(--rb-accent); outline: 2px solid color-mix(in srgb, var(--rb-accent) 30%, transparent); outline-offset: 0; }
.rb-help { font-size: .85em; color: var(--rb-mute); }
.rb-err { font-size: .88em; color: var(--rb-warn); min-height: 0; }
.rb-err:empty { display: none; }
.rb-f.has-error input, .rb-f.has-error select, .rb-f.has-error textarea { border-color: var(--rb-warn); }
.rb-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rb-opt { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rb-line); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.rb-opt:has(input:checked) { border-color: var(--rb-accent); background: var(--rb-wash); }
.rb-agree { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.rb-agree input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--rb-accent); }
.rb-opt input { accent-color: var(--rb-accent); }
.rb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }

.rb-btn, .rb-launch { display: inline-block; background: var(--rb-accent, #1d4d3f); color: #fff; border: 0; border-radius: 6px; padding: 13px 22px; font-weight: 600; cursor: pointer; text-decoration: none; }
.rb-btn:hover, .rb-launch:hover { filter: brightness(1.12); }
.rb-btn:disabled { opacity: .6; cursor: progress; }
.rb-btn--ghost { background: #fff; color: var(--rb-warn); border: 1px solid currentColor; }
.rb-link { background: none; border: 0; padding: 0; color: var(--rb-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: .92em; }

/* The visit slip — the widget's one signature piece: a paper stub that fills in as you choose. */
.rb-slip { position: sticky; top: 20px; background: var(--rb-paper); border: 1px solid var(--rb-line); border-radius: var(--rb-radius); padding: 18px 18px 14px; overflow: hidden; }
.rb-slip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rb-accent); }
.rb-slip-title { font-weight: 700; margin: 0 0 10px; font-size: 1.05em; }
.rb-slip dl { margin: 0; }
.rb-slip-row { padding: 9px 0; border-top: 1px dashed var(--rb-line); }
.rb-slip-row dt { font-size: 12px; color: var(--rb-mute); }
.rb-slip-row dd { margin: 2px 0 0; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; color: #9aa5a0; }
.rb-slip-row.is-set dd { color: var(--rb-ink); font-weight: 600; }
.rb-slip-row .rb-link { font-weight: 400; font-size: 13px; flex: none; }
.rb-slip-foot { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--rb-line); font-size: 12px; color: var(--rb-mute); }
.rb-w.is-done .rb-slip { border-color: var(--rb-accent); }

.rb-done-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--rb-accent); position: relative; margin-bottom: 14px; }
.rb-done-mark::after { content: ""; position: absolute; left: 16px; top: 10px; width: 10px; height: 19px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
	.rb-done-mark { animation: rb-pop .35s ease-out; }
	@keyframes rb-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* Popup */
.rb-dialog { width: min(1000px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 12px; padding: 34px 28px 28px; overflow: auto; background: #fff; }
.rb-dialog::backdrop { background: rgba(20, 30, 26, .55); }
.rb-dialog-close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--rb-mute); }
html.rb-locked { overflow: hidden; }
@media (max-width: 600px) { .rb-dialog { padding: 44px 16px 20px; width: 100vw; max-height: 100dvh; height: 100dvh; max-width: 100vw; border-radius: 0; margin: 0; } }

/* Iframe embed + self-service page */
.rb-embed-body { margin: 0; padding: 20px 16px; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.rb-manage { max-width: 520px; margin: 40px auto; }
.rb-manage-clinic { color: var(--rb-mute); margin: 0 0 6px; }
.rb-manage h1 { font-size: 1.8em; line-height: 1.2; margin: 0 0 20px; }
.rb-manage-dl { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 16px 0; border-top: 1px dashed var(--rb-line); border-bottom: 1px dashed var(--rb-line); margin: 0 0 20px; }
.rb-manage-dl dt { color: var(--rb-mute); }
.rb-manage-dl dd { margin: 0; }
.rb-manage-notice { background: var(--rb-wash); padding: 12px 14px; border-radius: var(--rb-radius); }
.rb-manage-help { color: var(--rb-mute); font-size: .92em; }
.rb-status { font-weight: 600; }
.rb-status--cancelled, .rb-status--rejected { color: var(--rb-warn); }
.rb-status--approved { color: var(--rb-accent); }

/* Provider filter on the date step */
.rb-pref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.rb-pref label { font-size: .92em; color: var(--rb-mute); }
.rb-pref select { padding: 8px 10px; border: 1px solid #b9c5bf; border-radius: 6px; background: #fff; min-height: 40px; }

/* Service cards with images */
.rb-choice--img { flex-direction: row; align-items: center; gap: 14px; }
.rb-choice-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.rb-choice-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Logo and confirmation step */
.rb-logo { display: block; max-height: 56px; width: auto; margin: 0 0 16px; }
.rb-review { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 16px; margin: 0 0 8px; padding: 14px 16px; background: var(--rb-wash); border-radius: var(--rb-radius); }
.rb-review dt { color: var(--rb-mute); font-size: .92em; }
.rb-review dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* =====================================================================
   Theme-proofing. Site themes (and page builders) style every <button>:
   no-wrap text, pink focus/hover fills, rounded pills. The service cards,
   times and days are buttons, so those rules leaked in — long descriptions
   stopped wrapping and pushed the cards under the sidebar. These selectors
   are deliberately more specific than theme button rules.
   ===================================================================== */
.rb-scope {
	--rb-line: #dcdfde;        /* light grey outlines */
	--rb-hover: #f3f4f4;       /* light grey hover */
	--rb-hover-line: #c4c8c6;  /* slightly darker grey hover outline */
	--rb-focus: #7a7f7d;       /* grey focus ring, 4.5:1 on white */
}
.rb-scope button,
.rb-scope .rb-choice,
.rb-scope .rb-time,
.rb-scope .rb-day,
.rb-scope .rb-cal-nav,
.rb-scope .rb-link,
.rb-scope .rb-dialog-close {
	white-space: normal;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	text-shadow: none;
	min-width: 0;
	font-family: inherit;
	line-height: 1.4;
}

/* Layout: the main column can shrink, and nothing inside it can force it wider. */
.rb-scope .rb-w { grid-template-columns: minmax(0, 1fr) 270px; }
.rb-scope .rb-main { min-width: 0; }
.rb-scope .rb-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rb-scope .rb-slip { position: sticky; float: none; width: auto; z-index: 1; }
@media (max-width: 760px) {
	.rb-scope .rb-w { grid-template-columns: minmax(0, 1fr); }
	.rb-scope .rb-slip { position: static; }
}

/* Service / doctor cards */
.rb-scope .rb-choice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	text-align: left;
	color: var(--rb-ink);
	background: #fff;
	border: 1px solid var(--rb-line);
	border-radius: var(--rb-radius);
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.rb-scope .rb-choice--img { flex-direction: row; align-items: center; }
.rb-scope .rb-choice:hover,
.rb-scope .rb-choice:focus,
.rb-scope .rb-choice:active {
	background: var(--rb-hover);
	border-color: var(--rb-hover-line);
	color: var(--rb-ink);
}
.rb-scope .rb-choice:focus { outline: none; }
.rb-scope .rb-choice:focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 2px; }
.rb-scope .rb-choice--any { background: #fafafa; }
.rb-scope .rb-choice-title,
.rb-scope .rb-choice-desc,
.rb-scope .rb-choice-meta { text-align: left; color: inherit; }
.rb-scope .rb-choice-desc { color: var(--rb-mute); }
.rb-scope .rb-choice-meta { color: var(--rb-mute); font-weight: 600; }

/* Times, days, month arrows */
.rb-scope .rb-time {
	background: #fff; color: var(--rb-ink);
	border: 1px solid var(--rb-line); border-radius: 6px; padding: 9px 4px; text-align: center;
}
.rb-scope .rb-time:hover, .rb-scope .rb-time:focus, .rb-scope .rb-time:active {
	background: var(--rb-hover); border-color: var(--rb-hover-line); color: var(--rb-ink);
}
.rb-scope .rb-day { background: none; border: 0; color: #a8b0ac; padding: 0; }
.rb-scope .rb-day.is-open { background: #A3C766; color: #1f2d17; font-weight: 600; }
.rb-scope .rb-day.is-open:hover, .rb-scope .rb-day.is-open:focus { background: #8fb64f; color: #1f2d17; }
.rb-scope .rb-day.is-selected, .rb-scope .rb-day.is-selected:hover, .rb-scope .rb-day.is-selected:focus { background: var(--rb-accent); color: #fff; }
.rb-scope .rb-cal-nav { background: #fff; color: var(--rb-ink); border: 1px solid var(--rb-line); padding: 0; }
.rb-scope .rb-cal-nav:hover:not(:disabled), .rb-scope .rb-cal-nav:focus { background: var(--rb-hover); border-color: var(--rb-hover-line); color: var(--rb-ink); }
.rb-scope .rb-time:focus-visible, .rb-scope .rb-day:focus-visible, .rb-scope .rb-cal-nav:focus-visible,
.rb-scope .rb-link:focus-visible, .rb-scope .rb-dialog-close:focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 2px; }

/* Radio/checkbox answer chips */
.rb-scope .rb-opt { border-color: var(--rb-line); background: #fff; }
.rb-scope .rb-opt:hover { background: var(--rb-hover); border-color: var(--rb-hover-line); }
.rb-scope .rb-opt:has(input:checked) { background: var(--rb-hover); border-color: var(--rb-focus); }

/* Text links (Change, Back, Pick a different time) */
.rb-scope .rb-link, .rb-scope .rb-link:hover, .rb-scope .rb-link:focus {
	background: none; border: 0; padding: 0; color: var(--rb-accent); text-decoration: underline;
}

/* Primary button keeps the brand color, whatever the theme does on hover/focus */
.rb-scope .rb-btn, .rb-scope .rb-btn:hover, .rb-scope .rb-btn:focus, .rb-scope .rb-btn:active {
	background: var(--rb-accent); color: #fff; border: 0; border-radius: 6px;
}
.rb-scope .rb-btn:hover { filter: brightness(1.12); }
.rb-scope .rb-btn:focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 2px; }

/* Popup close button */
.rb-scope .rb-dialog-close, .rb-scope .rb-dialog-close:hover, .rb-scope .rb-dialog-close:focus {
	background: #fff; color: var(--rb-mute); border: 1px solid var(--rb-line); border-radius: 6px;
	width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
}
.rb-scope .rb-dialog-close:hover { background: var(--rb-hover); border-color: var(--rb-hover-line); color: var(--rb-ink); }

/* Keep the close button clear of the sidebar */
.rb-dialog { padding-top: 56px; }
.rb-dialog .rb-dialog-close { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* Form inputs: grey outlines too */
.rb-scope .rb-f input:not([type=checkbox]):not([type=radio]), .rb-scope .rb-f select, .rb-scope .rb-f textarea, .rb-scope .rb-pref select { border-color: #c9cecb; }
.rb-scope .rb-f input:focus, .rb-scope .rb-f select:focus, .rb-scope .rb-f textarea:focus { border-color: var(--rb-focus); outline: 2px solid rgba(122, 127, 125, .35); outline-offset: 0; }

/* Persistent Back button */
.rb-scope .rb-back, .rb-scope .rb-back:hover, .rb-scope .rb-back:focus {
	display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px; padding: 6px 12px;
	background: #fff; color: var(--rb-ink); border: 1px solid var(--rb-line); border-radius: 6px;
	font-size: .92em; cursor: pointer; width: auto;
}
.rb-scope .rb-back:hover { background: var(--rb-hover); border-color: var(--rb-hover-line); }
.rb-scope .rb-back:focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 2px; }

.rb-scope [hidden] { display: none !important; }