/* CodingCafe Booking Form — booking-form.css */
/* ---- Steps modal (popup-after-service) ---- */
.ccbf-steps-modal {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
align-items: center;
justify-content: center;
}
.ccbf-steps-modal.is-open {
display: flex;
}
.ccbf-steps-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .55);
cursor: pointer;
}
.ccbf-steps-modal-dialog {
position: relative;
z-index: 1;
background: #fff;
border-radius: 16px;
width: min(680px, 96vw);
/* Always leave a gap above and below so the rounded dialog edges stay
visible; content scrolls inside the dialog instead. */
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
margin: 24px auto;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: 0 8px 40px rgba(0, 0, 0, .22);
padding: 0;
}
.ccbf-steps-modal-body {
padding: 0;
}
/* Strip the form's own border/shadow/padding when it lives inside the modal */
.ccbf-steps-modal-body .cc-booking-form {
border: none;
box-shadow: none;
border-radius: 0;
padding: 32px;
}
.ccbf-steps-modal-close {
position: absolute;
top: 12px;
right: 14px;
z-index: 31;
background: transparent;
border: none;
font-size: 26px;
line-height: 1;
color: #555;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: background .15s, color .15s;
}
.ccbf-steps-modal-close:hover {
background: #f0f0f0;
color: #111;
}
/* Popup-scoped loader (replaces full-page loader inside the modal) */
.ccbf-steps-modal-loader {
display: none;
position: absolute;
inset: 0;
z-index: 10;
background: rgba(255, 255, 255, .82);
border-radius: 16px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
pointer-events: all;
}
.ccbf-steps-modal-loader.is-active {
display: flex;
}
.ccbf-steps-modal-loader-text {
margin: 0;
font-size: 14px;
color: #444;
text-align: center;
}
/* Prevent body scroll while modal is open */
body.ccbf-modal-open {
overflow: hidden;
}
/* When the form is rendered inside an Elementor Pro popup, keep a gap above
and below it so the form's rounded edges never touch the popup edges. */
.elementor-popup-modal .cc-booking-form {
margin-top: 24px;
margin-bottom: 24px;
}
.cc-booking-form {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
font-family: inherit;
border: 1px solid #e0e8e8;
border-radius: 12px;
padding: 32px;
box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
box-sizing: border-box;
--ccbf-primary: #1a6563;
--ccbf-primary-dark: #14514f;
--ccbf-primary-soft: rgba(26, 101, 99, .15);
--ccbf-primary-tint: #e8f3f2;
--ccbf-secondary: #fcd406;
}
/* ---- Progress ---- */
/* ---- Progress stepper: numbered nodes joined by a connector line ---- */
.ccbf-progress {
display: flex;
align-items: flex-start;
justify-content: space-between;
/* Form padding above, --ccbf-progress-space to the divider below, then
the same again to the step content. */
margin-bottom: calc(2 * var(--ccbf-progress-space, 32px));
/* Pinned to the top of the scroll container (modal dialog or page) so
the visitor always sees where they are in the flow. */
position: sticky;
/* Pinned 20px below the scroll edge so the step circles don't touch the
top of the popup; the white ::before backing reaches 32px above and
covers that gap. */
top: calc(var(--ccbf-sticky-top, 0px) + var(--ccbf-sticky-gap, 20px));
z-index: 30;
}
/* White backing that spans the form's side padding so scrolled content never
shows around the stepper while it is stuck. Its bottom edge doubles as the
full-width divider under the steps. */
.ccbf-progress::before {
content: "";
position: absolute;
top: calc(-1 * var(--ccbf-progress-space, 32px));
bottom: calc(-1 * var(--ccbf-progress-space, 32px));
left: -32px;
right: -32px;
background: #fff;
border-bottom: 1px solid #eef2f2;
z-index: 0;
pointer-events: none;
}
.ccbf-steps-modal-body .cc-booking-form .ccbf-progress {
top: var(--ccbf-sticky-gap, 20px);
}
.ccbf-step-label {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
cursor: default;
min-width: 0;
}
/* Connector line between steps (excludes segment before first and after last) */
.ccbf-step-label:not(:last-child)::after {
content: "";
position: absolute;
top: 17px;
left: 50%;
right: -50%;
height: 2px;
background: #dce4e4;
z-index: 0;
}
/* Filled connector line for done steps */
.ccbf-step-label.done::after {
content: "";
position: absolute;
top: 17px;
left: 50%;
right: -50%;
height: 2px;
background: var(--ccbf-primary);
z-index: 0;
}
.ccbf-step-node {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid #dce4e4;
background: #fff;
color: #9eadac;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: background .2s, border-color .2s, color .2s;
}
.ccbf-step-text {
font-size: 11px;
font-weight: 600;
color: #9eadac;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px;
transition: color .2s;
}
/* Ripple animation for active step */
@keyframes ccbf-ripple {
0% {
box-shadow: 0 0 0 0 rgba(26, 101, 99, .45);
}
70% {
box-shadow: 0 0 0 10px rgba(26, 101, 99, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(26, 101, 99, 0);
}
}
/* Active step */
.ccbf-step-label.active .ccbf-step-node {
background: var(--ccbf-primary);
border-color: var(--ccbf-primary);
color: #fff;
animation: ccbf-ripple 1.5s ease-out infinite;
}
.ccbf-step-label.active .ccbf-step-text {
color: var(--ccbf-primary);
}
/* Done step */
.ccbf-step-label.done .ccbf-step-node {
background: var(--ccbf-primary);
border-color: var(--ccbf-primary);
color: #fff;
font-size: 0;
/* hide number */
}
.ccbf-step-label.done .ccbf-step-text {
color: var(--ccbf-primary);
}
/* Checkmark for done steps */
.ccbf-step-label.done .ccbf-step-node::before {
content: "✓";
font-size: 14px;
font-weight: 700;
}
.ccbf-step-label.ccbf-step-clickable {
cursor: pointer;
}
.ccbf-step-label.ccbf-step-clickable:hover .ccbf-step-node {
box-shadow: 0 0 0 4px rgba(26, 101, 99, .12);
}
@media (max-width: 600px) {
/* Phones: tighter white band around the step circles — 16px above and
below instead of 32px. The negative margin eats half the form's top
padding; the sticky gap matches so the backing still covers it. */
.cc-booking-form {
--ccbf-progress-space: 16px;
--ccbf-sticky-gap: 16px;
}
.ccbf-progress {
margin-top: -16px;
}
.ccbf-step-text {
display: none;
}
.ccbf-step-node {
width: 30px;
height: 30px;
font-size: 12px;
}
.ccbf-step-label:not(:last-child)::after,
.ccbf-step-label.done::after {
top: 14px;
}
}
.ccbf-step {
display: none;
position: relative;
width: 100%;
max-width: 1060px;
margin: 0 auto;
}
.ccbf-step.active {
display: block;
}
.ccbf-step h3 {
margin: 0 0 16px;
font-size: 20px;
}
.ccbf-step-spacer {
height: 0;
}
.ccbf-step-loader {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 2;
}
.ccbf-step.is-loading .ccbf-step-loader {
display: none;
}
.ccbf-step.ccbf-inline-loading {
min-height: 220px;
}
.ccbf-step.ccbf-inline-loading .ccbf-step-loader {
display: flex;
position: relative;
inset: auto;
min-height: 220px;
pointer-events: auto;
}
.ccbf-step.ccbf-inline-loading> :not(.ccbf-step-loader):not(.ccbf-step-spacer) {
display: none !important;
}
.ccbf-form-loader {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(7, 19, 19, .56);
backdrop-filter: blur(3px);
z-index: 50;
border-radius: inherit;
}
.ccbf-form-loader.is-active {
display: flex;
}
.ccbf-form-loader-card {
min-width: 240px;
max-width: 86vw;
background: #fff;
border: 1px solid #dbe8e7;
border-radius: 14px;
box-shadow: 0 14px 40px rgba(3, 20, 19, .22);
padding: 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.ccbf-form-loader .ccbf-step-spinner {
width: 54px;
height: 54px;
margin: 0;
}
.ccbf-form-loader-text {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #274242;
}
/* Spiral loader — three concentric arcs mimicking the logo swirl */
.ccbf-step-spinner {
width: 48px;
height: 48px;
position: relative;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--ccbf-primary);
border-right-color: rgba(26, 101, 99, .35);
box-sizing: border-box;
animation: ccbf-spiral 1.5s linear infinite;
flex-shrink: 0;
}
.ccbf-step-spinner::before {
content: '';
position: absolute;
inset: 7px;
border-radius: 50%;
border: 3px solid transparent;
border-right-color: var(--ccbf-primary);
border-bottom-color: rgba(26, 101, 99, .35);
box-sizing: border-box;
}
.ccbf-step-spinner::after {
content: '';
position: absolute;
inset: 14px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: var(--ccbf-primary);
border-left-color: rgba(26, 101, 99, .35);
box-sizing: border-box;
}
@keyframes ccbf-spiral {
to {
transform: rotate(360deg);
}
}
/* ---- Staff cards ---- */
.ccbf-staff-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
/* Booking form practitioner step: toolbar + active filters pinned under the
sticky step tracker. The tracker's white backing reaches 32px below it, so
this starts there. Negative side margins + matching padding let the white
background span the form's 32px padding, hiding cards scrolling beneath.
--ccbf-step-bleed (set in staff.js) is the gap between the 1060px-capped
step and the form's content edge, so on a wide form the backing still
reaches the form edges and joins the tracker's instead of floating. */
.ccbf-staff-sticky {
position: sticky;
top: calc(var(--ccbf-sticky-top, 0px) + var(--ccbf-sticky-gap, 20px) + var(--ccbf-progress-h, 0px) + var(--ccbf-progress-space, 32px));
z-index: 25;
margin: calc(-1 * var(--ccbf-progress-space, 32px)) calc(-32px - var(--ccbf-step-bleed, 0px)) 18px;
padding: var(--ccbf-progress-space, 32px) calc(32px + var(--ccbf-step-bleed, 0px)) 12px;
background: #fff;
border-bottom: 1px solid #eef2f2;
}
.ccbf-steps-modal-body .cc-booking-form .ccbf-staff-sticky {
top: calc(var(--ccbf-sticky-gap, 20px) + var(--ccbf-progress-h, 0px) + var(--ccbf-progress-space, 32px));
}
.ccbf-staff-sticky .ccbf-staff-toolbar {
margin-bottom: 0;
}
/* Toolbar hidden while the list loads or errors: collapse the pinned block. */
.ccbf-staff-sticky:has(> .ccbf-staff-toolbar[style*="display: none"]) {
display: none;
}
.ccbf-staff-sticky .ccbf-staff-active-filters {
margin-bottom: 0;
}
/* Full-width hint line above the search / sort / filter controls. */
.ccbf-staff-hint {
flex: 0 0 100%;
margin: 0 0 4px;
font-size: 14px;
font-weight: 400;
color: #4a5553;
}
.ccbf-staff-toolbar-left,
.ccbf-staff-toolbar-right {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.ccbf-staff-toolbar-left {
flex: 1 1 auto;
/* Search sits against the left edge; only the right-hand group is end-aligned. */
justify-content: flex-start;
}
.ccbf-staff-prev-booked-toggle {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border: 1px solid var(--ccbf-primary);
border-radius: 999px;
background: #fff;
color: var(--ccbf-primary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
/* Directory preference pill (shortcode preference="yes"): sits just left of
the search box and opens the timezone / day / time-of-day panel. */
.ccbf-staff-toolbar-left:has(.ccbf-staff-pref) {
/* The label is long: let this side shrink so the pill wraps its parts
instead of pushing the toolbar wider than the page. */
min-width: 0;
}
/* Beside the pill the search box shares the row instead of claiming 100%. */
.ccbf-staff-toolbar-left:has(.ccbf-staff-pref) .ccbf-staff-search-wrap {
flex: 1 1 200px;
width: auto;
}
.ccbf-staff-pref {
position: relative;
flex: 0 1 auto;
display: inline-flex;
min-width: 0;
}
.ccbf-staff-pref-pill {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
/* Same size and radius as the search box and sort dropdown beside it,
but brand yellow, not the primary fill: that one already means
"toggle on" for Previously Booked. min-height, not height: the three
parts wrap to a second line when narrow. */
min-height: 34px;
box-sizing: border-box;
padding: 6px 10px;
border: 1px solid var(--ccbf-secondary);
border-radius: 6px;
background: var(--ccbf-secondary);
color: var(--ccbf-primary-dark);
font-size: 13px;
font-weight: 600;
line-height: 20px;
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ccbf-staff-pref-pill:hover,
.ccbf-staff-pref-pill:focus {
/* Beat the theme's button hover/focus colours. */
background: var(--ccbf-secondary) !important;
color: var(--ccbf-primary-dark) !important;
}
.ccbf-staff-pref-pill:hover {
border-color: var(--ccbf-primary-dark);
}
.ccbf-staff-pref-pill:focus-visible,
.ccbf-staff-pref.is-open .ccbf-staff-pref-pill {
outline: none;
border-color: #1a6563;
box-shadow: 0 0 0 3px rgba(26, 101, 99, .13);
}
.ccbf-staff-pref-label {
display: inline-flex;
flex-wrap: wrap;
gap: 2px 12px;
min-width: 0;
text-align: left;
}
.ccbf-staff-pref-part {
white-space: nowrap;
}
.ccbf-staff-pref-key {
font-weight: 400;
}
.ccbf-staff-pref-pill .dashicons {
flex: 0 0 auto;
width: 14px;
height: 14px;
font-size: 14px;
line-height: 1;
}
.ccbf-staff-pref-panel {
display: none;
position: absolute;
z-index: 60;
top: calc(100% + 6px);
left: 0;
width: 360px;
max-width: calc(100vw - 32px);
/* max-height is set on open from the room below the pill (openPanel).
No overscroll-behavior here: with it the wheel did nothing over a panel
that had no overflow of its own, so the page could not be scrolled to
reach the panel's lower half. */
max-height: 80vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 14px;
box-sizing: border-box;
background: #fff;
border: 1px solid #dfe8e8;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
text-align: left;
white-space: normal;
}
.ccbf-staff-pref.is-open .ccbf-staff-pref-panel {
display: block;
}
.ccbf-staff-pref-row + .ccbf-staff-pref-row {
margin-top: 14px;
}
.ccbf-staff-pref-title {
display: block;
margin: 0 0 6px;
font-size: 13px;
font-weight: 700;
color: #24302f;
}
.ccbf-staff-pref-panel .ccbf-tz-combo,
.ccbf-staff-pref-panel .ccbf-tz-combo-input {
width: 100%;
max-width: none;
}
.ccbf-staff-pref-panel .ccbf-tz-combo-input {
/* 16px stops iOS zooming the page on focus. */
font-size: 16px;
}
.ccbf-staff-pref-panel .ccbf-tz-combo-list {
max-height: 220px;
}
.ccbf-staff-pref-panel .ccbf-tz-combo-item.is-active {
background: #f1f6f6;
}
.ccbf-staff-pref-opts {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ccbf-staff-pref-opts--grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ccbf-staff-pref-opt {
flex: 1 1 auto;
padding: 7px 10px;
border: 1px solid #dfe8e8;
border-radius: 8px;
background: #fff;
color: #24302f;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ccbf-staff-pref-opt:hover,
.ccbf-staff-pref-opt:focus {
background: var(--ccbf-primary-tint) !important;
border-color: var(--ccbf-primary);
color: var(--ccbf-primary) !important;
}
.ccbf-staff-pref-opt.selected,
.ccbf-staff-pref-opt.selected:hover,
.ccbf-staff-pref-opt.selected:focus {
background: var(--ccbf-primary-tint) !important;
border-color: var(--ccbf-primary);
box-shadow: inset 0 0 0 1px var(--ccbf-primary);
color: var(--ccbf-primary) !important;
}
.ccbf-staff-pref-cal {
margin-top: 10px;
}
/* Tighter than the booking form's full-width calendar. */
.ccbf-staff-pref-cal .ccbf-calendar-nav {
margin-bottom: 8px;
}
.ccbf-staff-pref-cal .ccbf-calendar-nav button {
padding: 2px 6px;
line-height: 1;
}
.ccbf-staff-pref-cal .ccbf-month-label {
font-size: 14px;
}
.ccbf-staff-pref-cal .ccbf-calendar-grid {
gap: 2px;
padding: 6px;
}
.ccbf-staff-pref-cal .ccbf-day {
padding: 6px 2px;
font-size: 13px;
}
.ccbf-staff-pref-cal .ccbf-day.available:focus-visible {
outline: 2px solid var(--ccbf-primary);
outline-offset: 1px;
}
.ccbf-staff-pref-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #eef3f3;
}
.ccbf-staff-pref-reset {
padding: 0;
border: 0;
background: none !important;
color: var(--ccbf-primary) !important;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.ccbf-staff-pref-done {
padding: 7px 16px;
border: 0;
border-radius: 8px;
background: var(--ccbf-primary) !important;
color: #fff !important;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.ccbf-staff-pref-done:hover,
.ccbf-staff-pref-done:focus {
background: var(--ccbf-primary-dark) !important;
}
.ccbf-staff-pref-error {
width: 100%;
box-sizing: border-box;
margin: 0 0 12px;
padding: 8px 12px;
border-radius: 8px;
background: #fff6e0;
color: #6b4e00;
font-size: 13px;
}
.ccbf-staff-prev-booked-toggle[aria-pressed="true"],
.ccbf-staff-prev-booked-toggle:focus {
background: var(--ccbf-primary) !important;
color: #fff;
border-color: var(--ccbf-primary);
}
.ccbf-service-labels,
.ccbf-service-sublabels {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.ccbf-step[data-step="service"] .ccbf-service-labels,
.ccbf-step[data-step="service"] .ccbf-service-sublabels {
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
align-items: center;
justify-content: center;
gap: 16px 18px;
margin-bottom: 32px;
}
/* Bottom margin leaves room for the hover tooltip that opens above the first
row of options, so it never runs into the step header. */
.ccbf-service-section-heading {
margin: 6px 0 36px;
text-align: center;
font-size: 15px;
font-weight: 700;
color: #274242;
}
/* Structured session-option contents (name + duration/price meta line).
The radio indicator is hidden by default and only revealed where the option
list is styled as radio cards (e.g. the profile sidebar). */
.ccbf-service-main {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 0;
}
.ccbf-service-name {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.ccbf-service-meta {
font-size: 12px;
font-weight: 500;
color: #6b8079;
letter-spacing: .01em;
}
.ccbf-service-radio {
display: none;
}
.ccbf-service-info {
display: none;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #c2d2cd;
color: #6b8079;
font-size: 11px;
font-style: italic;
font-family: Georgia, 'Times New Roman', serif;
line-height: 1;
flex-shrink: 0;
}
.ccbf-step[data-step="service"] .ccbf-service-pill,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn {
text-align: center;
}
.ccbf-step[data-step="service"] .ccbf-service-pill,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn,
.ccbf-step[data-step="service"] .ccbf-service-variation .ccbf-staff-name {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.ccbf-step[data-step="service"] .ccbf-service-pill,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn,
.ccbf-step[data-step="service"] .ccbf-service-variation {
position: relative;
overflow: hidden;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn {
overflow: visible;
}
.ccbf-service-tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 12px);
transform: translateX(-50%) translateY(8px) scale(.96);
transform-origin: bottom center;
/* max-content so the box grows wide rather than tall; a tall tooltip
runs into the step header above the options. */
width: max-content;
min-width: 180px;
/* Narrow enough that a tooltip on an edge option stays inside the modal. */
max-width: min(230px, 82vw);
padding: 10px 12px;
border-radius: 10px;
background: #fdf5dd;
color: #173b3a;
font-size: 12px;
line-height: 1.45;
text-align: left;
box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
z-index: 25;
}
.ccbf-service-tooltip::after {
content: "";
position: absolute;
top: 95%;
left: 50%;
width: 15px;
height: 15px;
background: #fdf5dd;
transform: translateX(-50%) rotate(45deg);
}
.ccbf-service-tooltip strong,
.ccbf-service-tooltip b {
color: #173b3a;
font-weight: 700;
}
.ccbf-service-tooltip a {
color: #006566;
text-decoration: underline;
}
.ccbf-service-sublabel-btn:hover .ccbf-service-tooltip,
.ccbf-service-sublabel-btn:focus-visible .ccbf-service-tooltip,
.ccbf-service-sublabel-btn:focus-within .ccbf-service-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
}
.ccbf-step[data-step="service"] .ccbf-ui-icon {
line-height: 1;
/* Was .24 — icons were effectively invisible. Keep them clearly visible
next to each service type. */
opacity: .85;
color: #2c7a7b;
transform: scale(1.08);
transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.ccbf-step[data-step="service"] .ccbf-service-pill:hover .ccbf-ui-icon,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:hover .ccbf-ui-icon,
.ccbf-step[data-step="service"] .ccbf-service-variation:hover .ccbf-ui-icon {
opacity: 1;
transform: scale(1.12);
}
.ccbf-service-pill,
.ccbf-service-sublabel-btn {
appearance: none;
/* Visible outline so an unselected option reads as a button to click,
not as a static label. */
border: 1px solid #d6dbdb;
background: #f2f4f4;
color: #3a3a3a;
border-radius: 10px;
padding: 10px 12px 10px;
font-size: 15px;
line-height: 1.2;
font-weight: 500;
width: auto;
max-width: 100%;
justify-content: flex-start;
text-align: left;
cursor: pointer;
box-shadow: none;
transition: box-shadow .2s, transform .2s, background .2s, color .2s;
}
.ccbf-service-pill:hover,
.ccbf-service-sublabel-btn:hover {
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
transform: translateY(-1px);
}
.ccbf-service-pill.is-selected,
.ccbf-service-sublabel-btn.is-selected {
border-color: var(--ccbf-primary);
background: var(--ccbf-primary);
color: #fff;
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
}
.ccbf-service-pill.is-selected .ccbf-ui-icon,
.ccbf-service-sublabel-btn.is-selected .ccbf-ui-icon,
.ccbf-step[data-step="service"] .ccbf-service-variation.selected .ccbf-ui-icon {
opacity: .42;
}
.ccbf-service-variations {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 12px;
}
.ccbf-step[data-step="service"] .ccbf-service-variations {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.ccbf-step[data-step="service"] .ccbf-service-variation {
width: auto;
max-width: 100%;
align-items: center;
text-align: center;
}
.ccbf-staff-toolbar-right {
flex: 0 0 auto;
}
.ccbf-staff-filter-toggle {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 10px;
border: 1px solid #FCD406;
border-radius: 6px;
background: #FCD406;
color: #1a6563;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.ccbf-staff-filter-toggle::before {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 7px;
height: 7px;
border-radius: 999px;
background: #ef4444;
box-shadow: 0 0 0 0 rgba(239, 68, 68, .48);
transform: scale(1);
opacity: 1;
pointer-events: none;
z-index: 2;
}
.ccbf-staff-filter-toggle.has-active-filters::before {
animation: ccbf-filter-toggle-dot-pulse 1.8s ease-out infinite;
}
.ccbf-staff-filter-toggle::after {
content: '';
position: absolute;
left: var(--ccbf-ripple-x, 50%);
top: var(--ccbf-ripple-y, 50%);
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(26, 101, 99, .26);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
z-index: 0;
}
.ccbf-staff-filter-toggle.is-rippling::after {
animation: ccbf-filter-ripple .55s ease-out;
}
.ccbf-staff-filter-toggle .ccbf-ui-icon,
.ccbf-staff-filter-toggle .ccbf-staff-filter-toggle-text,
.ccbf-staff-filter-toggle .ccbf-staff-filter-count {
position: relative;
z-index: 1;
}
.ccbf-staff-filter-toggle .ccbf-ui-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.ccbf-staff-filter-count {
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--ccbf-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
line-height: 1;
}
.ccbf-staff-filter-toggle.has-active-filters .ccbf-staff-filter-count {
animation: ccbf-filter-dot-ripple 1.6s ease-out infinite;
}
@keyframes ccbf-filter-ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: .45;
}
100% {
transform: translate(-50%, -50%) scale(18);
opacity: 0;
}
}
@keyframes ccbf-filter-dot-ripple {
0%,
100% {
box-shadow: 0 0 0 0 rgba(26, 101, 99, .42);
}
70% {
box-shadow: 0 0 0 9px rgba(26, 101, 99, 0);
}
}
@keyframes ccbf-filter-toggle-dot-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, .5);
transform: scale(1);
}
70% {
box-shadow: 0 0 0 9px rgba(239, 68, 68, 0);
transform: scale(1.08);
}
}
.ccbf-staff-filter-overlay {
position: fixed;
inset: 0;
/* Light tint: the form usually sits in a popup that already darkens the
page, so a heavy overlay on top made the cards hard to see. */
background: rgba(15, 23, 42, .15);
z-index: 100100;
/* Visual only: wheel/touch scrolling passes through to the practitioner
list so visitors can browse results with the filters open. Clicks
outside the drawer still close it (document handler in staff.js). */
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease;
}
.ccbf-staff-filter-overlay.is-open {
opacity: 1;
visibility: visible;
}
.ccbf-staff-filter-drawer {
/* The drawer is moved to (outside .cc-booking-form), so redeclare the
theme variables here or var(--ccbf-primary) buttons render unstyled/white. */
--ccbf-primary: #1a6563;
--ccbf-primary-dark: #14514f;
--ccbf-primary-soft: rgba(26, 101, 99, .15);
--ccbf-primary-tint: #e8f3f2;
--ccbf-secondary: #fcd406;
/* Floating card with the same 24px top/bottom gap and rounded corners as
the steps modal. Inside a popup, staff.js lines it up with the dialog. */
position: fixed;
top: 24px;
right: 24px;
width: min(420px, 92vw);
height: calc(100vh - 48px);
height: calc(100dvh - 48px);
background: #fff;
z-index: 100101;
border-radius: 16px;
overflow: hidden;
transform: translateX(calc(100% + 48px));
transition: transform .24s ease;
box-shadow: 0 8px 40px rgba(0, 0, 0, .22);
display: flex;
flex-direction: column;
}
.ccbf-staff-filter-drawer.is-open {
transform: translateX(0);
}
/* Logged-in users: keep the drawer below the WP admin bar, otherwise the bar
sits on top of the "Filter Practitioners" header. */
body.admin-bar .ccbf-staff-filter-drawer:not(.is-docked) {
top: 56px;
height: calc(100vh - 80px);
height: calc(100dvh - 80px);
}
body.admin-bar .ccbf-staff-filter-drawer.is-docked {
top: 52px;
max-height: calc(100vh - 72px);
}
@media screen and (max-width: 782px) {
body.admin-bar .ccbf-staff-filter-drawer:not(.is-docked) {
top: 70px;
height: calc(100vh - 94px);
height: calc(100dvh - 94px);
}
}
/* Phones: the drawer takes the whole screen, so no floating gaps. */
@media (max-width: 640px) {
.ccbf-staff-filter-drawer:not(.is-docked) {
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
border-radius: 0;
}
body.admin-bar .ccbf-staff-filter-drawer:not(.is-docked) {
top: 46px;
height: calc(100vh - 46px);
height: calc(100dvh - 46px);
}
}
/* ---- Docked filter panel (desktop practitioner directory) ----------------
Above 1025px the drawer is moved back inside the listing and sits beside the
cards as a permanent second column, so it never covers the results. */
.ccbf-staff-split {
display: flex;
align-items: flex-start;
gap: 24px;
}
.ccbf-staff-split > .ccbf-staff-list {
flex: 1 1 auto;
min-width: 0;
}
.ccbf-staff-filter-drawer.is-docked {
position: sticky;
top: 20px;
right: auto;
flex: 0 0 320px;
width: 320px;
height: auto;
max-height: calc(100vh - 40px);
z-index: 1;
transform: none;
transition: none;
border: 1px solid #e6efee;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(23, 59, 58, .06);
overflow: hidden;
}
/* The docked panel is always visible, so its open/close affordances go away
and Reset gets the full action row. */
.ccbf-staff-filter-drawer.is-docked .ccbf-staff-filter-close,
.ccbf-staff-filter-drawer.is-docked .ccbf-staff-filter-apply,
.ccbf-filters-docked .ccbf-staff-filter-toggle {
display: none;
}
.ccbf-staff-filter-drawer.is-docked .ccbf-staff-filter-actions {
grid-template-columns: 1fr;
}
.ccbf-staff-filter-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 18px;
border-bottom: 1px solid #e6efee;
}
.ccbf-staff-filter-title {
margin: 0;
font-size: 18px;
color: #173b3a;
}
.ccbf-staff-filter-close {
border: none;
background: transparent;
font-size: 28px;
line-height: 1;
color: #40605f;
cursor: pointer;
}
.ccbf-staff-filter-body {
flex: 1;
overflow: auto;
padding: 9px 18px;
display: flex;
flex-direction: column;
gap: 3px;
}
.ccbf-staff-filter-group {
display: flex;
flex-direction: column;
gap: 3px;
}
.ccbf-staff-filter-label {
font-size: 12px;
font-weight: 700;
color: #38504f;
}
.ccbf-staff-filter-group select,
.ccbf-filter-price-row input {
width: 100%;
height: 31px;
border: 1px solid #d6e2e1;
border-radius: 7px;
padding: 0 10px;
font-size: 13px;
color: #2f3c3b;
background: #fff;
box-sizing: border-box;
}
.ccbf-filter-price-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 0;
}
/* Multi-select filter dropdowns (checkbox panels) */
.ccbf-msel {
position: relative;
}
.ccbf-msel-toggle {
width: 100%;
height: 31px;
border: 1px solid #d6e2e1;
border-radius: 7px;
padding: 0 28px 0 10px;
font-size: 13px;
color: #2f3c3b;
background: #fff;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
.ccbf-msel.has-value .ccbf-msel-toggle {
border-color: var(--ccbf-primary, #1a6563);
color: var(--ccbf-primary, #1a6563);
font-weight: 600;
}
.ccbf-msel-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ccbf-msel-caret::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
width: 6px;
height: 6px;
margin-top: -5px;
border-right: 2px solid #40605f;
border-bottom: 2px solid #40605f;
transform: rotate(45deg);
}
.ccbf-msel.is-open .ccbf-msel-caret::after {
margin-top: -1px;
transform: rotate(-135deg);
}
.ccbf-msel-panel {
display: none;
font-family: inherit;
font-size: 13px;
line-height: 1.4;
font-weight: 400;
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
background: #fff;
border: 1px solid #d6e2e1;
border-radius: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
max-height: 210px;
overflow: auto;
z-index: 6;
padding: 6px;
}
.ccbf-msel.is-open .ccbf-msel-panel {
display: block;
}
.ccbf-msel-option {
display: flex;
/* Options can wrap to two lines, so the box aligns to the first line
rather than the centre of the whole label. */
align-items: flex-start;
gap: 10px;
padding: 6px 8px;
margin: 0;
/* Theme/Elementor label rules win over an unqualified font-size here, so
the option text is pinned explicitly (span included). */
font-family: inherit;
font-size: 13px !important;
line-height: 1.4;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: #2f3c3b;
border-radius: 5px;
cursor: pointer;
}
.ccbf-msel-option span {
flex: 1 1 auto;
min-width: 0;
font-family: inherit;
font-size: 13px !important;
line-height: 1.4;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: inherit;
}
.ccbf-msel-option:hover {
background: #f0f6f5;
}
.ccbf-msel-option input[type="checkbox"] {
flex: 0 0 14px;
width: 14px;
height: 14px;
min-width: 14px;
min-height: 14px;
max-width: 14px;
/* Nudge down so the box sits on the cap height of the first text line. */
margin: 3px 6px 0 0;
padding: 0;
position: static;
float: none;
vertical-align: top;
-webkit-appearance: checkbox;
appearance: checkbox;
accent-color: var(--ccbf-primary, #1a6563);
}
.ccbf-msel-empty {
padding: 5px 6px;
font-family: inherit;
font-size: 12px !important;
line-height: 1.4;
color: #6d8281;
}
.ccbf-staff-filter-inline {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 10px;
font-size: 13px !important;
margin-top: 14px;
}
/* The 14px above separates the first checkbox from the price row; consecutive
checkboxes belong together and only need the body's own gap. */
.ccbf-staff-filter-inline + .ccbf-staff-filter-inline {
margin-top: 2px;
}
.ccbf-staff-filter-inline input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
}
.ccbf-staff-filter-actions {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-top: 1px solid #e6efee;
}
.ccbf-staff-filter-reset,
.ccbf-staff-filter-apply {
display: flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 0 10px;
line-height: 1;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.ccbf-staff-filter-reset {
border: 1px solid #d6e2e1;
background: #fff;
color: #38504f;
}
.ccbf-staff-filter-apply {
border: 1px solid var(--ccbf-primary);
background: var(--ccbf-primary);
color: #fff;
}
/* Search field: icon on the left, clear button on the right when non-empty. */
.ccbf-staff-search-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 360px;
}
.ccbf-staff-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
width: 16px;
height: 16px;
color: #8ba3a1;
pointer-events: none;
transition: color .15s ease;
}
.ccbf-staff-search-wrap:focus-within .ccbf-staff-search-icon {
color: #1a6563;
}
.ccbf-staff-search {
width: 100%;
max-width: 360px !important;
font-size: 13px;
padding: 6px 10px;
border: 1px solid #d6e2e1;
border-radius: 6px !important;
background: #fff;
color: #2f3c3b;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ccbf-staff-search::placeholder {
color: #9aacab;
}
.ccbf-staff-search:hover {
border-color: #b9cecc;
}
.ccbf-staff-search:focus,
.ccbf-staff-search:focus-visible {
outline: none;
border-color: #1a6563;
box-shadow: 0 0 0 3px rgba(26, 101, 99, .13);
}
/* Hide the browser's native search affordances so ours is the only one. */
.ccbf-staff-search::-webkit-search-decoration,
.ccbf-staff-search::-webkit-search-cancel-button,
.ccbf-staff-search::-webkit-search-results-button {
-webkit-appearance: none;
appearance: none;
}
.ccbf-staff-search-wrap .ccbf-staff-search {
padding-left: 36px;
padding-right: 34px;
}
.ccbf-staff-search-clear {
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0 0 2px;
border: 0;
border-radius: 999px;
background: rgba(26, 101, 99, .12);
color: #1a6563;
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.ccbf-staff-search-wrap.has-value .ccbf-staff-search-clear {
display: inline-flex;
}
.ccbf-staff-search-clear:hover,
.ccbf-staff-search-clear:focus-visible {
background: #1a6563;
color: #fff;
}
.ccbf-staff-sort-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.ccbf-staff-sort-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
width: 15px;
height: 15px;
color: #5a6665;
pointer-events: none;
}
.ccbf-staff-sort {
font-size: 13px;
padding: 6px 32px 6px 10px;
border: 1px solid #d6e2e1;
border-radius: 6px;
background: #fff;
color: #2f3c3b;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.ccbf-staff-sort::-ms-expand {
display: none;
}
.ccbf-staff-search,
.ccbf-staff-sort {
height: 34px;
line-height: 20px;
box-sizing: border-box;
}
@media (max-width: 640px) {
.ccbf-staff-toolbar {
flex-direction: column;
align-items: stretch;
}
.ccbf-staff-toolbar-left,
.ccbf-staff-toolbar-right {
width: 100%;
}
.ccbf-staff-search,
.ccbf-staff-search-wrap,
.ccbf-staff-sort-wrap,
.ccbf-staff-sort {
width: 100%;
max-width: none;
}
.ccbf-staff-pref,
.ccbf-staff-pref-pill {
width: 100%;
}
.ccbf-staff-pref-pill {
justify-content: space-between;
}
.ccbf-staff-toolbar-left:has(.ccbf-staff-pref) .ccbf-staff-search-wrap {
flex-basis: 100%;
}
.ccbf-staff-search {
max-width: none !important;
}
.ccbf-staff-filter-toggle {
justify-content: center;
}
.ccbf-staff-filter-drawer {
width: 100vw;
}
}
.ccbf-staff-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px 3.5%;
align-items: stretch;
}
.ccbf-step[data-step="staff"] .ccbf-staff-card {
width: 31%;
flex: 0 0 31%;
}
.ccbf-step[data-step="staff"] .ccbf-staff-list {
justify-content: flex-start;
}
/* Booking flow (not the standalone directory): columns follow the width of
the practitioner step itself, not the screen — the form often sits in a
popup far narrower than the viewport. 4 across when there is room, 3 on
mid widths, 2 on phones. Gaps are 1.5cqi (≈12px at desktop) both ways; a
percentage row gap would resolve against height, hence cqi. */
.cc-booking-form:not(.cc-practitioners) .ccbf-step[data-step="staff"] {
container-type: inline-size;
}
.cc-booking-form:not(.cc-practitioners) .ccbf-step[data-step="staff"] .ccbf-staff-list,
.cc-booking-form:not(.cc-practitioners) .ccbf-step[data-step="staff"] .ccbf-staff-otherdays-list {
justify-content: flex-start;
gap: max(10px, 1.5cqi);
}
.cc-booking-form:not(.cc-practitioners) .ccbf-step[data-step="staff"] .ccbf-staff-card {
--ccbf-cols: 4;
width: calc((100% - (var(--ccbf-cols) - 1) * max(10px, 1.5cqi)) / var(--ccbf-cols));
flex: 0 0 calc((100% - (var(--ccbf-cols) - 1) * max(10px, 1.5cqi)) / var(--ccbf-cols));
min-width: 0;
}
@container (max-width: 759px) {
.cc-booking-form:not(.cc-practitioners) .ccbf-step[data-step="staff"] .ccbf-staff-card {
--ccbf-cols: 3;
}
}
/* Photo size shrinks (via --ccbf-card-img, set by fitStaffCardsToView in
staff.js) so two full rows of cards fit under the pinned header. */
@container (min-width: 520px) {
.cc-booking-form:not(.cc-practitioners) .ccbf-step[data-step="staff"] .ccbf-staff-list > .ccbf-staff-card > img {
max-width: var(--ccbf-card-img, none);
max-height: var(--ccbf-card-img, none);
}
}
@container (max-width: 519px) {
/* Phones: one horizontal card per row — photo floated left, details in
normal flow beside it, "Next slot" cleared underneath at full width.
(A grid with the photo spanning the detail rows left empty space.) */
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card {
--ccbf-cols: 1;
display: flow-root;
text-align: left;
height: auto;
min-height: 0;
padding: 12px 14px;
}
/* The booking-flow column rules above (4 / 3 across) carry the extra
:not(.cc-practitioners) specificity, so the plain --ccbf-cols: 1 in the
rule before this loses to them and the horizontal cards stay a third
wide. Restate it at matching specificity. */
.cc-booking-form:not(.cc-practitioners) .ccbf-step[data-step="staff"] .ccbf-staff-card {
--ccbf-cols: 1;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card > * {
margin-left: 86px; /* photo 72px + 14px gap */
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card > img,
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card > .ccbf-staff-avatar-placeholder {
float: left;
width: 72px;
height: 72px;
margin: 0;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-rating,
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-profession,
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-price {
margin-top: 3px;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-recent-badge,
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-discount-badge {
display: table; /* own line, but only as wide as its text */
margin-top: 4px;
}
/* Next-slot pill: under the photo and details, across the whole card. */
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card > .ccbf-staff-next {
clear: both;
display: flex;
margin: 10px 0 0;
width: 100%;
justify-content: center;
text-align: center;
}
/* Name, rating + session count, and role each stay on one full line. */
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-name,
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-rating,
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-profession {
display: block;
width: auto; /* fill the space beside the photo, not 100% + its margin */
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-name {
display: block;
font-size: 15px;
}
/* Stars + average on one line, session count on the next. */
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-rating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 6px;
white-space: normal;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-rating-meta {
display: contents;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-rating-reviews {
flex: 0 0 100%;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-rating-meta,
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-rating-average,
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-rating-reviews {
font-size: 12px;
white-space: nowrap;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-profession {
font-size: 12px;
}
/* "10% off 5+" joins the details column instead of floating over the
name in the corner. */
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-discount-badge {
position: static;
margin-top: 4px;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-rating-stars {
margin: 0;
font-size: 14px;
}
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-price {
margin-top: 2px;
padding-top: 0;
font-size: 13px;
}
/* Directory ([cc_practitioners]) shares the horizontal card above; its
phone width rule is 3-across, so force full rows here. The discount
placeholder only aligns prices across a grid row — drop it. */
.cc-booking-form.cc-practitioners .ccbf-step[data-step="staff"] .ccbf-staff-card {
width: 100%;
flex: 0 0 100%;
min-width: 0;
}
.cc-booking-form.cc-practitioners .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-discount-badge--empty {
display: none;
}
/* Horizontal cards are shorter than the stacked ones the scroll box
height assumes; keep about two and a half cards visible. */
.cc-practitioners .ccbf-step[data-step="staff"] .ccbf-staff-list {
--ccbf-row-h: 165px;
}
/* Compact pinned toolbar, two rows: search + icon-only Filters, then
Previously Booked + sort. The hint line is dropped — the controls
speak for themselves at this width. */
.ccbf-staff-sticky .ccbf-staff-hint {
display: none;
}
.ccbf-staff-sticky .ccbf-staff-toolbar {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.ccbf-staff-sticky .ccbf-staff-toolbar-left,
.ccbf-staff-sticky .ccbf-staff-toolbar-right {
display: contents;
}
/* Row 1: search fills, Filters button beside it. The 60% basis leaves
no room for Previously Booked, so it always wraps to row 2. */
.ccbf-staff-sticky .ccbf-staff-search-wrap {
order: 1;
flex: 1 1 60%;
min-width: 0;
max-width: none;
}
.ccbf-staff-sticky .ccbf-staff-filter-toggle {
order: 2;
flex: 0 0 auto;
margin-left: 0;
}
/* Icon + count only; the button keeps its aria-label. */
.ccbf-staff-sticky .ccbf-staff-filter-toggle-text {
display: none;
}
/* Row 2: Previously Booked, then sort filling the rest (the whole row
when there is no Previously Booked toggle). */
.ccbf-staff-sticky .ccbf-staff-prev-booked-toggle,
.ccbf-staff-sticky .ccbf-staff-pref {
order: 3;
flex: 0 0 auto;
}
/* The preference label is long; let it shrink and ellipsis so the sort
keeps its place on row 2. */
.ccbf-staff-sticky .ccbf-staff-pref {
flex: 0 1 auto;
}
.ccbf-staff-sticky .ccbf-staff-pref-pill {
max-width: 100%;
}
.ccbf-staff-sticky .ccbf-staff-sort-wrap {
order: 4;
flex: 1 1 0;
min-width: 0;
width: auto;
}
.ccbf-staff-sticky .ccbf-staff-toolbar-left:not(:has(.ccbf-staff-prev-booked-toggle)) ~ .ccbf-staff-toolbar-right:not(:has(.ccbf-staff-pref)) .ccbf-staff-sort-wrap {
flex-basis: 100%;
}
.ccbf-staff-sticky .ccbf-staff-sort {
width: 100%;
min-width: 0;
text-overflow: ellipsis;
}
/* Next-slot pill: a wrapped pill turns into a blob, so give it a small
radius and centred text on narrow cards. */
.ccbf-staff-card .ccbf-staff-next {
border-radius: 999px;
padding: 3px 10px;
font-size: 11px;
line-height: 1.35;
text-align: left;
max-width: 100%;
}
.ccbf-staff-card .ccbf-staff-next::before {
flex: 0 0 auto;
}
}
/* ---- time-first: "available on other days" companion list ---- */
.ccbf-staff-otherdays {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid #e6ecea;
}
.ccbf-staff-otherdays[hidden] {
display: none;
}
.ccbf-staff-otherdays-title {
margin: 0 0 16px;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: #3c4a47;
}
.ccbf-staff-otherdays-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap: 20px 3.5%;
align-items: stretch;
}
/* The day this practitioner is actually free — selecting the card moves the
booking to it, so it has to read as part of the offer, not decoration. */
.ccbf-staff-card .ccbf-staff-alt-date {
display: inline-flex;
align-items: center;
margin-top: 7px;
padding: 3px 10px;
border: 1px solid rgba(47, 125, 112, .22);
border-radius: 999px;
background: rgba(47, 125, 112, .09);
font-size: 11px;
font-weight: 700;
line-height: 1.5;
color: #2f7d70;
}
.ccbf-staff-card {
border: none;
background: #f2f4f4;
border-radius: 10px;
padding: 16px 14px 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
transition: box-shadow .2s, transform .2s;
}
.ccbf-staff-card:hover,
.ccbf-staff-card.selected {
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
transform: translateY(-1px);
}
.ccbf-staff-card--confirm {
cursor: default;
}
.ccbf-staff-card--confirm:hover {
box-shadow: none;
transform: none;
}
/* The directory lists every public practitioner, so cap the grid at about two
and a half rows and scroll inside it — the clipped half row is what tells the
visitor there is more below. --ccbf-row-h is one row's height and is reset per
breakpoint because the card contents shrink on small screens; the added gaps
match the list's row gap (overridden above phones, see below). */
.cc-practitioners .ccbf-staff-list {
--ccbf-row-h: 310px;
max-height: calc(2.5 * var(--ccbf-row-h) + 2 * 20px);
/* Deliberately left at the default overscroll-behavior: once the list is
scrolled to its top or bottom, the scroll chains on to the page so the
visitor is never trapped inside the box. */
overflow-y: auto;
/* Room for the cards' hover lift and border. */
padding: 4px;
/* Scroll without a visible scrollbar — the clipped half row is the cue. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.cc-practitioners .ccbf-staff-list::-webkit-scrollbar {
display: none;
}
@media (min-width: 641px) and (max-width: 1024px) {
.cc-practitioners .ccbf-staff-list {
--ccbf-row-h: 310px;
}
}
@media (max-width: 640px) {
.cc-practitioners .ccbf-staff-list {
--ccbf-row-h: 200px;
max-height: calc(2.5 * var(--ccbf-row-h) + 2 * 10px);
}
}
/* Directory, above phones: 16px between cards both ways, the same spacing as
the booking form's practitioner step (12px on tablets). The template sizes
the cards to match. The scroll box height reuses the gap so it still clips
half a row. */
/* The staff step is a size container at every width: phones use it for the
horizontal card layout (see @container (max-width: 519px) above). */
.cc-practitioners .ccbf-step[data-step="staff"] {
container-type: inline-size;
}
@media (min-width: 641px) {
.cc-practitioners .ccbf-staff-list {
--ccbf-row-gap: 16px;
gap: var(--ccbf-row-gap);
max-height: calc(2.5 * var(--ccbf-row-h) + 2 * var(--ccbf-row-gap));
}
}
/* Tablets: the booking step's gap shrinks to 10-14px here, so tighten too. */
@media (min-width: 641px) and (max-width: 1024px) {
.cc-practitioners .ccbf-staff-list {
--ccbf-row-gap: 12px;
}
}
.ccbf-step[data-step="staff"] .ccbf-staff-card.selected {
background: #e7f3ef;
}
.ccbf-step[data-step="staff"] .ccbf-staff-card:hover {
background: #e7f3ef;
}
.ccbf-step[data-step="service"] .ccbf-staff-card.selected {
background: var(--ccbf-primary);
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
color: #fff;
}
.ccbf-step[data-step="service"] .ccbf-staff-card {
padding: 10px 12px 10px;
}
.ccbf-step[data-step="service"] .ccbf-service-variation {
padding: 8px 10px 8px;
}
.ccbf-step[data-step="service"] .ccbf-staff-card.selected .ccbf-staff-name {
color: #fff;
}
.ccbf-staff-card img {
width: 122px;
height: 122px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 14px;
}
.ccbf-staff-card .ccbf-staff-name {
font-size: 15px;
line-height: 1.2;
font-weight: 700;
color: #3a3a3a;
}
.ccbf-staff-card .ccbf-staff-name-link {
color: inherit;
text-decoration: none;
}
.ccbf-staff-card .ccbf-staff-name-link:hover,
.ccbf-staff-card .ccbf-staff-name-link:focus {
text-decoration: underline;
text-underline-offset: 2px;
}
.ccbf-staff-card .ccbf-staff-price {
display: block;
margin-top: auto;
padding-top: 10px;
font-size: 16px;
line-height: 1.25;
font-weight: 400;
color: var(--ccbf-primary);
}
.ccbf-staff-card .ccbf-staff-price-unit {
font-size: 12px;
color: #666;
font-weight: 500;
}
/* "Next available" badge, filled in lazily per card in the visitor's timezone.
Kept in the layout (invisible, fixed height) while empty so the price above
it sits at the same height on every card, including practitioners with no
upcoming availability. */
.ccbf-staff-card .ccbf-staff-next {
display: inline-flex;
visibility: hidden;
align-items: center;
gap: 6px;
margin-top: 7px;
padding: 3px 10px;
box-sizing: border-box;
min-height: calc(1.5em + 8px);
background: rgba(47, 125, 112, .09);
border: 1px solid rgba(47, 125, 112, .22);
border-radius: 999px;
font-size: 11px;
line-height: 1.5;
color: #2f7d70;
font-weight: 700;
}
.ccbf-staff-card .ccbf-staff-next--loaded {
visibility: visible;
}
/* While the timestamp is being fetched: muted pill with a small spinner. */
.ccbf-staff-card .ccbf-staff-next--loading {
visibility: visible;
background: rgba(122, 133, 131, .08);
border-color: rgba(122, 133, 131, .2);
color: #7a8583;
font-weight: 600;
}
.ccbf-staff-card .ccbf-staff-next--loading::before {
content: '';
flex: 0 0 auto;
width: 10px;
height: 10px;
box-sizing: border-box;
border: 2px solid rgba(47, 125, 112, .25);
border-top-color: #2f7d70;
border-radius: 50%;
animation: ccbf-spiral .7s linear infinite;
}
.ccbf-staff-card .ccbf-staff-next--loaded::before {
content: '';
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
animation: ccbf-next-dot-pulse 2s ease-out infinite;
}
@keyframes ccbf-next-dot-pulse {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, .45);
}
70% {
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
/* ---- Applied filter chips (shown under the toolbar) ------------------ */
.ccbf-staff-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 12px 0 6px;
padding: 10px 14px;
background: rgba(26, 101, 99, .05);
border: 1px solid rgba(26, 101, 99, .12);
border-radius: 6px;
}
.ccbf-staff-active-filters[hidden] {
display: none;
}
.ccbf-active-filters-label {
display: inline-flex;
align-items: center;
gap: 5px;
margin-right: 2px;
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(26, 101, 99, .75);
}
.ccbf-filter-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 6px 5px 12px;
border: 1px solid rgba(26, 101, 99, .2);
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 43, 42, .08);
color: #1a6563;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
animation: ccbf-chip-in .18s ease-out;
}
@keyframes ccbf-chip-in {
from {
opacity: 0;
transform: translateY(3px) scale(.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ccbf-filter-chip-label {
white-space: nowrap;
}
.ccbf-filter-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0 0 2px;
border: 0;
border-radius: 999px;
background: rgba(26, 101, 99, .12);
color: #1a6563;
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.ccbf-filter-chip-remove:hover,
.ccbf-filter-chip-remove:focus-visible {
background: #dc2626;
color: #fff;
transform: scale(1.08);
}
.ccbf-filter-chip-clear {
margin-left: auto;
border: 1px solid transparent;
border-radius: 999px;
background: none;
padding: 5px 12px;
color: #b91c1c;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.ccbf-filter-chip-clear:hover,
.ccbf-filter-chip-clear:focus-visible {
background: rgba(220, 38, 38, .08);
border-color: rgba(220, 38, 38, .35);
}
@media (max-width: 640px) {
.ccbf-staff-active-filters {
padding: 8px 10px;
gap: 6px;
}
.ccbf-filter-chip-clear {
margin-left: 0;
}
}
.ccbf-staff-card .ccbf-staff-profession {
font-size: 11px;
line-height: 1.25;
color: var(--ccbf-primary);
font-weight: 900;
margin-top: 2px;
}
/* Focus Area chips (cc_practitioners theme_focus="N"): one per line, clipped
with an ellipsis, in a block of fixed height so the price below lines up
across cards whether a practitioner has N matching focus areas or fewer. */
.ccbf-staff-card .ccbf-staff-theme-focus {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
min-width: 0;
margin-top: 8px;
min-height: calc(var(--ccbf-focus-rows, 2) * 20px + (var(--ccbf-focus-rows, 2) - 1) * 4px);
}
.ccbf-staff-card .ccbf-staff-focus-chip {
display: block;
box-sizing: border-box;
max-width: 100%;
padding: 2px 10px;
border-radius: 999px;
background: #e7f3ef;
color: #2f7d70;
font-size: 11px;
font-weight: 600;
line-height: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hovered / selected cards turn the chip colour themselves. */
.ccbf-staff-card:hover .ccbf-staff-focus-chip,
.ccbf-staff-card.selected .ccbf-staff-focus-chip {
background: #fff;
}
@container (max-width: 519px) {
/* Horizontal phone card: chips join the left-aligned details column. */
.cc-booking-form .ccbf-step[data-step="staff"] .ccbf-staff-card .ccbf-staff-theme-focus {
align-items: flex-start;
width: auto;
min-height: 0;
margin-top: 6px;
}
}
.ccbf-staff-card .ccbf-staff-recent-badge {
display: inline-block;
margin-top: 5px;
padding: 2px 7px;
background: var(--ccbf-primary);
color: #fff;
border: 1px solid var(--ccbf-primary);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
}
.ccbf-staff-card .ccbf-staff-discount-badge {
display: inline-block;
margin-top: 5px;
padding: 2px 7px;
background: #d1fae5;
color: #065f46;
border: 1px solid #6ee7b7;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
}
/* Placeholder on cards without the discount, so prices line up across a row. */
.ccbf-staff-card .ccbf-staff-discount-badge--empty {
visibility: hidden;
}
/* Listing cards (booking step + directory): the discount badge is pinned to
the card's top-right corner instead of sitting in the text column. The
confirm-step summary card keeps it inline. */
.ccbf-staff-card:not(.ccbf-staff-card--confirm) {
position: relative;
}
.ccbf-staff-card:not(.ccbf-staff-card--confirm) .ccbf-staff-discount-badge {
position: absolute;
top: 8px;
right: 8px;
margin: 0;
white-space: nowrap;
}
.ccbf-staff-card:not(.ccbf-staff-card--confirm) .ccbf-staff-discount-badge--empty {
display: none;
}
.ccbf-staff-card .ccbf-staff-rating {
margin-bottom: 1px;
}
.ccbf-staff-card .ccbf-rating-stars,
.ccbf-staff-card .ccbf-rating-meta {
display: block;
}
/* Same gap above the stars (after the name) as below them (before the score);
the score line matches the name's line-height so neither side gets extra
leading. */
.ccbf-staff-card .ccbf-rating-stars {
letter-spacing: 1px;
font-size: 18px;
line-height: 1;
margin: 6px 0;
}
.ccbf-staff-card .ccbf-rating-meta {
line-height: 1.2;
}
.ccbf-staff-card .ccbf-rating-average {
color: var(--ccbf-primary);
font-weight: 700;
font-size: 11px;
}
.ccbf-staff-card .ccbf-rating-reviews {
color: var(--ccbf-primary);
font-weight: 600;
font-size: 11px;
}
.ccbf-staff-card .ccbf-stars-filled {
color: #d8a51a;
}
.ccbf-staff-card .ccbf-stars-empty {
color: #dcc68b;
}
@media (max-width: 640px) {
.ccbf-staff-list,
.ccbf-staff-otherdays-list {
justify-content: center;
gap: 10px;
}
.cc-practitioners .ccbf-step[data-step="staff"] .ccbf-staff-card {
width: calc(33.333% - 7px);
min-width: 96px;
}
.ccbf-staff-card {
padding: 10px 8px;
border-radius: 8px;
}
.ccbf-step[data-step="service"] .ccbf-service-variation {
padding: 6px 8px;
}
.ccbf-staff-card img {
width: 72px;
height: 72px;
margin-bottom: 8px;
}
.ccbf-staff-card .ccbf-staff-name {
font-size: 12px;
}
.ccbf-staff-card .ccbf-staff-price {
padding-top: 6px;
font-size: 12px;
}
.ccbf-staff-card .ccbf-staff-profession,
.ccbf-staff-card .ccbf-rating-average,
.ccbf-staff-card .ccbf-rating-reviews {
font-size: 9px;
}
.ccbf-staff-card .ccbf-rating-stars {
font-size: 12px;
letter-spacing: 0;
margin: 4px 0;
}
.ccbf-staff-card .ccbf-staff-discount-badge {
margin-top: 4px;
padding: 1px 5px;
font-size: 8px;
}
.ccbf-staff-card:not(.ccbf-staff-card--confirm) .ccbf-staff-discount-badge {
top: 5px;
right: 5px;
}
}
.ccbf-staff-card .ccbf-staff-bio {
font-size: 12px;
color: #666;
line-height: 1.4;
margin: 0;
text-align: left;
}
/* ---- Calendar ---- */
.ccbf-calendar-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.ccbf-calendar-nav button {
background: #fff !important;
border: 1px solid #d6e2e1;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #24302f;
transition: background .2s, transform .2s, box-shadow .2s;
}
.ccbf-calendar-nav button:hover,
.ccbf-calendar-nav button:focus,
.ccbf-calendar-nav button:active {
background: #fff;
color: #24302f;
}
.ccbf-calendar-nav button:hover {
box-shadow: 0 0 0 3px rgba(26, 101, 99, .14);
transform: translateY(-1px);
}
.ccbf-month-label {
font-weight: 600;
font-size: 16px;
}
.ccbf-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
border: 1px solid #dfe8e8;
border-radius: 10px;
padding: 10px;
background: #fff;
}
.ccbf-day-header {
text-align: center;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: #7a8583;
padding: 4px 0 8px;
}
.ccbf-day {
text-align: center;
padding: 9px 4px;
border-radius: 8px;
font-size: 14px;
cursor: default;
color: #c4cccb;
transition: background .15s, color .15s, box-shadow .15s;
}
.ccbf-day.available {
background: var(--ccbf-primary-tint);
color: var(--ccbf-primary);
cursor: pointer;
font-weight: 600;
}
.ccbf-day.available:hover {
box-shadow: 0 0 0 2px var(--ccbf-primary);
}
.ccbf-day.selected,
.ccbf-day.selected:hover {
background: var(--ccbf-primary);
color: #fff;
box-shadow: none;
}
.ccbf-day.today {
position: relative;
font-weight: 600;
}
.ccbf-day.today::after {
content: "";
position: absolute;
left: 50%;
bottom: 3px;
width: 4px;
height: 4px;
margin-left: -2px;
border-radius: 50%;
background: currentColor;
}
/* ---- Time step staff header ---- */
/* Time step: the header's layout follows the step's own width (the form is
often inside a narrow popup), see the @container rule below. */
.ccbf-step[data-step="time"] {
container-type: inline-size;
}
.ccbf-time-header-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
background: #dfeae9;
padding: 20px;
border-radius: 20px;
}
.ccbf-time-staff-header {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.ccbf-time-header-row > .ccbf-time-staff-header {
flex: 1 1 280px;
}
/* Narrow: practitioner block on top, then the date + timezone on the left
with "Change date" on the right, all full width — nothing overlaps. */
@container (max-width: 559px) {
.ccbf-time-header-row {
flex-direction: column;
align-items: stretch;
padding: 16px;
border-radius: 14px;
}
.ccbf-time-header-row > .ccbf-time-staff-header {
flex: 0 0 auto;
align-items: flex-start;
}
.ccbf-time-header-row .ccbf-time-staff-avatar {
flex-basis: 64px;
width: 64px;
height: 64px;
}
.ccbf-time-header-row .ccbf-time-staff-info {
flex: 1 1 auto;
min-width: 0;
}
.ccbf-time-header-row .ccbf-time-date-bar {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 2px 10px;
padding-top: 12px;
border-top: 1px solid rgba(26, 101, 99, .15);
text-align: left;
}
.ccbf-time-header-row .ccbf-time-date-label {
grid-column: 1;
}
.ccbf-time-header-row .ccbf-time-date-tz {
grid-column: 1;
}
.ccbf-time-header-row .ccbf-time-date-edit {
grid-column: 2;
grid-row: 1 / span 2;
white-space: nowrap;
}
}
.ccbf-time-staff-avatar {
flex: 0 0 100px;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background: #e8f0f0;
}
@media (max-width: 640px) {
.ccbf-time-staff-avatar {
flex-basis: 72px;
width: 72px;
height: 72px;
}
}
.ccbf-time-staff-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ccbf-time-staff-avatar .ccbf-staff-avatar-placeholder {
width: 100%;
height: 100%;
border-radius: 50%;
}
.ccbf-time-staff-name {
font-weight: 600;
font-size: 15px;
color: #24302f;
line-height: 1.2;
}
.ccbf-time-staff-designation {
margin-top: 2px;
font-size: 13px;
font-weight: 500;
color: #3d4b4a;
line-height: 1.35;
white-space: normal; /* always shown in full */
}
.ccbf-time-staff-profession {
font-size: 12px;
color: #666;
margin-top: 2px;
font-weight: 400;
}
.ccbf-time-staff-price {
font-size: 12px;
font-weight: 600;
color: var(--ccbf-primary);
margin-top: 2px;
}
.ccbf-time-staff-edit {
background: none;
border: 1px solid var(--ccbf-primary);
border-radius: 20px;
color: var(--ccbf-primary);
cursor: pointer;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
margin-top: 6px;
transition: background .15s, color .15s;
}
.ccbf-time-staff-edit:hover {
background: var(--ccbf-primary);
color: #fff;
}
/* ---- Time step date bar ---- */
.ccbf-time-date-bar {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
margin-bottom: 0;
}
.ccbf-time-date-label {
font-weight: 600;
font-size: 15px;
color: #24302f;
}
/* Timezone the slot times are shown in, under the date. */
.ccbf-time-date-tz {
font-size: 13px;
color: #5f6f6e;
}
.ccbf-time-date-tz:empty {
display: none;
}
.ccbf-time-date-edit {
background: none;
border: 1px solid var(--ccbf-primary);
border-radius: 20px;
color: var(--ccbf-primary);
cursor: pointer;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
transition: background .15s, color .15s;
}
.ccbf-time-date-edit:hover {
background: var(--ccbf-primary);
color: #fff;
}
/* ---- Timezone bar ---- */
.ccbf-timezone-bar {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 10px 14px;
border: 1px solid #dfe8e8;
border-radius: 10px;
background: #f6f9f9;
width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
}
.ccbf-timezone-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ccbf-timezone-prefix {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
color: #4a5553;
white-space: nowrap;
margin: 0;
}
.ccbf-timezone-select {
flex: 0 1 auto;
width: auto;
font-size: 14px;
padding: 6px 10px;
border: 1px solid #dfe8e8;
border-radius: 8px;
background: #fff;
cursor: pointer;
color: #24302f;
}
.ccbf-timezone-suffix {
display: none;
}
.ccbf-timezone-pref-link {
margin-left: auto;
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
color: var(--ccbf-primary);
text-decoration: none;
border-bottom: 1px dashed currentColor;
white-space: nowrap;
line-height: 1.2;
}
.ccbf-timezone-pref-link:hover,
.ccbf-timezone-pref-link:focus {
color: var(--ccbf-primary-dark);
text-decoration: none;
border-bottom-style: solid;
}
.ccbf-timezone-hint {
display: none;
}
@media (max-width: 480px) {
.ccbf-timezone-bar {
gap: 8px;
}
.ccbf-timezone-bar .ccbf-tz-combo {
flex: 1 1 100%;
order: 3;
}
.ccbf-timezone-bar .ccbf-tz-combo-input {
width: 100%;
max-width: none;
}
.ccbf-timezone-pref-link {
order: 2;
}
}
/* ---- Searchable timezone combobox ---- */
.ccbf-tz-native-hidden {
display: none !important;
}
.ccbf-tz-combo {
position: relative;
flex: 0 0 auto;
}
.ccbf-tz-combo-input {
width: 220px;
max-width: 60vw;
font-size: 14px;
padding: 7px 30px 7px 10px;
border: 1px solid #dfe8e8;
border-radius: 8px;
background: #fff
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
no-repeat right 10px center;
color: #333;
cursor: pointer;
box-sizing: border-box;
font-weight: 500;
}
.ccbf-tz-combo-input:focus {
outline: none;
border-color: var(--ccbf-primary);
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
cursor: text;
}
.ccbf-tz-combo-list {
display: none;
position: absolute;
z-index: 50;
top: calc(100% + 4px);
left: 0;
right: 0;
min-width: 220px;
max-height: 260px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
text-align: left;
white-space: normal;
}
.ccbf-tz-combo.is-open .ccbf-tz-combo-list {
display: block;
}
.ccbf-tz-combo-group {
padding: 6px 10px 2px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: #999;
background: #fafafa;
position: sticky;
top: 0;
}
.ccbf-tz-combo-item {
padding: 7px 10px;
font-size: 14px;
color: #333;
cursor: pointer;
}
.ccbf-tz-combo-item:hover {
background: #f1f6f6;
}
.ccbf-tz-combo-item.is-selected {
background: var(--ccbf-primary-tint);
color: var(--ccbf-primary);
font-weight: 600;
}
.ccbf-tz-combo-empty {
padding: 12px 10px;
font-size: 14px;
color: #888;
text-align: center;
}
/* ---- Time slots ---- */
.ccbf-slots-list {
margin-bottom: 16px;
}
.ccbf-slots-period-heading {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: #888;
margin: 24px 0 8px;
}
.ccbf-slots-period-heading:first-child {
margin-top: 0;
}
.ccbf-slots-group+.ccbf-slots-period-heading {
padding-top: 8px;
}
.ccbf-slots-group {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 8px;
}
.ccbf-slot {
border: 2px solid #e0e0e0;
border-radius: 6px;
padding: 10px 6px;
text-align: center;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: border-color .2s, background .2s;
}
.ccbf-slot:hover,
.ccbf-slot.selected {
border-color: var(--ccbf-primary);
background: var(--ccbf-primary);
color: #fff;
}
/* ---- available-day: practitioner list opens filtered to today + tomorrow ---- */
/* The practitioner step comes before the Date step here, so its empty-state
"Change date" button would jump the user forwards past two steps. */
.cc-booking-form[data-flow="available-day"] [data-step="staff"] .ccbf-time-date-edit {
display: none !important;
}
/* ---- time-first: timezone + time-of-day range picker (Date step) ---- */
/* The timezone bar sits above the calendar here, so it needs no top gap —
its 24px bottom margin separates it from the month nav. */
.ccbf-step[data-step="date"] .ccbf-timezone-bar {
margin-top: 0;
}
.ccbf-timerange {
margin: 8px 0 20px;
}
/* Picks up the spacing the timezone bar used to provide below the grid. */
.ccbf-step[data-step="date"] .ccbf-timerange {
margin-top: 20px;
}
.ccbf-timerange-label {
display: block;
text-align: center;
font-size: 13px;
font-weight: 600;
color: #555;
margin-bottom: 12px;
}
.ccbf-timerange-options {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
/* Shared option-card look for "Preferred day" + "Preferred time of day". */
.ccbf-timerange-option,
.ccbf-daymode-option {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
border: 1.5px solid #dfe8e8;
border-radius: 10px;
padding: 14px 12px;
background: #fff;
cursor: pointer;
text-align: center;
transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.ccbf-timerange-option-title {
font-size: 14px;
font-weight: 600;
color: #24302f;
line-height: 1.25;
}
.ccbf-timerange-option-sub {
font-size: 12px;
color: #7a8583;
line-height: 1.3;
}
.ccbf-timerange-option:hover,
.ccbf-daymode-option:hover {
border-color: var(--ccbf-primary);
}
.ccbf-timerange-option.selected,
.ccbf-daymode-option.selected {
border-color: var(--ccbf-primary);
background: var(--ccbf-primary-tint);
box-shadow: inset 0 0 0 1px var(--ccbf-primary);
}
.ccbf-timerange-option.selected .ccbf-timerange-option-title,
.ccbf-daymode-option.selected .ccbf-timerange-option-title {
color: var(--ccbf-primary);
}
.ccbf-timerange-option.selected .ccbf-timerange-option-sub,
.ccbf-daymode-option.selected .ccbf-timerange-option-sub {
color: var(--ccbf-primary);
opacity: .85;
}
/* Check mark badge on the selected card. */
.ccbf-timerange-option.selected::after,
.ccbf-daymode-option.selected::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ccbf-primary);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
background-position: center;
background-repeat: no-repeat;
}
/* Theme button focus/active states paint a solid primary fill with white
text; pin the card look so focus never hides the label. */
.cc-booking-form button.ccbf-timerange-option:hover,
.cc-booking-form button.ccbf-timerange-option:focus,
.cc-booking-form button.ccbf-timerange-option:active,
.cc-booking-form button.ccbf-daymode-option:hover,
.cc-booking-form button.ccbf-daymode-option:focus,
.cc-booking-form button.ccbf-daymode-option:active {
background: #fff !important;
background-color: #fff !important;
color: #24302f !important;
outline: none;
border-color: #dfe8e8;
box-shadow: none;
}
.cc-booking-form button.ccbf-timerange-option.selected:hover,
.cc-booking-form button.ccbf-timerange-option.selected:focus,
.cc-booking-form button.ccbf-timerange-option.selected:active,
.cc-booking-form button.ccbf-daymode-option.selected:hover,
.cc-booking-form button.ccbf-daymode-option.selected:focus,
.cc-booking-form button.ccbf-daymode-option.selected:active {
background: var(--ccbf-primary-tint) !important;
background-color: var(--ccbf-primary-tint) !important;
color: var(--ccbf-primary) !important;
border-color: var(--ccbf-primary);
box-shadow: inset 0 0 0 1px var(--ccbf-primary);
}
.cc-booking-form button.ccbf-timerange-option:hover .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-daymode-option:hover .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-timerange-option:focus .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-daymode-option:focus .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-timerange-option:active .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-daymode-option:active .ccbf-timerange-option-title {
color: #24302f;
}
.cc-booking-form button.ccbf-timerange-option:hover .ccbf-timerange-option-sub,
.cc-booking-form button.ccbf-daymode-option:hover .ccbf-timerange-option-sub,
.cc-booking-form button.ccbf-timerange-option:focus .ccbf-timerange-option-sub,
.cc-booking-form button.ccbf-daymode-option:focus .ccbf-timerange-option-sub,
.cc-booking-form button.ccbf-timerange-option:active .ccbf-timerange-option-sub,
.cc-booking-form button.ccbf-daymode-option:active .ccbf-timerange-option-sub {
color: #7a8583;
}
.cc-booking-form button.ccbf-timerange-option.selected:hover .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-daymode-option.selected:hover .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-timerange-option.selected:hover .ccbf-timerange-option-sub,
.cc-booking-form button.ccbf-daymode-option.selected:hover .ccbf-timerange-option-sub,
.cc-booking-form button.ccbf-timerange-option.selected:focus .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-daymode-option.selected:focus .ccbf-timerange-option-title,
.cc-booking-form button.ccbf-timerange-option.selected:focus .ccbf-timerange-option-sub,
.cc-booking-form button.ccbf-daymode-option.selected:focus .ccbf-timerange-option-sub {
color: var(--ccbf-primary);
}
/* ---- Preferred day (time-first) ---- */
.ccbf-daymode {
margin: 4px 0 20px;
}
/* ---- Service step ------------------------------------------------------
Summary card of what was chosen so far (practitioner + day/time), then the
session options as a single-column list: name and length on the left,
price on the right, tick when selected. */
.ccbf-step[data-step="service"] .ccbf-service-list {
display: block;
}
.ccbf-service-staff-header {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px;
padding: 20px;
border-radius: 20px;
background: #dfeae9;
}
.ccbf-service-staff-header[hidden] {
display: none;
}
/* On a practitioner's own profile the page already shows who they are, and
the practitioner cannot be changed, so the header card is never shown. */
.ccbf-profile-booking .ccbf-service-staff-header {
display: none !important;
}
.ccbf-service-staff-header .ccbf-time-staff-info {
flex: 1 1 auto;
min-width: 0;
}
/* Right column: chosen day, time-of-day and timezone — step 4's date bar. */
.ccbf-service-staff-header .ccbf-service-date-bar {
text-align: right;
}
/* Next opening, in the slot of step 4's price line. */
.ccbf-service-staff-next {
font-size: 12px;
font-weight: 600;
color: var(--ccbf-primary);
margin-top: 2px;
}
.ccbf-service-staff-next[hidden] {
display: none;
}
.ccbf-service-date-edit {
background: none;
border: 1px solid var(--ccbf-primary);
border-radius: 20px;
color: var(--ccbf-primary);
cursor: pointer;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
transition: background .15s, color .15s;
}
.ccbf-service-date-edit:hover {
background: var(--ccbf-primary);
color: #fff;
}
@media (max-width: 560px) {
.ccbf-service-staff-header {
flex-wrap: wrap;
}
.ccbf-service-staff-header .ccbf-service-date-bar {
flex-basis: 100%;
align-items: flex-start;
text-align: left;
}
}
/* The "Change Practitioner" button sits in the info column like step 4's;
block so it drops below the inline-flex day line. */
.ccbf-service-staff-header .ccbf-service-staff-edit {
display: block;
}
/* Heading matches the step-1 row labels ("Preferred day"). */
.ccbf-step[data-step="service"] .ccbf-service-section-heading {
margin: 0 0 12px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: #555;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabels {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-bottom: 20px;
/* Lets the option cards switch to a two-line layout when the list is
narrow (profile sidebar) without a viewport media query. */
container-type: inline-size;
}
/* One card per session option. Grid so the name never fights the price for
space: radio | name | (length) | price | info. In narrow containers the
card folds to two lines (see the container query below). */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn {
position: relative;
display: grid;
/* Every card is its own grid, so the length and price columns take a
shared width (widest in the list, set by alignServiceColumns() in
service.js) — otherwise "From R100" vs "From R60" staggers the chips.
The info column is fixed so a row without an icon still lines up. */
grid-template-columns: 20px minmax(0, 1fr) minmax(var(--ccbf-duration-w, 0px), auto) minmax(var(--ccbf-price-w, 0px), auto) 20px;
grid-template-areas: "radio name duration price info";
align-items: center;
column-gap: 12px;
row-gap: 6px;
width: 100%;
max-width: none;
min-height: 64px;
border: 1.5px solid #dfe8e8;
border-radius: 12px;
padding: 12px 16px;
background: #fff;
text-align: left;
box-shadow: none;
transition: border-color .18s, background .18s, box-shadow .18s;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:focus-visible {
outline: none;
border-color: var(--ccbf-primary);
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
}
/* Radio indicator on the left, ticked when selected. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-radio {
display: block;
flex: 0 0 20px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #c9d6d5;
background: #fff;
box-sizing: border-box;
grid-area: radio;
transition: border-color .18s, background .18s;
}
/* Flatten name / length / price / info into the row so the info icon can
sit just before the price. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-main {
display: contents;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-name {
grid-area: name;
min-width: 0;
font-size: 15px;
font-weight: 600;
color: #24302f;
line-height: 1.3;
overflow-wrap: anywhere;
}
/* Meta: length as a small chip inline with the name, price pushed right. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-meta {
display: contents;
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-meta-sep {
display: none;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-duration {
grid-area: duration;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
background: #f2f4f4;
color: #4a5553;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-price {
grid-area: price;
justify-self: end;
font-size: 16px;
font-weight: 700;
color: var(--ccbf-primary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-info {
grid-area: info;
justify-self: end;
display: inline-flex;
margin-left: 0;
}
/* Narrow list (profile sidebar, small modals): fold each card to two lines.
Line 1: name + info icon. Line 2: length chip left, price right. The radio
spans both lines so it stays vertically centred on the card. */
@container (max-width: 420px) {
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn {
grid-template-columns: 20px minmax(0, 1fr) auto;
grid-template-areas:
"radio name info"
"radio duration price";
row-gap: 8px;
padding: 14px 16px;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-name {
align-self: end;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-duration,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-price {
align-self: start;
}
/* Tooltip anchors to the card's right edge, above the info icon. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-tooltip {
right: 12px;
max-width: min(280px, calc(100cqw - 24px));
}
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:hover {
border-color: var(--ccbf-primary);
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
transform: none;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn.is-selected {
border-color: var(--ccbf-primary);
background: var(--ccbf-primary-tint);
color: inherit;
box-shadow: inset 0 0 0 1px var(--ccbf-primary);
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn.is-selected .ccbf-service-radio {
border-color: var(--ccbf-primary);
background: var(--ccbf-primary)
url("data:image/svg+xml;utf8,")
no-repeat center / 12px 12px;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn.is-selected .ccbf-service-name,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn.is-selected .ccbf-service-price {
color: var(--ccbf-primary);
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn.is-selected .ccbf-service-duration {
background: #fff;
color: var(--ccbf-primary);
}
/* Info icon: a quiet circle that fills on hover / focus. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-info {
width: 20px;
height: 20px;
border: 1.5px solid #c2d2cd;
color: #6b8079;
background: #fff;
font-size: 12px;
cursor: help;
transition: background .15s, color .15s, border-color .15s;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-info:hover,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-info:focus-visible,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-info[aria-expanded="true"] {
background: var(--ccbf-primary);
border-color: var(--ccbf-primary);
color: #fff;
outline: none;
}
/* Tooltip: opens on hovering anywhere on the row (mouse), on keyboard focus
of the row or icon, or on tapping the icon (touch).
Dark card above the icon, right-aligned so it stays inside the modal. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-tooltip {
left: auto;
right: 10px;
bottom: calc(100% + 10px);
width: max-content;
max-width: min(300px, 80vw);
padding: 10px 12px;
border-radius: 10px;
background: #14514f;
color: #fff;
font-size: 12.5px;
line-height: 1.5;
font-weight: 400;
box-shadow: 0 10px 28px rgba(20, 81, 79, .28);
transform: translateY(6px);
transform-origin: bottom right;
opacity: 0;
visibility: hidden;
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-tooltip strong,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-tooltip b {
color: #fff;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-tooltip a {
color: #fcd406;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-tooltip::after {
top: 100%;
left: auto;
right: 14px;
width: 12px;
height: 12px;
margin-top: -6px;
background: #14514f;
transform: rotate(45deg);
}
/* With a "From" label the price fills its shared-width column: "From" lines
up on the left, the amount on the right, on every row. Wide layout only —
the two-line sidebar card keeps its price hugging the right edge. */
@container (min-width: 421px) {
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-price:has(.ccbf-service-price-from) {
/* Caption over amount, both starting on one line down the list:
a small "STARTING FROM" eyebrow, then the figure. */
justify-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
line-height: 1.15;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-price-from {
margin-right: 0;
font-size: 9.5px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: #7d8f8d;
}
}
/* Roomy cards: the length chip moves to the middle of the card, in one
centred column — name and an equal spacer share the width either side. */
@container (min-width: 640px) {
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn {
grid-template-columns: 20px minmax(0, 1fr) minmax(var(--ccbf-duration-w, 0px), auto) minmax(0, 1fr) minmax(var(--ccbf-price-w, 0px), auto) 20px;
grid-template-areas: "radio name duration . price info";
}
/* The two 1fr tracks are equal, but the fixed tracks beside them are not
(radio on the left; price + info on the right), which leaves the chip
left of the card's middle by half that difference — nudge it back. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-duration {
justify-self: center;
transform: translateX(calc((var(--ccbf-price-w, 0px) + 12px) / 2));
}
}
/* "From" before a lowest-across-practitioners price. */
.ccbf-service-price-from {
font-size: 11px;
font-weight: 500;
letter-spacing: .02em;
color: #6b7f7e;
margin-right: 2px;
}
/* Not enough room above (first rows under the pinned step tracker): the tip
opens below the row instead — class set by placeTip() in service.js. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn.ccbf-tip-below {
z-index: 5;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn.ccbf-tip-below .ccbf-service-tooltip {
top: calc(100% + 10px);
bottom: auto;
transform-origin: top right;
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn.ccbf-tip-below .ccbf-service-tooltip::after {
top: 0;
}
/* Closed by default: a click selects the row and leaves it focused, so plain
:focus-within would keep the tip stuck open after choosing. */
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:hover .ccbf-service-tooltip,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:focus-visible .ccbf-service-tooltip,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:focus-within .ccbf-service-tooltip {
opacity: 0;
visibility: hidden;
transform: translateY(6px);
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:focus-visible .ccbf-service-tooltip,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-info:focus-visible + .ccbf-service-tooltip,
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn .ccbf-service-tooltip.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mouse only: touch browsers fake a sticky :hover on tap, which would pop the
tip every time a row is chosen. Touch users tap the icon instead. */
@media (hover: hover) {
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:hover .ccbf-service-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn:hover .ccbf-service-info {
background: var(--ccbf-primary);
border-color: var(--ccbf-primary);
color: #fff;
}
}
@media (max-width: 560px) {
.ccbf-step[data-step="service"] .ccbf-service-sublabel-btn {
padding: 12px 14px;
column-gap: 10px;
}
}
/* ---- Date step (time-first only): label column on the left, options on the right.
Other flows show just the calendar, full width.
"Timezone shown in", "Preferred day" and "Preferred time of day" share one
label width so their controls line up. */
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] {
--ccbf-label-w: 180px;
/* Height of one option card: 14px padding x2 + 17.5px title + 3px gap
+ 15.6px sub + 1.5px border x2. Timezone control matches it. */
--ccbf-option-h: 67px;
}
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-bar {
margin: 0 0 20px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
flex-wrap: nowrap;
}
/* Icon (18px) + gap (10px) + prefix = label column width. */
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-prefix {
flex: 0 0 calc(var(--ccbf-label-w) - 28px);
color: #555;
}
/* Timezone control matches the option cards: same corner radius and border. */
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-bar .ccbf-tz-combo {
flex: 1 1 auto;
min-width: 0;
}
/* Above phones the timezone control ends where the "Any day" card ends: half
of the option column (full width minus the label column and its 10px gap),
less half the 10px gap between the two cards. */
@media (min-width: 641px) {
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-bar .ccbf-tz-combo {
flex: 0 0 calc((100% - var(--ccbf-label-w) - 20px) / 2);
}
}
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-bar .ccbf-tz-combo-input,
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-bar .ccbf-timezone-select {
width: 100%;
max-width: none;
box-sizing: border-box;
height: var(--ccbf-option-h);
min-height: var(--ccbf-option-h);
border: 1.5px solid #dfe8e8;
border-radius: 10px;
padding-top: 0;
padding-bottom: 0;
font-size: 14px;
font-weight: 600;
color: #24302f;
}
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-bar .ccbf-tz-combo-input:focus {
border-color: var(--ccbf-primary);
}
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-daymode,
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timerange {
display: grid;
grid-template-columns: var(--ccbf-label-w) minmax(0, 1fr);
column-gap: 10px;
align-items: center;
}
/* Labels carry a small brand-coloured icon, like the timezone globe. */
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timerange-label {
display: flex;
align-items: center;
gap: 10px;
text-align: left;
margin: 0;
}
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timerange-label::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Calendar icon for "Preferred day". */
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-daymode .ccbf-timerange-label::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* Clock icon for "Preferred time of day". */
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timerange .ccbf-timerange-label::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-bar {
flex-wrap: wrap;
}
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timezone-prefix {
flex: 0 0 auto;
}
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-daymode,
.cc-booking-form[data-flow="time-first"] .ccbf-step[data-step="date"] .ccbf-timerange {
grid-template-columns: minmax(0, 1fr);
row-gap: 10px;
}
}
.ccbf-daymode-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.ccbf-calendar-wrap {
transition: opacity .2s;
}
.ccbf-calendar-wrap.is-collapsed {
display: none;
}
.ccbf-step-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #eef2f2;
}
.ccbf-step-actions .ccbf-back-btn,
.ccbf-step-actions .ccbf-next-btn {
margin: 0;
}
.ccbf-next-btn:disabled,
.ccbf-next-btn[disabled] {
opacity: .45;
cursor: not-allowed;
}
.cc-booking-form button.ccbf-date-next-btn:disabled {
opacity: .45;
cursor: not-allowed;
}
@media (max-width: 480px) {
.ccbf-timerange-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---- Details form ---- */
.ccbf-detail-row {
display: grid;
gap: 14px;
margin-bottom: 14px;
}
.ccbf-detail-row-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ccbf-detail-row-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.ccbf-detail-row-1 {
grid-template-columns: 1fr;
}
.ccbf-step label {
display: block;
margin-bottom: 10px;
font-size: 18px;
font-weight: 600;
color: #333;
}
.ccbf-detail-row label {
margin-bottom: 0;
}
/* Details step: 18px labels (the .ccbf-step default) read as headings next to
the inputs, so the field labels get their own, quieter size. Scoped to this
step so the Time step's repeat controls keep their existing sizing. */
.ccbf-step[data-step="details"] .ccbf-detail-row label {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.ccbf-field {
display: block;
width: 100%;
margin-top: 6px;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
/* Themes size textareas separately from inputs — pin both here so the
notes box matches the name/email fields. */
font-family: inherit;
font-size: 15px;
line-height: 1.45;
box-sizing: border-box;
}
textarea.ccbf-field {
min-height: 92px;
resize: vertical;
}
.ccbf-field:focus {
outline: none;
border-color: var(--ccbf-primary);
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
}
.ccbf-req {
color: #e53935;
}
@media (max-width: 720px) {
.ccbf-detail-row-3 {
grid-template-columns: 1fr;
}
.ccbf-detail-row-2 {
grid-template-columns: 1fr;
}
}
/* ---- Summary ---- */
.ccbf-summary-bar,
.ccbf-confirm-summary {
background: #f9f9f9;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.7;
}
.ccbf-confirm-title {
margin: 0 0 6px;
font-size: 24px;
line-height: 1.2;
color: #1d2d2c;
}
.ccbf-confirm-subtitle {
margin: 0 0 16px;
font-size: 14px;
color: #5f7271;
}
.ccbf-step[data-step="confirm"] .ccbf-confirm-summary {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Three-box layout for confirm summary */
.ccbf-confirm-box {
background: #fff;
border: 1px solid #dce4e4;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
transition: border-color .2s, box-shadow .2s;
}
.ccbf-confirm-box:hover {
border-color: #c8d5d4;
box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
.ccbf-confirm-box-title {
margin: 0 0 14px;
font-size: 15px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: #4a5b5b;
display: flex;
align-items: center;
gap: 8px;
}
.ccbf-confirm-box-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.ccbf-confirm-booking-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 10px 0;
border-bottom: 1px solid #f0f5f4;
}
.ccbf-confirm-booking-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Professional card layout */
.ccbf-confirm-professional-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.ccbf-professional-photo-wrapper {
margin-bottom: 8px;
}
.ccbf-professional-photo-wrapper img,
.ccbf-professional-photo-wrapper .ccbf-confirm-therapist-fallback {
width: 80px;
height: 80px;
}
.ccbf-professional-name {
font-size: 16px;
font-weight: 700;
color: #1f3231;
}
.ccbf-professional-profession {
font-size: 13px;
font-weight: 600;
color: var(--ccbf-primary);
margin-top: -12px;
margin-bottom: 4px;
}
.ccbf-professional-stats {
display: flex;
gap: 24px;
justify-content: center;
width: 100%;
}
.ccbf-professional-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.ccbf-professional-stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #7a8a89;
}
.ccbf-professional-stat-value {
font-size: 14px;
font-weight: 600;
color: #1f3231;
}
.ccbf-stars-filled {
color: #fcd406;
letter-spacing: 1px;
}
.ccbf-stars-empty {
color: #d4d4d4;
letter-spacing: 1px;
}
@media (max-width: 640px) {
.ccbf-professional-stats {
gap: 16px;
}
}
.ccbf-confirm-booking-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #7a8a89;
flex-shrink: 0;
}
.ccbf-confirm-booking-value {
font-size: 14px;
font-weight: 600;
color: #1f3231;
line-height: 1.5;
text-align: right;
}
.ccbf-confirm-therapist-value {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
.ccbf-confirm-therapist-photo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #d5e2e2;
background: linear-gradient(135deg, #e8f3f2 0%, #f4f8f8 100%);
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
.ccbf-professional-photo-wrapper .ccbf-confirm-therapist-photo {
width: 80px;
height: 80px;
border: 3px solid #d5e2e2;
box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}
.ccbf-confirm-therapist-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #fff;
background: var(--ccbf-primary);
}
.ccbf-professional-photo-wrapper .ccbf-confirm-therapist-fallback {
width: 80px;
height: 80px;
font-size: 28px;
border: 3px solid #d5e2e2;
}
.ccbf-confirm-therapist-name {
min-width: 0;
}
@media (max-width: 640px) {
.ccbf-confirm-box {
padding: 16px;
}
.ccbf-confirm-booking-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.ccbf-confirm-booking-value {
text-align: left;
}
.ccbf-confirm-therapist-value {
justify-content: flex-start;
}
}
.ccbf-confirm-summary table {
width: 100%;
border-collapse: collapse;
}
.ccbf-confirm-summary td {
padding: 8px 0;
vertical-align: top;
border-bottom: 1px solid #edf3f3;
}
.ccbf-confirm-summary tr:last-child td {
border-bottom: none;
}
.ccbf-confirm-summary td:first-child {
font-weight: 600;
width: 170px;
color: #555;
}
/* ---- Terms ---- */
.ccbf-terms {
font-size: 12px;
color: #6e7e7d;
margin: 0 0 14px;
background: #f6f9f9;
border: 1px solid #e5eeee;
border-radius: 8px;
padding: 10px 12px;
}
.ccbf-confirm-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ccbf-step[data-step="details"] .ccbf-review-btn {
float: right;
margin-right: 0;
}
.ccbf-step[data-step="confirm"] .ccbf-back-btn,
.ccbf-step[data-step="confirm"] .ccbf-submit-btn {
margin-top: 0;
}
.ccbf-step[data-step="confirm"] .ccbf-back-btn {
background: #fff;
border: 1px solid #d7e2e2;
}
.ccbf-step[data-step="confirm"] .ccbf-submit-btn {
min-width: 190px;
box-shadow: 0 4px 14px rgba(26, 101, 99, .22);
margin-left: auto;
margin-right: 0;
}
.ccbf-step[data-step="confirm"] .ccbf-submit-btn:hover {
box-shadow: 0 6px 16px rgba(20, 81, 79, .26);
}
/* ---- Buttons ---- */
.ccbf-back-btn,
.ccbf-next-btn,
.ccbf-submit-btn,
.ccbf-review-btn {
display: inline-block;
padding: 10px 22px;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
border: none;
transition: background .2s;
margin-right: 10px;
margin-top: 8px;
}
.cc-booking-form button.ccbf-back-btn,
.cc-booking-form button.ccbf-next-btn,
.cc-booking-form button.ccbf-submit-btn,
.cc-booking-form button.ccbf-review-btn {
appearance: none;
-webkit-appearance: none;
background-image: none;
}
.ccbf-back-btn {
background: #f0f0f0;
color: #333;
}
.ccbf-back-btn:hover {
background: #e0e0e0;
}
.ccbf-next-btn,
.ccbf-review-btn,
.ccbf-submit-btn {
background: var(--ccbf-primary);
color: #fff;
}
.cc-booking-form button.ccbf-next-btn:focus,
.cc-booking-form button.ccbf-review-btn:focus,
.cc-booking-form button.ccbf-submit-btn:focus {
background: var(--ccbf-primary);
color: #fff;
outline: none;
box-shadow: 0 0 0 3px var(--ccbf-primary-soft);
}
.cc-booking-form button.ccbf-next-btn:active,
.cc-booking-form button.ccbf-review-btn:active,
.cc-booking-form button.ccbf-submit-btn:active {
background: var(--ccbf-primary);
color: #fff;
}
.ccbf-next-btn:hover,
.ccbf-review-btn:hover,
.ccbf-submit-btn:hover {
background: var(--ccbf-primary-dark);
}
.ccbf-submit-btn:disabled {
opacity: .6;
cursor: not-allowed;
}
.ccbf-step[data-step="time"] input[type="checkbox"][name="repeat_enabled"] {
width: 22px;
height: 22px;
margin-right: 8px;
vertical-align: middle;
accent-color: var(--ccbf-primary);
}
.ccbf-step[data-step="time"] .ccbf-detail-row:has(input[name="repeat_enabled"]) {
margin-top: 48px;
padding: 12px 14px;
border: 1px solid #d9e6e5;
border-radius: 10px;
background: #f8fbfb;
}
.ccbf-step[data-step="time"] .ccbf-detail-row:has(input[name="repeat_enabled"]) label {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin-bottom: 0;
/* Without this the label takes .ccbf-step's 18px heading size, which
dwarfs the 13px controls it opens. */
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
.ccbf-step[data-step="time"] .ccbf-repeat-config {
border: 1px solid #d9e6e5;
border-radius: 10px;
padding: 12px 14px;
background: #fff;
margin-top: 10px;
}
.ccbf-repeat-discount-hint {
display: block;
margin: 6px 0 0;
padding: 7px 12px;
background: #d1fae5;
color: #065f46;
border: 1px solid #6ee7b7;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
}
.ccbf-step[data-step="time"] .ccbf-time-next-btn {
float: right;
margin-right: 0;
}
.ccbf-repeat-frequency-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
label.ccbf-repeat-frequency-option {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border: 1px solid #d7e2e2;
border-radius: 8px;
background: #fff;
cursor: pointer;
/* These are