/* ============================================================
   Careby re-skin of the LatePoint booking popup
   Loaded only by template-careby.php (scoped to the Careby page).
   Maps LatePoint's DOM to the Careby "request-flow" design spec.
   Uses !important because LatePoint's own CSS loads after this file.
   Tokens (--cb-*) come from template-careby.css on the same page.
   ============================================================ */

/* ---- modal frame ---- */
.latepoint-lightbox-i{
	position:relative!important;
	border-radius:22px!important;overflow:hidden!important;
	max-width:1140px!important;width:min(1140px,96vw)!important;
	box-shadow:0 30px 90px rgba(24,27,30,.30)!important;background:#fff!important;
	font-family:var(--cb-sans)!important;color:var(--cb-ink)!important;
}
.latepoint-booking-form-element{min-height:0!important;align-items:stretch!important;
	font-family:var(--cb-sans)!important;color:var(--cb-ink)!important}
/* content column must fill the gap between rail and summary — drop LatePoint's
   max-width:470px cap so flex:1 expands and no empty band is left on the right. */
.latepoint-form-w{min-height:0!important;max-width:none!important;flex:1 1 auto!important}
@media (min-width:761px){
	/* Desktop follows the step's content height. On short viewports the whole
	   overlay scrolls, keeping the rail, heading, body and footer in one frame
	   instead of introducing a scrollbar inside the form body. */
	.latepoint-lightbox-w{
		display:flex!important;flex-direction:column!important;align-items:center!important;
		overflow-y:auto!important;padding:16px 0!important;box-sizing:border-box!important}
	.latepoint-lightbox-i{
		position:relative!important;top:auto!important;left:auto!important;transform:none!important;
		flex:0 0 auto!important;margin:auto 0!important;max-height:none!important}
	.latepoint-booking-form-element,
	.latepoint-form-w{height:auto!important;max-height:none!important}
	.latepoint-form-w{display:flex!important;flex-direction:column!important}
	.latepoint-heading-w{flex:0 0 auto!important}
	.latepoint-form-w .latepoint-body{
		flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important}
	.latepoint-form-w .latepoint-footer{position:static!important;flex:0 0 auto!important}
}
/* The summary is position:absolute over the right of the modal. LatePoint clears
   it with padding-right on the form wrapper, but inconsistently (0 on the service
   step, 330px elsewhere). Force it on every with-summary step so the content
   column width is consistent and the summary always sits flush at the right. */
.latepoint-with-summary .latepoint-booking-form-element{padding-right:230px!important}
/* The service choice and confirmation screens use the reference's two-column
   frame. Their summaries are intentionally absent even when LatePoint has
   already populated summary values. */
.latepoint-with-summary .latepoint-booking-form-element.current-step-services,
.latepoint-with-summary .latepoint-booking-form-element.current-step-confirmation{padding-right:0!important}
.latepoint-booking-form-element.current-step-services .latepoint-summary-w,
.latepoint-booking-form-element.current-step-confirmation .latepoint-summary-w{display:none!important}

/* Close button: LatePoint renders TWO — the form-heading one (clipped by a
   translateY transform) and the lightbox one (defaults to static and drops to
   the bottom as a stray circle, leaving a dead band). Hide the heading close;
   anchor the lightbox close to the modal's true top-right corner so there is
   exactly one fully-visible close and no bottom shell. */
.latepoint-form .latepoint-lightbox-close,
.latepoint-heading-w .latepoint-lightbox-close{display:none!important}
.latepoint-lightbox-i > .latepoint-lightbox-close{
	position:absolute!important;top:14px!important;right:14px!important;left:auto!important;bottom:auto!important;
	transform:none!important;margin:0!important;
	width:28px!important;height:28px!important;border-radius:50%!important;
	background:#fff!important;border:1px solid #EAE8E2!important;color:var(--cb-grey)!important;opacity:1!important;z-index:60!important;
	display:flex!important;align-items:center!important;justify-content:center!important;
	box-shadow:none!important}
.latepoint-lightbox-i > .latepoint-lightbox-close:hover{background:var(--cb-green-tint)!important;border-color:var(--cb-green-line)!important}
.latepoint-lightbox-i > .latepoint-lightbox-close i,
.latepoint-lightbox-i > .latepoint-lightbox-close svg{display:none!important}
/* Draw a crisp × with an inline SVG. LatePoint's icon-font glyph doesn't load
   here and a font ✕ renders unevenly; this same SVG is used on the AOC close so
   the two buttons are identical. */
.latepoint-lightbox-i > .latepoint-lightbox-close::before{content:""!important;width:14px!important;height:14px!important;display:block!important;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237a868b" stroke-width="2" stroke-linecap="round"><path d="M6 6 L18 18 M18 6 L6 18"/></svg>') center/14px no-repeat!important}

/* ---- layout: rail + content + summary ---- */
/* Summary keeps LatePoint's original style (teal header + values, label above
   value); we only fix the column width and force 2 items per row. */
.latepoint-summary-w{flex:0 0 230px!important;width:230px!important;max-width:230px!important;box-sizing:border-box!important}
.latepoint-summary-w .os-summary-lines{display:grid!important;grid-template-columns:1fr!important;gap:.4rem!important}
/* drop LatePoint's decorative hatch around the header; use Careby colours */
.latepoint-summary-w .summary-header .os-lines{display:none!important}
/* keep the right-aligned SUMMARY title clear of the top-right close button */
.latepoint-summary-w .summary-header{padding-right:62px!important}
.latepoint-summary-w .summary-header,.latepoint-summary-w .summary-header span{color:var(--cb-ink)!important}
.latepoint-summary-w .os-summary-label{color:var(--cb-grey)!important}
.latepoint-summary-w .os-summary-value{color:var(--cb-green)!important}
.latepoint-side-panel{
	background:#E9F3EF!important;border-right:1px solid var(--cb-line)!important;
	flex:0 0 300px!important;width:300px!important;max-width:300px!important;
	display:flex!important;flex-direction:column!important;
	padding:26px 24px!important;box-sizing:border-box!important;
}
/* The reference narrows the rail only when the 230px summary is present. */
.latepoint-with-summary .latepoint-booking-form-element:not(.current-step-services):not(.current-step-confirmation) .latepoint-side-panel{
	flex-basis:280px!important;width:280px!important;max-width:280px!important}
/* Careby logo (top) */
.latepoint-side-panel::before{
	content:"";display:block;height:26px;flex:0 0 auto;margin-bottom:26px;
	background:url(../img/careby/logo-wordmark.png) left center / auto 26px no-repeat;
}
/* Powered by (bottom) */
.latepoint-side-panel::after{
	content:"Powered by GoToDoctor.ca";display:block;flex:0 0 auto;
	margin-top:.85rem;padding-top:0;border-top:0;
	text-align:center;font-size:.72rem;letter-spacing:.01em;color:var(--cb-grey)}

/* ---- progress stepper ----
   LatePoint's native stepper uses absolute-positioned internals with locked
   column widths and screen-reader-only names (forced blue pills) that resist
   restyling, so we hide it and render our own clean stepper from its data
   (built in section-scripts.php): a row of numbered / ✓ circles with the step
   name beneath each. Our own classes are free of LatePoint's locked rules. */
.latepoint-progress{margin-bottom:1.4rem!important}
.latepoint-progress > ul{display:none!important}
.latepoint-progress .cb-stepper{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;
	gap:4px!important;width:100%!important}
.latepoint-progress .cb-step{flex:1 1 0!important;min-width:0!important;display:flex!important;flex-direction:column!important;
	align-items:center!important;gap:5px!important;text-align:center!important;background:none!important}
.latepoint-progress .cb-step-badge{flex:0 0 auto!important;width:26px!important;height:26px!important;box-sizing:border-box!important;
	border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;
	font-size:.78rem!important;font-weight:700!important;line-height:1!important;
	background:#fff!important;border:1px solid var(--cb-line)!important;color:var(--cb-grey)!important}
.latepoint-progress .cb-step.is-done .cb-step-badge,
.latepoint-progress .cb-step.is-active .cb-step-badge{background:var(--cb-green)!important;border-color:var(--cb-green)!important;color:#fff!important}
.latepoint-progress .cb-step-name{font-size:.56rem!important;line-height:1.2!important;color:var(--cb-grey-dim)!important;
	white-space:normal!important;word-break:break-word!important}
.latepoint-progress .cb-step.is-active .cb-step-name{color:var(--cb-green)!important;font-weight:700!important}

/* ---- step description (illustration + title + text) ---- */
.latepoint-step-desc-w{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;
	align-items:center!important;justify-content:center!important;text-align:center!important;gap:.1rem!important}
.latepoint-step-desc,.latepoint-step-desc-library{text-align:center!important}
/* step illustration icon — enlarged (high specificity to beat LatePoint sizing) */
.latepoint-lightbox-i .latepoint-step-desc-w .latepoint-desc-media.img-w{width:58px!important;height:58px!important;border-radius:50%!important;
	margin:0 auto 14px!important;background-color:#fff!important;border:1px solid var(--cb-green-line)!important;
	background-size:34px auto!important;background-position:center!important;background-repeat:no-repeat!important;
	display:flex!important;align-items:center!important;justify-content:center!important}
.latepoint-lightbox-i .latepoint-step-desc-w .latepoint-desc-media.img-w img,
.latepoint-lightbox-i .latepoint-step-desc-w .latepoint-desc-media.img-w svg{width:34px!important;height:34px!important}
/* qha_time (Pick a time) is a custom step with no plugin icon PNG — its inline
   background-image 404s, leaving an empty circle. Reuse the datepicker illustration
   (same style/colour set) so the step matches Service/Patient. Overrides the inline url. */
.latepoint-booking-form-element.current-step-qha_time .latepoint-step-desc-w .latepoint-desc-media.img-w{
	background-image:url('../../../plugins/latepoint/public/images/steps/colors/blue/datepicker.png')!important}
.latepoint-desc-title{font-family:var(--cb-display)!important;font-weight:700!important;
	font-size:15px!important;line-height:1.5!important;color:var(--cb-ink)!important;margin:0 0 7px!important}
.latepoint-desc-content{font-size:12.5px!important;color:var(--cb-grey-dim)!important;line-height:1.55!important;max-width:24ch!important;margin:0 auto!important}

/* ---- questions ---- */
.latepoint-questions{flex:0 0 auto!important;text-align:center!important;margin-top:1.1rem!important;
	padding-top:14px!important;border-top:1px solid var(--cb-line)!important}
.latepoint-questions h5{color:var(--cb-green)!important;font-weight:700!important;font-size:.82rem!important;margin:0 0 .25rem!important}
.latepoint-questions p{color:var(--cb-grey-dim)!important;font-size:.82rem!important;margin:0!important}

/* ---- content area ---- */
.latepoint-form-w{padding:28px 32px 24px!important;background:#fff!important}
/* drop the (misaligned) header divider under the content + summary headers */
.latepoint-heading-w{position:relative!important;margin-bottom:20px!important;border-bottom:0!important;padding:0 72px 0 0!important}
.latepoint-summary-w .summary-header{border-bottom:0!important}
.latepoint-heading-w .os-heading-text,.latepoint-heading-w h3{font-family:var(--cb-display)!important;
	font-weight:700!important;letter-spacing:0!important;font-size:20px!important;line-height:1.5!important;color:var(--cb-ink)!important;margin:0!important}
.latepoint-heading-w .cb-step-subtitle{font:400 13px/1.5 var(--cb-sans)!important;color:var(--cb-grey-dim)!important;margin-top:0!important}
.latepoint-heading-w .gtd-heading-required-note{position:absolute!important;top:7px!important;right:0!important;
	font:500 11px/1.1 var(--cb-sans)!important;color:var(--cb-grey)!important;letter-spacing:.02em!important}
.latepoint-heading-w .gtd-heading-required-asterisk{color:#D92D20!important}
.latepoint-step-content-text-centered h4{font-family:var(--cb-display)!important;font-weight:700!important;
	font-size:1.15rem!important;color:var(--cb-ink)!important}
.latepoint-step-content-text-centered div{color:var(--cb-grey-dim)!important}

/* ---- confirmation ---- */
.current-step-confirmation .latepoint-heading-w,
.current-step-confirmation .latepoint-footer,
.current-step-confirmation .latepoint-step-desc-w > .latepoint-step-desc{display:none!important}
.latepoint-w .current-step-confirmation .latepoint-form-w .latepoint-body{
	display:flex!important;align-items:center!important;justify-content:center!important;
	overflow:hidden!important;min-height:400px!important}
.current-step-confirmation .latepoint-body > *:not(.cb-confirmation){display:none!important}
.cb-confirmation{max-width:430px!important;margin:auto!important;padding:2rem!important;text-align:center!important}
.cb-confirmation-icon{width:54px!important;height:54px!important;margin:0 auto 16px!important;border-radius:50%!important;
	display:flex!important;align-items:center!important;justify-content:center!important;
	background:var(--cb-green-tint)!important;border:1px solid var(--cb-green-line)!important;color:var(--cb-green)!important}
.cb-confirmation-icon svg{width:25px!important;height:25px!important;display:block!important}
.cb-confirmation h3{font:700 20px/1.5 var(--cb-display)!important;color:var(--cb-ink)!important;margin:0 0 6px!important}
.cb-confirmation p{font:400 14px/1.5 var(--cb-sans)!important;color:var(--cb-grey-dim)!important;margin:0!important}

/* ---- selectable option cards (services, consultation type, date method) ---- */
.latepoint-booking-form-element .os-item.os-selectable-item,
.latepoint-booking-form-element .os-item.os-priced-item{
	background:#fff!important;border:1px solid var(--cb-line)!important;border-radius:14px!important;
	padding:1rem 1.2rem!important;margin-bottom:.7rem!important;cursor:pointer!important;
	transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease!important}
/* drop the inner box (.os-item-i) so the card has a single clean border */
.latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i{background:none!important;border:0!important;box-shadow:none!important}
.latepoint-booking-form-element .os-item.os-selectable-item:hover,
.latepoint-booking-form-element .os-item.os-priced-item:hover{
	border-color:var(--cb-green)!important;background:var(--cb-green-tint)!important}
.latepoint-booking-form-element .os-item.os-selected-item,
.latepoint-booking-form-element .os-item.selected{
	border-color:var(--cb-green)!important;box-shadow:0 0 0 1px var(--cb-green) inset!important}

/* ---- form fields (Patient Details, Contact, etc.) ---- */
.latepoint-body .os-form-group{margin-bottom:1rem!important}
.latepoint-body .os-form-label,.latepoint-body .os-form-group > label{display:block!important;
	font-size:.82rem!important;font-weight:600!important;color:var(--cb-ink)!important;margin-bottom:.4rem!important}
.latepoint-body .os-form-control,
.latepoint-body input[type="text"],.latepoint-body input[type="email"],.latepoint-body input[type="tel"],
.latepoint-body input[type="number"],.latepoint-body input[type="date"],.latepoint-body select,.latepoint-body textarea{
	width:100%!important;border:1px solid var(--cb-line)!important;border-radius:10px!important;
	padding:.7rem .9rem!important;font:400 .95rem/1.4 var(--cb-sans)!important;color:var(--cb-ink)!important;
	background:#fff!important;min-height:46px!important;box-shadow:none!important}
.latepoint-body .os-form-control:focus,
.latepoint-body input:focus,.latepoint-body select:focus,.latepoint-body textarea:focus{
	border-color:var(--cb-green)!important;outline:none!important;box-shadow:0 0 0 3px rgba(1,103,88,.13)!important}
.latepoint-body input::placeholder,.latepoint-body textarea::placeholder{color:var(--cb-grey)!important}
.latepoint-body input[type="checkbox"],.latepoint-body input[type="radio"]{accent-color:var(--cb-green)!important}
/* hide the French option in the language field (CSS persists across AJAX re-renders) */
#customer_custom_fields_cf_language option[value="French"]{display:none!important}
/* Desktop grows with the form content; the mobile rule below deliberately
   restores body scrolling for its full-screen layout. */
.latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-body{overflow-y:visible!important;padding:0!important}
/* validation message -> Careby alert */
.latepoint-message-error,.latepoint-message.latepoint-message-error{
	background:var(--cb-alert-bg)!important;color:var(--cb-alert-ink)!important;
	border:1px solid var(--cb-alert-line)!important;border-radius:10px!important;
	padding:.85rem 1rem!important;font-size:.85rem!important;line-height:1.5!important;margin-bottom:1rem!important}

/* ---- contact step: "Want someone to join your visit?" rep-block ---- */
/* one green box (reference .rep-block) wraps the toggle AND the fields together */
.latepoint-form-w .gtd-rep-block{margin:.4rem 0 .6rem!important;border:1px solid var(--cb-green-line)!important;
	border-radius:12px!important;background:#E9F3EF!important;padding:.9rem 1.05rem!important;
	transition:border-color .15s ease!important}
.latepoint-form-w .gtd-rep-block:hover{border-color:var(--cb-green-soft)!important}
.latepoint-form-w .gtd-rep-check{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important}
.latepoint-form-w .gtd-rep-toggle{display:flex!important;align-items:flex-start!important;gap:.7rem!important;cursor:pointer!important;margin:0!important}
.latepoint-form-w .gtd-rep-box{flex:0 0 auto!important;width:20px!important;height:20px!important;border-radius:5px!important;
	border:2px solid var(--cb-green)!important;background:#fff!important;position:relative!important;margin-top:1px!important;transition:background-color .15s ease!important}
.latepoint-form-w .gtd-rep-check:checked + .gtd-rep-toggle .gtd-rep-box{background:var(--cb-green)!important}
.latepoint-form-w .gtd-rep-check:checked + .gtd-rep-toggle .gtd-rep-box::after{content:""!important;position:absolute!important;left:5px!important;top:1px!important;
	width:6px!important;height:11px!important;border:solid #fff!important;border-width:0 2px 2px 0!important;transform:rotate(45deg)!important}
.latepoint-form-w .gtd-rep-toggle-text{display:flex!important;flex-direction:column!important;gap:.2rem!important}
.latepoint-form-w .gtd-rep-toggle-title{font-weight:700!important;color:var(--cb-ink)!important;font-size:.95rem!important}
.latepoint-form-w .gtd-rep-toggle-desc{font-size:.82rem!important;color:var(--cb-grey-dim)!important;line-height:1.45!important}
.latepoint-form-w .gtd-rep-fields{display:none!important;margin-top:1rem!important}
.latepoint-form-w .gtd-rep-check:checked ~ .gtd-rep-fields{display:block!important}
.latepoint-form-w .gtd-rep-note{font-size:.82rem!important;color:var(--cb-grey)!important;margin-top:.35rem!important}
/* required marker on rep fields — #B42318 is 6.6:1 on white (WCAG AA) */
.latepoint-form-w .gtd-rep-req{color:#B42318!important;font-weight:700!important}
/* contact step: pair Cell+Home, Reason+Reply-by and Doctor+Language into 2 columns
   (reference grid2). Cell+Home are always the first two fields, but the dropdowns have
   display:none conditional fields interleaved (Other Reason / Pharmacy / Prescription…),
   so nth-child would land on hidden fields — target the dropdowns by their stable field
   name instead. Mobile stays 1-col. */
@media (min-width:761px){
	.latepoint-form-w [data-step-name="contact"] .os-step-new-customer-w .os-row > .os-col-12:nth-child(1),
	.latepoint-form-w [data-step-name="contact"] .os-step-new-customer-w .os-row > .os-col-12:nth-child(2),
	.latepoint-form-w [data-step-name="contact"] .os-step-new-customer-w .os-row > .os-col-12:has([name*="cf_4zkIbeeY"]),
	.latepoint-form-w [data-step-name="contact"] .os-step-new-customer-w .os-row > .os-col-12:has([name*="cf_nxwjDAcZ"]),
	.latepoint-form-w [data-step-name="contact"] .os-step-new-customer-w .os-row > .os-col-12:has([name*="cf_7Lkik5fd"]),
	.latepoint-form-w [data-step-name="contact"] .os-step-new-customer-w .os-row > .os-col-12:has([name*="cf_language"]){
		flex:0 0 50%!important;max-width:50%!important;width:50%!important}
	/* paired fields have different label heights ("Reason for today's visit ( required )"
	   wraps to 2 lines vs "Reply by"); bottom-align so the controls line up */
	.latepoint-form-w [data-step-name="contact"] .os-step-new-customer-w .os-row{align-items:flex-end!important}
}
/* patient step: pair First+Last (2,3) and Date of Birth+HIN (5,6) into 2 columns
   (reference grid2). Emergency-contact fields (7+) stay full. Mobile stays 1-col. */
@media (min-width:761px){
	.latepoint-booking-form-element.current-step-custom_fields_for_booking .latepoint-form-w .os-row > .os-col-12:nth-child(2),
	.latepoint-booking-form-element.current-step-custom_fields_for_booking .latepoint-form-w .os-row > .os-col-12:nth-child(3),
	.latepoint-booking-form-element.current-step-custom_fields_for_booking .latepoint-form-w .os-row > .os-col-12:nth-child(5),
	.latepoint-booking-form-element.current-step-custom_fields_for_booking .latepoint-form-w .os-row > .os-col-12:nth-child(6){
		flex:0 0 50%!important;max-width:50%!important;width:50%!important}
	/* HIN ships without a label but Date of Birth has one; bottom-align so the inputs line up */
	.latepoint-booking-form-element.current-step-custom_fields_for_booking .latepoint-form-w .os-row{align-items:flex-end!important}
}

/* ---- date / time step (calendar + slots) ---- */
.latepoint-body .os-monthly-calendar-days-w{border-radius:9px!important;transition:background-color .12s ease!important}
.latepoint-body .os-monthly-calendar-days-w.active{color:var(--cb-ink)!important;font-weight:600!important;cursor:pointer!important}
.latepoint-body .os-monthly-calendar-days-w.active:hover{background:var(--cb-green-tint)!important}
.latepoint-body .os-monthly-calendar-days-w.selected,
.latepoint-body .os-monthly-calendar-days-w.os-selected,
.latepoint-body .os-monthly-calendar-days-w.current{background:var(--cb-green)!important;color:#fff!important}
.latepoint-body .times-header,.latepoint-body .time-selector-w > .times-header{font-family:var(--cb-display)!important;font-weight:700!important;color:var(--cb-ink)!important}
/* Time slots: this site uses a custom day-part picker (dp-* timeline) that
   natively renders as tiny segments with hover-only labels — too small and the
   time is unreadable. Enlarge it into readable, tappable buttons with the label
   always visible and centred. The widget's own CSS is high-specificity and puts
   a translate(-50%,-50%) on the label, so we match its depth (.step-datepicker-w
   chain) and force transform:none. */
/* all slots share a single row; labels are trimmed to the start time only
   (section-scripts.php), so equal-width flex buttons fit comfortably. */
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots{
	display:flex!important;flex-wrap:nowrap!important;width:100%!important;
	gap:.5rem!important;justify-content:center!important;align-items:stretch!important;
	background:none!important;border:0!important;padding:0!important;height:auto!important;margin-top:.5rem!important}
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot{
	position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
	flex:1 1 0!important;min-width:0!important;width:auto!important;height:auto!important;min-height:46px!important;
	padding:.6rem .5rem!important;margin:0!important;transform:none!important;box-shadow:none!important;
	background:var(--cb-green-tint)!important;border:1px solid var(--cb-green-line)!important;border-radius:10px!important;
	color:var(--cb-green-dark)!important;font-weight:600!important;font-size:.95rem!important;cursor:pointer!important;
	transition:background-color .12s ease,border-color .12s ease!important}
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot:hover{
	background:var(--cb-green-line)!important;border-color:var(--cb-green-soft)!important}
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot.selected,
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot.active,
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot.os-selected{
	background:var(--cb-green)!important;border-color:var(--cb-green)!important;color:#fff!important}
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot .dp-label{
	position:static!important;display:block!important;transform:none!important;top:auto!important;left:auto!important;
	width:auto!important;height:auto!important;font-size:.95rem!important;line-height:1.2!important;
	white-space:nowrap!important;text-align:center!important;color:inherit!important;
	background:none!important;border:0!important;padding:0!important;margin:0!important}
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot .dp-label .dp-success-label{
	display:block!important;font-size:.62rem!important;font-weight:700!important;letter-spacing:.04em!important;
	text-transform:uppercase!important;opacity:.92!important;margin:0 0 .1rem!important}
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot .dp-tick,
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot::before,
.latepoint-lightbox-i .step-datepicker-w .os-times-w .timeslots .dp-timeslot::after{display:none!important}

/* ---- footer / nav buttons ---- */
.latepoint-footer,.latepoint-form .latepoint-footer{border-top:1px solid var(--cb-line)!important;padding:1.1rem 0 0!important}
.latepoint-form-w .latepoint-footer{left:32px!important;right:32px!important;width:auto!important}
/* Optional second/third date choices inject Skip with inline absolute centring.
   Restore it to the footer's flex flow and use the normal right-side action slot. */
.current-step-datepicker2 .latepoint-footer .skip-rest,
.current-step-datepicker3 .latepoint-footer .skip-rest{
	position:static!important;top:auto!important;left:auto!important;transform:none!important;margin-left:auto!important}
.latepoint-btn{border-radius:9px!important;font:600 .98rem/1 var(--cb-sans)!important;
	padding:.85rem 1.6rem!important;min-height:46px!important}
.latepoint-btn-primary{background:var(--cb-green)!important;border-color:var(--cb-green)!important;color:#fff!important}
.latepoint-btn-primary:hover{background:var(--cb-green-dark)!important;border-color:var(--cb-green-dark)!important}
.latepoint-btn-white{background:#fff!important;border:1px solid var(--cb-line)!important;color:var(--cb-ink)!important}
.latepoint-btn-white:hover{background:var(--cb-cream)!important}

/* ============================================================
   Front Popup-AOC popups (Appointment options + Location grid)
   re-skinned to the Careby brand to match the booking modal.
   ============================================================ */
.paoc-cb-popup-body.paoc-popup{position:relative!important;font-family:var(--cb-sans)!important;color:var(--cb-ink)!important;
	border-radius:20px!important;overflow:visible!important;box-shadow:0 26px 70px rgba(24,27,30,.28)!important;
	max-width:1180px!important;width:min(1180px,96vw)!important}
.paoc-popup .paoc-popup-con-bg,.paoc-popup .paoc-popup-inr-wrap{border-radius:20px!important;overflow:hidden!important}
.paoc-popup .paoc-popup-con-bg{padding:0!important;background:#fff!important}
.paoc-popup .paoc-popup-content{background:#fff!important}

/* Two-panel LatePoint-style layout (rail + content). The rail is injected by
   section-scripts.php; scope the flex layout to :has(.cb-aoc-rail) so a pop-up that
   isn't matched (no rail injected) falls back to its default layout instead of
   collapsing into an empty flex row. */
.paoc-popup .first-steps:has(.cb-aoc-rail){display:flex!important;align-items:stretch!important;text-align:left!important;
	max-width:none!important;width:100%!important;margin:0!important;padding:0!important;gap:0!important;min-height:600px!important}
.paoc-popup .cb-aoc-rail{flex:0 0 300px!important;box-sizing:border-box!important;
	background:#E9F3EF!important;border-right:1px solid var(--cb-line)!important;
	display:flex!important;flex-direction:column!important;padding:1.6rem 1.5rem 1.4rem!important}
.paoc-popup .cb-aoc-logo{height:30px;flex:0 0 auto;margin-bottom:1.4rem;
	background:url(../img/careby/logo-horizontal.png) left center / auto 30px no-repeat}
.paoc-popup .cb-aoc-mid{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.paoc-popup .cb-aoc-icon{width:74px;height:74px;border-radius:50%;margin:0 auto 1rem;
	background-color:#fff;border:1px solid var(--cb-green-line);background-position:center;background-repeat:no-repeat;background-size:34px auto}
.paoc-popup .cb-aoc-icon.is-svc{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23016758" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.5 8.5 0 0 1-8.5 8.5 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3 8.5 8.5 0 0 1 21 11.5z"/></svg>')}
.paoc-popup .cb-aoc-icon.is-loc{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23016758" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>')}
.paoc-popup .cb-aoc-icon.is-frm{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23016758" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>')}
.paoc-popup .cb-aoc-rh{font-family:var(--cb-display)!important;font-weight:700!important;font-size:1.05rem!important;color:var(--cb-ink)!important;margin:0 0 .4rem!important}
.paoc-popup .cb-aoc-rsub{font-size:.85rem!important;color:var(--cb-grey-dim)!important;line-height:1.5!important;max-width:24ch!important;margin:0 auto!important}
.paoc-popup .cb-aoc-foot{flex:0 0 auto;text-align:center;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--cb-line)}
.paoc-popup .cb-aoc-q{color:var(--cb-green)!important;font-weight:700!important;font-size:.82rem!important;margin:0!important}
.paoc-popup .cb-aoc-qd{color:var(--cb-grey-dim)!important;font-size:.82rem!important;margin:0!important}
.paoc-popup .cb-aoc-pb{font-size:.72rem!important;color:var(--cb-grey)!important;margin:.85rem 0 0!important;letter-spacing:.01em!important}
/* Popup-AOC has no stepper */
.paoc-popup .cb-aoc-stepper{display:none!important}
.paoc-popup .cb-aoc-stepper .cb-step{flex:1 1 0!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:7px!important;text-align:center!important}
.paoc-popup .cb-aoc-stepper .cb-step-badge{flex:0 0 auto!important;width:11px!important;height:11px!important;box-sizing:border-box!important;border-radius:50%!important;font-size:0!important;margin-top:5px!important;background:transparent!important;border:1.5px solid var(--cb-green-soft)!important}
.paoc-popup .cb-aoc-stepper .cb-step.is-active .cb-step-badge{background:var(--cb-green)!important;border-color:var(--cb-green)!important}
.paoc-popup .cb-aoc-stepper .cb-step-name{font-size:.56rem!important;line-height:1.2!important;color:var(--cb-grey-dim)!important}
.paoc-popup .cb-aoc-stepper .cb-step.is-active .cb-step-name{color:var(--cb-green)!important;font-weight:700!important}
/* content panel */
.paoc-popup .cb-aoc-content{flex:1 1 auto!important;min-width:0!important;box-sizing:border-box!important;
	padding:2.2rem 2.2rem!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
.paoc-popup .cb-aoc-content .logo-sec{display:none!important}
/* match the LatePoint content heading (.os-heading-text: 1.55rem / 800 / -.01em) */
.paoc-popup .first-steps h3{font-family:var(--cb-display)!important;font-weight:800!important;letter-spacing:-.01em!important;
	font-size:1.55rem!important;color:var(--cb-ink)!important;margin:0 0 .4rem!important}
.paoc-popup .cb-aoc-content > p{color:var(--cb-grey-dim)!important;font-size:.96rem!important;margin:0 0 1.5rem!important}

/* appointment option cards (.btn-blue) — stack full-width (the plugin defaults
   to flex-wrap:wrap which would split them into columns) */
.paoc-popup .first-steps .btn-sec.btn-blue{display:flex!important;flex-direction:column!important;
	flex-wrap:nowrap!important;align-items:stretch!important;gap:.7rem!important}
.paoc-popup .first-steps .btn-sec.btn-blue > a,
.paoc-popup .first-steps .btn-sec.btn-blue > .popupaoc-button{
	display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:.85rem!important;
	flex:0 0 auto!important;width:100%!important;box-sizing:border-box!important;
	background:#fff!important;border:1px solid var(--cb-line)!important;border-radius:14px!important;
	padding:.8rem 1.1rem!important;color:var(--cb-ink)!important;font-weight:600!important;font-size:1rem!important;
	text-align:left!important;cursor:pointer!important;text-decoration:none!important;
	transition:border-color .15s ease,background-color .15s ease!important;box-shadow:none!important}
.paoc-popup .first-steps .btn-sec.btn-blue > a:hover,
.paoc-popup .first-steps .btn-sec.btn-blue > .popupaoc-button:hover{border-color:var(--cb-green)!important;background:var(--cb-green-tint)!important}
/* leading service icon (injected by section-scripts.php) */
.paoc-popup .btn-sec.btn-blue .cb-opt-ic{flex:0 0 auto!important;width:42px!important;height:42px!important;border-radius:11px!important;
	background:var(--cb-green-tint)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.paoc-popup .btn-sec.btn-blue .cb-opt-ic svg{width:22px!important;height:22px!important;display:block!important}
.paoc-popup .first-steps .btn-sec.btn-blue > a::after,
.paoc-popup .first-steps .btn-sec.btn-blue > .popupaoc-button::after{content:"\203A"!important;color:var(--cb-green)!important;font-size:1.4rem!important;line-height:1!important;flex:0 0 auto!important;margin-left:auto!important}
.paoc-popup .first-steps .btn-sec.btn-blue .latepoint-book-button{background:none!important;border:0!important;padding:0!important;
	color:inherit!important;font:inherit!important;cursor:pointer!important;display:inline!important}

/* province grid (.btn-blue2 — Location step) */
.paoc-popup .first-steps .btn-sec.btn-blue2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.7rem!important}
.paoc-popup .first-steps .btn-sec.btn-blue2 .latepoint-book-button,
.paoc-popup .first-steps .btn-sec.btn-blue2 > a{
	width:auto!important;box-sizing:border-box!important;  /* drop the plugin's width:210px so each fills its grid cell */
	background:var(--cb-green-tint)!important;border:1px solid var(--cb-green-line)!important;border-radius:12px!important;
	padding:.95rem 1rem!important;color:var(--cb-green-dark)!important;font-weight:600!important;font-size:.95rem!important;
	text-align:center!important;cursor:pointer!important;text-decoration:none!important;transition:background-color .15s ease!important}
.paoc-popup .first-steps .btn-sec.btn-blue2 .latepoint-book-button:hover,
.paoc-popup .first-steps .btn-sec.btn-blue2 > a:hover{background:var(--cb-green-line)!important}

/* ESP contact form pop-up (CF7 inside .btn-sec, chained from the "No" option).
   The global bootstrap/CF7 CSS that normally styles .form-control is dequeued
   on this template (careby_dequeue_global_assets), so restyle the form here
   with the booking-modal field treatment. A 4-field form doesn't need the
   1180px option-card shell either — narrow it. */
.paoc-cb-popup-body.paoc-popup:has(.wpcf7){max-width:820px!important;width:min(820px,96vw)!important}
.paoc-popup .first-steps:has(.wpcf7){min-height:480px!important}
.paoc-popup .cb-aoc-content .wpcf7{max-width:560px}
.paoc-popup .cb-aoc-content .wpcf7 p{margin:0 0 1rem}
.paoc-popup .cb-aoc-content .wpcf7 .wpcf7-form-control-wrap{display:block}
.paoc-popup .cb-aoc-content .wpcf7 .form-control{
	width:100%!important;box-sizing:border-box!important;border:1px solid var(--cb-line)!important;border-radius:10px!important;
	padding:.7rem .9rem!important;font:400 .95rem/1.4 var(--cb-sans)!important;color:var(--cb-ink)!important;
	background:#fff!important;min-height:46px!important;box-shadow:none!important}
.paoc-popup .cb-aoc-content .wpcf7 .form-control:focus{
	border-color:var(--cb-green)!important;outline:none!important;box-shadow:0 0 0 3px rgba(1,103,88,.13)!important}
.paoc-popup .cb-aoc-content .wpcf7 .form-control::placeholder{color:var(--cb-grey)!important}
.paoc-popup .cb-aoc-content .wpcf7 .wpcf7-submit{
	width:100%!important;border:0!important;cursor:pointer!important;border-radius:9px!important;
	background:var(--cb-green)!important;color:#fff!important;font:600 .98rem/1 var(--cb-sans)!important;
	padding:.95rem 1.6rem!important;min-height:46px!important;transition:background-color .15s ease!important}
.paoc-popup .cb-aoc-content .wpcf7 .wpcf7-submit:hover{background:var(--cb-green-dark)!important}
.paoc-popup .cb-aoc-content .wpcf7 .wpcf7-not-valid-tip{display:block;color:var(--cb-alert-ink)!important;font-size:.8rem!important;margin-top:.35rem!important}
/* jQuery-validation (jvcf7) messages — its stylesheet is dequeued here too */
.paoc-popup .cb-aoc-content .wpcf7 label.error{display:block!important;color:var(--cb-alert-ink)!important;
	font-size:.8rem!important;font-weight:400!important;margin:.35rem 0 0!important}
.paoc-popup .cb-aoc-content .wpcf7 .form-control.error{border-color:var(--cb-alert-ink)!important}
/* CF7's own stylesheet (dequeued here) hides the response box until there is a
   message; replicate that state handling or an empty alert bar shows on load. */
.paoc-popup .cb-aoc-content .wpcf7 form.init .wpcf7-response-output,
.paoc-popup .cb-aoc-content .wpcf7 form.submitting .wpcf7-response-output,
.paoc-popup .cb-aoc-content .wpcf7 form.resetting .wpcf7-response-output{display:none!important}
.paoc-popup .cb-aoc-content .wpcf7 form.sent .wpcf7-response-output{
	background:#E9F3EF!important;border-color:var(--cb-green-line)!important;color:var(--cb-green-dark)!important}
.paoc-popup .cb-aoc-content .wpcf7 .wpcf7-response-output{
	margin:1rem 0 0!important;padding:.85rem 1rem!important;border:1px solid var(--cb-alert-line)!important;border-radius:10px!important;
	background:var(--cb-alert-bg)!important;color:var(--cb-alert-ink)!important;font-size:.85rem!important;line-height:1.5!important}
/* success panel (#esp-thanks) revealed by the form's own JS after submit */
.paoc-popup .cb-aoc-content .wpcf7 #esp-thanks p{color:var(--cb-grey-dim)!important;font-size:.96rem!important;margin:0 0 .8rem!important}

/* AOC close button — clearly visible, top-right inside the popup */
/* Match the LatePoint modal close exactly: 36px ink circle + the same ✕ glyph
   (the AOC plugin's own × is a bolder FontAwesome SVG, so we hide it). */
.paoc-close-popup.paoc-popup-close{position:absolute!important;top:14px!important;right:14px!important;left:auto!important;bottom:auto!important;
	width:36px!important;height:36px!important;border-radius:50%!important;
	background:var(--cb-ink)!important;color:#fff!important;opacity:1!important;z-index:30!important;
	display:flex!important;align-items:center!important;justify-content:center!important;
	box-shadow:0 2px 10px rgba(24,27,30,.18)!important}
.paoc-close-popup.paoc-popup-close:hover{background:var(--cb-green)!important}
.paoc-close-popup.paoc-popup-close svg{display:none!important}
.paoc-close-popup.paoc-popup-close::before{content:""!important;width:16px!important;height:16px!important;display:block!important;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.4" stroke-linecap="round"><path d="M6 6 L18 18 M18 6 L6 18"/></svg>') center/16px no-repeat!important}

@media (max-width:760px){
	.latepoint-side-panel{display:none!important}
	/* the summary is an absolute overlay reserved via 230px padding-right on the
	   form wrapper; on mobile that would crush the form to a sliver, so hide the
	   summary and drop the reservation to give the content the full width. */
	.latepoint-summary-w{display:none!important}
	.latepoint-with-summary .latepoint-lightbox-i .latepoint-booking-form-element{padding-right:0!important}
	.careby-template .latepoint-lightbox-i{max-height:100vh!important;max-height:100dvh!important}
	.careby-template .latepoint-w .latepoint-booking-form-element{
		display:flex!important;height:auto!important;min-height:0!important;
		max-height:100vh!important;max-height:100dvh!important}
	.careby-template .latepoint-w .latepoint-booking-form-element .latepoint-form-w{
		display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;
		max-height:100vh!important;max-height:100dvh!important;padding:1.5rem 1.25rem!important}
	.careby-template .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-body{
		flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important}
	.careby-template .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-footer{
		position:static!important;flex:0 0 auto!important}
	.careby-template .latepoint-w .current-step-confirmation .latepoint-form-w .latepoint-body{min-height:0!important}
	.paoc-popup .cb-aoc-rail{display:none!important}
	.paoc-popup .first-steps{min-height:0!important}
	.paoc-popup .cb-aoc-content{padding:1.75rem 1.4rem!important}
	.paoc-popup .first-steps .btn-sec.btn-blue2{grid-template-columns:1fr!important}
}