/* Desktop contact dock (inc/contact-dock.php): book, call, message, directions, bottom-right from 992px.
   Colours come from the site's tokens, so every clinic's dock wears its own brand. */
#odtmDesktopFloatingFooter.od-dock,
#odtmMobileFloatingFooter.od-mbar {
	--od-dock-brand: var(--od-action-primary-bg, var(--gs-colorcolor4, #065b99));
	--od-dock-brand-hover: var(--od-action-primary-bg-hover, var(--gs-colorcolor1, #333));
	--od-dock-on-brand: var(--od-action-primary-text, var(--gs-colorcolor9, #fff));
	--od-dock-accent: var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
	--od-dock-ink: var(--od-text-primary, #1f2a30);
	--od-dock-muted: #5d6d75;
	--od-dock-line: #dfe6ea;
	--od-dock-tint: color-mix(in srgb, var(--od-dock-accent) 10%, #fff);
}
#odtmDesktopFloatingFooter.od-dock {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	left: auto;
	z-index: 99;
	align-items: stretch;
	height: 44px;
	padding: 3px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(20, 40, 50, .2), 0 1px 3px rgba(20, 40, 50, .12);
	font-size: 15px;
	line-height: 1.3;
	color: var(--od-dock-ink);
	transition: opacity .2s ease, visibility .2s;
}
@media only screen and (min-width: 992px) {
	#odtmDesktopFloatingFooter.od-dock {
		display: flex;
	}
}
/* Older themes do not set border-box everywhere: without it the full-width buttons overflow their panel. */
#odtmDesktopFloatingFooter.od-dock,
#odtmDesktopFloatingFooter.od-dock *,
#odtmMobileFloatingFooter.od-mbar,
#odtmMobileFloatingFooter.od-mbar * {
	box-sizing: border-box;
}
#odtmDesktopFloatingFooter.od-dock .od-dock__icon,
#odtmMobileFloatingFooter.od-mbar .od-dock__icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}
.od-dock .od-dock__cta {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 13px;
	border-radius: 999px;
	background: var(--od-dock-brand);
	font-size: 14px;
	color: var(--od-dock-on-brand);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s;
}
.od-dock .od-dock__cta .od-dock__icon {
	width: 16px;
	height: 16px;
}
.od-dock .od-dock__cta:hover {
	background: var(--od-dock-brand-hover);
	color: var(--od-dock-on-brand);
}
.od-dock .od-dock__sep {
	width: 1px;
	margin: 9px 3px 9px 6px;
	background: var(--od-dock-line);
}
.od-dock .od-dock__item {
	position: static;
	display: flex;
}
.od-dock summary {
	list-style: none;
	cursor: pointer;
}
.od-dock summary::-webkit-details-marker {
	display: none;
}
.od-dock .od-dock__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px;
	border-radius: 999px;
	color: var(--od-dock-accent);
	text-decoration: none;
	transition: background-color .15s;
}
.od-dock .od-dock__btn:hover,
.od-dock .od-dock__item[open] > summary {
	background: var(--od-dock-tint);
}
.od-dock :is(a, summary, button):focus-visible {
	outline: 3px solid var(--od-dock-accent);
	outline-offset: 2px;
}
.od-dock .od-dock__tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--od-dock-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s;
}
.od-dock .od-dock__btn:is(:hover, :focus-visible) .od-dock__tip {
	opacity: 1;
	visibility: visible;
}
.od-dock.is-open .od-dock__tip {
	display: none;
}

/* Chat launcher: a face and a visible label, like the chat services' own launchers. */
.od-dock .od-dock__chat {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 3px;
	padding: 0 12px 0 3px;
	border-radius: 999px;
	background: var(--od-dock-tint);
	color: var(--od-dock-ink);
	transition: background-color .15s;
}
.od-dock .od-dock__chat:hover,
.od-dock .od-dock__item--chat[open] > summary {
	background: color-mix(in srgb, var(--od-dock-accent) 18%, #fff);
}
.od-dock .od-dock__face {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
}
.od-dock .od-dock__face img,
.od-dock .od-dock__head img {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 30%;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--od-dock-accent);
}
.od-dock .od-dock__face-blank {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--od-dock-accent);
	color: #fff;
}
.od-dock .od-dock__badge {
	position: absolute;
	right: -3px;
	bottom: -2px;
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--od-dock-accent);
	color: #fff;
}
.od-dock .od-dock__badge .od-dock__icon {
	width: 9px;
	height: 9px;
	stroke-width: 2.8;
}
.od-dock .od-dock__chat-text {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
}
.od-dock .od-dock__chat-text small {
	font-size: 12px;
	font-weight: 500;
	color: var(--od-dock-muted);
}

/* Panels */
.od-dock .od-dock__pop {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	width: 288px;
	max-height: calc(100vh - 120px);
	overflow: auto;
	padding: 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 36px rgba(20, 40, 50, .24);
	color: var(--od-dock-ink);
	text-align: left;
}
.od-dock .od-dock__pop p {
	margin: 0;
	line-height: 1.3;
}
.od-dock .od-dock__eyebrow {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--od-dock-muted);
}
.od-dock .od-dock__office + .od-dock__office {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--od-dock-line);
}
.od-dock .od-dock__office-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
}
.od-dock .od-dock__numline {
	display: flex;
	align-items: center;
	gap: 2px;
}
.od-dock .od-dock__num {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--od-dock-muted);
}
.od-dock .od-dock__numline--lead .od-dock__num {
	font-size: 17px;
	font-weight: 700;
	color: var(--od-dock-ink);
}
.od-dock .od-dock__pop .od-dock__today {
	display: block;
	margin: 2px 0 10px;
	font-size: 12.5px;
	color: var(--od-dock-muted);
}
.od-dock .od-dock__go--fill {
	width: 100%;
	gap: 6px;
}
.od-dock .od-dock__go .od-dock__icon,
.od-dock .od-dock__pill .od-dock__icon {
	width: 13px;
	height: 13px;
	stroke-width: 2.4;
}
.od-dock .od-dock__rows {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}
.od-dock .od-dock__orow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--od-dock-line);
}
.od-dock .od-dock__rows--inline .od-dock__orow {
	padding: 6px 8px;
	border-top: 0;
}
.od-dock .od-dock__orow-main {
	min-width: 0;
}
.od-dock .od-dock__pop .od-dock__orow .od-dock__today {
	margin: 0;
	font-size: 12px;
}
.od-dock .od-dock__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--od-dock-brand);
	color: var(--od-dock-on-brand);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.od-dock .od-dock__pill:hover {
	background: var(--od-dock-brand-hover);
	color: var(--od-dock-on-brand);
}
.od-dock .od-dock__row {
	display: flex;
	gap: 8px;
}
.od-dock .od-dock__go {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 10px;
	border: 1.5px solid var(--od-dock-accent);
	border-radius: 999px;
	background: #fff;
	color: var(--od-dock-accent);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.od-dock .od-dock__go--fill {
	border-color: var(--od-dock-brand);
	background: var(--od-dock-brand);
	color: var(--od-dock-on-brand);
}
.od-dock .od-dock__go--fill:hover {
	background: var(--od-dock-brand-hover);
	color: var(--od-dock-on-brand);
}
.od-dock .od-dock__hint {
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--od-dock-muted);
}
.od-dock .od-dock__head {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 0 2px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--od-dock-line);
}
.od-dock .od-dock__head .od-dock__face-blank {
	flex: 0 0 40px;
}
.od-dock .od-dock__head-name {
	font-size: 14.5px;
	font-weight: 700;
}
.od-dock .od-dock__head .od-dock__hint {
	margin-top: 0;
}
.od-dock .od-dock__opt {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	padding: 8px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--od-dock-ink);
	font: inherit;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.od-dock .od-dock__opt--main {
	background: var(--od-dock-tint);
}
.od-dock .od-dock__opt--main:hover {
	background: color-mix(in srgb, var(--od-dock-accent) 18%, #fff);
}
.od-dock .od-dock__opt--static {
	padding-bottom: 0;
	cursor: default;
}
.od-dock .od-dock__opt[aria-busy="true"] {
	cursor: progress;
}
.od-dock .od-dock__opt-title {
	display: block;
	font-weight: 700;
}
.od-dock .od-dock__opt small {
	display: block;
	font-size: 12.5px;
	color: var(--od-dock-muted);
}
.od-dock .od-dock__opt-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: var(--od-dock-brand);
	color: var(--od-dock-on-brand);
}
.od-dock .od-dock__opt-icon--soft {
	background: var(--od-dock-tint);
	color: var(--od-dock-accent);
}
.od-dock .od-dock__pop--chat .od-dock__office {
	padding: 0 8px;
}
.od-dock .od-dock__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phone contact bar (inc/contact-dock.php render_mobile): Book Free Consult + labelled Call, Text (or Chat), Map. */
#odtmMobileFloatingFooter.od-mbar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--od-dock-line);
	box-shadow: 0 -6px 20px rgba(20, 40, 50, .1);
	font-size: 15px;
	line-height: 1.3;
	color: var(--od-dock-ink);
}
@media only screen and (min-width: 992px) {
	#odtmMobileFloatingFooter.od-mbar {
		display: none;
	}
}
@media only screen and (max-width: 991.98px) {
	body:has(#odtmMobileFloatingFooter.od-mbar) {
		padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); /* the last content never sits under the bar */
	}
}
.od-mbar .od-mbar__cta {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--od-dock-brand);
	color: var(--od-dock-on-brand);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.od-mbar .od-mbar__cta:hover,
.od-mbar .od-mbar__cta:focus {
	color: var(--od-dock-on-brand);
}
#odtmMobileFloatingFooter.od-mbar .od-mbar__cta .od-dock__icon {
	width: 17px;
	height: 17px;
}
.od-mbar .od-mbar__items {
	display: flex;
	flex: 0 0 auto;
}
/* On the booking page the Book button is left out: the three actions share the bar. */
.od-mbar:not(:has(.od-mbar__cta)) .od-mbar__items {
	flex: 1 1 auto;
	justify-content: space-around;
}
.od-mbar .od-mbar__it {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 54px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--od-dock-accent);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.od-mbar .od-mbar__it:active,
.od-mbar .od-mbar__it:has(+ .od-sheet:popover-open) {
	background: var(--od-dock-tint);
}
#odtmMobileFloatingFooter.od-mbar .od-mbar__it .od-dock__icon {
	width: 22px;
	height: 22px;
}
.od-mbar .od-mbar__face {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
}
.od-mbar .od-mbar__face img {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 30%;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--od-dock-accent);
}
.od-mbar :is(a, button):focus-visible {
	outline: 3px solid var(--od-dock-accent);
	outline-offset: 2px;
}

/* Bottom sheets (popover). */
.od-mbar .od-sheet {
	position: fixed;
	inset: auto 0 0 0;
	width: 100%;
	max-width: none;
	max-height: 80vh;
	margin: 0;
	overflow: auto;
	padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	border: 0;
	border-radius: 18px 18px 0 0;
	background: #fff;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
	color: var(--od-dock-ink);
}
.od-mbar .od-sheet::backdrop {
	background: rgba(10, 20, 30, .35);
}
.od-mbar .od-sheet p {
	margin: 0;
	line-height: 1.3;
}
.od-mbar .od-sheet__grab {
	display: block;
	width: 40px;
	height: 5px;
	margin: 0 auto 12px;
	border-radius: 3px;
	background: #cfd8de;
}
.od-mbar .od-sheet__close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #eef2f4;
	color: var(--od-dock-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.od-mbar .od-sheet .od-dock__eyebrow {
	margin: 4px 0 8px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--od-dock-muted);
}
.od-mbar .od-sheet .od-dock__orow {
	padding: 12px 0;
}
.od-mbar .od-sheet .od-dock__office-name {
	font-size: 16px;
}
.od-mbar .od-sheet .od-dock__today {
	display: block;
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--od-dock-muted);
}
.od-mbar .od-sheet .od-dock__num {
	font-size: 14px;
}
.od-mbar .od-sheet .od-dock__numline--lead .od-dock__num {
	font-size: 18px;
}
.od-mbar .od-sheet .od-dock__pill {
	height: 40px;
	padding: 0 18px;
	font-size: 15px;
}
.od-mbar .od-sheet .od-dock__opt {
	padding: 12px;
	font-size: 16px;
}

/* QR code that starts a text on the visitor's phone (computers and tablets). */
.od-dock .od-dock__scan {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--od-dock-line);
}
.od-dock .od-dock__qr {
	width: 88px;
	height: 88px;
	flex: 0 0 88px;
	padding: 4px;
	border: 1px solid var(--od-dock-line);
	border-radius: 8px;
	background: #fff;
}
.od-dock .od-dock__qr svg,
#odtmMobileFloatingFooter .od-dock__qr svg { /* the old bar's rule sizes every svg in it to 20px */
	display: block;
	width: 100%;
	height: 100%;
}
.od-dock .od-dock__scan .od-dock__hint {
	margin: 0;
}
.od-dock .od-dock__numline--lead + .od-dock__scan {
	margin-top: 8px;
	padding-top: 0;
	border-top: 0;
}
.od-dock .od-dock__textlink {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--od-dock-accent);
}
.od-dock .od-dock__qrfold summary {
	display: inline-block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--od-dock-accent);
	text-decoration: underline;
	cursor: pointer;
}
.od-dock .od-dock__qrfold .od-dock__scan {
	border-top: 0;
	margin-top: 6px;
	padding-top: 0;
}
.od-mbar .od-mbar__it--tablet {
	display: none;
}
@media only screen and (min-width: 600px) {
	.od-mbar .od-mbar__it--phone {
		display: none;
	}
	.od-mbar .od-mbar__it--tablet {
		display: flex;
	}
}
@media only screen and (max-width: 599.98px) {
	.od-mbar .od-sheet :is(.od-dock__scan, .od-dock__qrfold) {
		display: none; /* phones text straight away */
	}
}

/* Stay out of the way: never over an open cookie banner (ours or Complianz), never with the chat window open. */
html:not(:has(#orthosites-local-consent)) body:has(#odc-banner:not([hidden])) #odtmDesktopFloatingFooter.od-dock, /* local copies hide the banner (kit mu-plugin) */
body:has(.cmplz-cookiebanner.cmplz-show) #odtmDesktopFloatingFooter.od-dock,
body:has(#podium-modal) #odtmDesktopFloatingFooter.od-dock,
html:not(:has(#orthosites-local-consent)) body:has(#odc-banner:not([hidden])) #odtmMobileFloatingFooter.od-mbar,
body:has(.cmplz-cookiebanner.cmplz-show) #odtmMobileFloatingFooter.od-mbar,
body:has(#podium-modal) #odtmMobileFloatingFooter.od-mbar {
	opacity: 0;
	visibility: hidden;
}
/* Podium: its launcher and greeting stay hidden; while its window is open, its round button is the close. */
html.od-chat-podium #podium-prompt,
html.od-chat-podium body:not(:has(#podium-modal)) #podium-bubble {
	display: none !important;
}
@media print {
	#odtmMobileFloatingFooter.od-mbar,
	#odtmDesktopFloatingFooter.od-dock {
		display: none !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.od-dock,
	.od-dock *,
	.od-mbar,
	.od-mbar * {
		transition: none !important;
	}
}