/* ============================================================
   CLARITY ASSESSMENTS - SimplyBook.me BOOKING PAGE CSS
   Paste into: Custom Features -> Custom CSS -> booking-page box
   (the widget has its own file: simplybook-widget.css)
   ============================================================

   BRAND TOKENS (reference only - SimplyBook.me strips :root
   variables in some themes, so hex values are written inline
   throughout rather than as var() calls.)

   Deep teal      #172E2A   headers, dark surfaces
   Rust           #855434   primary action / accent
   Rust hover     #6D4329
   Cream          #F8F6F2   light surface
   Border cream   #EFE6DD   hairlines, dividers
   Mushroom       #7D6E62   secondary / caption text
   Body brown     #3D3630   body copy
   Near-black     #1B140F   high-contrast text
   White          #FFFFFF

   TYPE
   Martina Plantijn - display serif, used with restraint
                      (Light 300 is the only hosted cut)
   Instrument Sans  - body
   Inter            - buttons, labels, captions
   ============================================================ */


/* ===== 0. FONT LOADING =====================================
   @import must be the very first thing in the file or the
   browser discards it. If SimplyBook.me reorders your CSS,
   the font-family declarations below will silently fall back
   to system fonts - check the rendered page, not the editor.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

/* Martina Plantijn is self-hosted on your WordPress theme -
   it's a Klim retail font, not on Google Fonts, so it loads
   by @font-face rather than @import. Only Light (300) and
   Light Italic are on the server, which is why every Martina
   rule below is weight 300; asking for 500 would make the
   browser fake a bold from the Light file. */

@font-face {
	font-family: 'Martina Plantijn';
	src: url('https://clarityassessments.org/wp-content/themes/clarity-assessments/fonts/MartinaPlantijn-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Martina Plantijn';
	src: url('https://clarityassessments.org/wp-content/themes/clarity-assessments/fonts/MartinaPlantijn-LightItalic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}


/* ===== 1. GLOBAL BASE ====================================== */

body,
#sb-container,
.sb-widget {
	font-family: 'Instrument Sans', sans-serif;
	color: #3D3630;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: 'Martina Plantijn', Georgia, serif;
	color: #172E2A;
	font-weight: 300 !important;
	font-synthesis: none;
	-webkit-font-synthesis: none;
}


/* ===== 2. SERVICE CARDS ====================================
   The "For Your Child" / "For Yourself" selection cards.
   ========================================================== */

#events h3 {
	font-family: 'Instrument Sans', sans-serif;
	color: #172E2A;
	font-weight: 600 !important;
	font-size: 16px;
}

#events p.duration,
#events div.duration {
	color: #7D6E62;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
}

#events p.description,
#events div.description {
	color: #3D3630;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
}

/* Card container */
#events .event,
#events li.event {
	background-color: #FFFFFF;
	border: 1px solid #EFE6DD;
	border-radius: 2px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

#events .event:hover {
	border-color: #7D6E62;
}

/* Selected state */
#events .selectedEvent {
	border: 2px solid #855434 !important;
	background-color: #F8F6F2 !important;
}

/* Kill the stock caduceus / medical clip-art icons */
#events .event .event-icon,
#events .event img.icon,
#events .service-icon {
	display: none !important;
}


/* ===== 3. BUTTONS ========================================== */

/* Primary - "Select" on each service card */
#events input.reserve_time_btn {
	background-color: #855434;
	color: #FFFFFF;
	border: none;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 10px 20px;
	transition: background-color 0.2s ease;
}

#events input.reserve_time_btn:hover {
	background-color: #6D4329;
}

/* Secondary - "Select another" */
#events input.select_another_btn {
	background-color: transparent;
	color: #172E2A;
	border: 1px solid #172E2A;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 10px 20px;
}

#events input.select_another_btn:hover {
	background-color: #172E2A;
	color: #F8F6F2;
}

/* Final confirm */
#eventForm #save_button {
	background-color: #855434;
	color: #FFFFFF;
	border: none;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 12px 28px;
}

#eventForm #save_button:hover {
	background-color: #6D4329;
}


/* ===== 4. STEP HEADERS ===================================== */

#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
	font-family: 'Martina Plantijn', Georgia, serif;
	font-weight: 300 !important;
	font-synthesis: none;
	-webkit-font-synthesis: none;
	font-style: italic;
	color: #172E2A;
	font-size: 22px;
	letter-spacing: 0;
}


/* ===== 5. DATE LINE / DATE STRIP ===========================
   .date-line--caption is the small label inside the date
   row - day-of-week or contextual date text depending on
   theme. Both treatments are here; comment out the one you
   don't want.
   ========================================================== */

/* Original small-caps utility label, just larger (11px -> 14px) */
.date-line--caption {
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #7D6E62 !important;
}

/* Parent row - spacing and divider */
.date-line {
	border-bottom: 1px solid #EFE6DD;
	padding-bottom: 10px;
	margin-bottom: 14px;
}


/* ===== 6. CALENDAR / DATEPICKER ============================ */

div.ui-widget-content {
	background-color: #FFFFFF;
	border: 1px solid #EFE6DD;
	color: #1B140F;
	font-family: 'Instrument Sans', sans-serif;
	border-radius: 2px;
}

div.ui-widget-header {
	background-color: #172E2A;
	color: #F8F6F2;
	border: none;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 0;
}

/* Prev / next arrows on the dark header */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	filter: invert(1) brightness(2);
}

/* Day-of-week column labels */
.ui-datepicker th {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7D6E62;
}

/* Available day cells */
.ui-datepicker td a.ui-state-default {
	background: #FFFFFF;
	border: 1px solid #EFE6DD;
	color: #172E2A;
	font-weight: 500;
	text-align: center;
	transition: background-color 0.15s ease;
}

.ui-datepicker td a.ui-state-default:hover {
	background: #F8F6F2;
	border-color: #855434;
}

/* Selected day */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a {
	background: #855434 !important;
	border-color: #855434 !important;
	color: #FFFFFF !important;
}

/* Today */
.ui-datepicker td.ui-datepicker-today a {
	background: #F8F6F2;
	border-color: #7D6E62;
	color: #172E2A;
}

/* Unavailable / disabled days */
.ui-datepicker td.ui-state-disabled,
.ui-datepicker td.ui-datepicker-unselectable span {
	background: #FFFFFF;
	color: #C9BFB4;
	opacity: 1;
}


/* ===== 7. TIME SLOT GRID =================================== */

#timeline-container table.timeline {
	font-family: 'Instrument Sans', sans-serif;
	border-color: #EFE6DD;
}

/* Available slot - cream, not the stock blue */
.timeline td.free_time,
.timeline td.available {
	background-color: #F8F6F2;
	border: 1px solid #EFE6DD;
	color: #172E2A;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.timeline td.free_time:hover,
.timeline td.available:hover {
	background-color: #855434;
	border-color: #855434;
	color: #FFFFFF;
}

/* Selected slot */
.timeline td.selected,
.timeline td.active_time {
	background-color: #855434 !important;
	border-color: #855434 !important;
	color: #FFFFFF !important;
}

/* Booked / unavailable */
.timeline td.busy_time,
.timeline td.booked {
	background-color: #EFE6DD;
	color: #A49689;
	border: 1px solid #EFE6DD;
}

/* Outside working hours */
.timeline td.not_worked_time {
	background-color: #F8F6F2;
	color: #C9BFB4;
	border: 1px solid #F1EBE4;
}

/* Hour labels down the side */
.timeline th,
.timeline td.hour_label {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #7D6E62;
	background: transparent;
	border: none;
}


/* ===== 8. CLIENT DETAILS FORM ==============================
   HIPAA note: keep these fields to non-PHI contact info only
   (name, email, phone). No reason-for-visit, no condition,
   no diagnosis free-text - that changes the compliance
   picture for anything tracking this page.
   ========================================================== */

#eventForm label,
.sb-form label {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7D6E62;
}

#eventForm input[type="text"],
#eventForm input[type="email"],
#eventForm input[type="tel"],
#eventForm textarea,
#eventForm select {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	color: #1B140F;
	background-color: #FFFFFF;
	border: 1px solid #EFE6DD;
	border-radius: 2px;
	padding: 10px 12px;
	transition: border-color 0.15s ease;
}

#eventForm input[type="text"]:focus,
#eventForm input[type="email"]:focus,
#eventForm input[type="tel"]:focus,
#eventForm textarea:focus,
#eventForm select:focus {
	border-color: #855434;
	outline: 2px solid rgba(133, 84, 52, 0.25);
	outline-offset: 1px;
}

/* No placeholder text inside the fields - the labels above them say what
   goes where, and the grey "Enter your name" copies just add noise. */
#details input::placeholder,
#details textarea::placeholder,
#sb_client_info_container input::placeholder,
#sb_client_info_container textarea::placeholder,
.custom-form input::placeholder,
.custom-form textarea::placeholder,
.iti input::placeholder {
	color: transparent !important;
	opacity: 0 !important;
}

/* Validation */
.error,
.field-error,
#eventForm .invalid {
	color: #8A3324;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 12.5px;
}

#eventForm input.invalid,
#eventForm .invalid input {
	border-color: #8A3324;
}


/* ===== 9. SUMMARY / CONFIRMATION =========================== */

.booking-summary,
#booking-details,
.sb-summary {
	background-color: #F8F6F2;
	border: 1px solid #EFE6DD;
	border-radius: 2px;
	padding: 20px 24px;
	font-family: 'Instrument Sans', sans-serif;
	color: #3D3630;
}

.booking-summary h3,
.sb-summary h3 {
	font-family: 'Martina Plantijn', Georgia, serif;
	font-style: italic;
	font-weight: 300 !important;
	font-synthesis: none;
	-webkit-font-synthesis: none;
	font-size: 20px;
	color: #172E2A;
}


/* ===== 10. CLEANUP ========================================= */

/* SimplyBook.me's own branding line */
.powered-by,
#powered_by,
.sb-powered-by {
	display: none !important;
}

/* Social sharing tabs */
#social_tabs,
.social-share {
	display: none !important;
}


/* ===== 11. ACCESSIBILITY & MOBILE ========================== */

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid #855434;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	#eventForm #start_date-block-container h3,
	#eventForm #timeline-container h3 {
		font-size: 19px;
	}

	#events input.reserve_time_btn,
	#eventForm #save_button {
		width: 100%;
		padding: 14px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}


/* ===== 12. LINKS ===========================================
   The contact block (phone / email / booking URL) renders in
   default browser blue because SimplyBook.me never styles
   these. Targeted by href scheme rather than class name, so
   this holds even if they rename the wrapper.

   :visited is included deliberately - without it, the email
   and URL turn default purple after someone clicks once,
   which is a second off-brand color most people miss.
   ========================================================== */

a[href^="tel:"],
a[href^="mailto:"],
a[href^="http"],
a[href^="tel:"]:visited,
a[href^="mailto:"]:visited,
a[href^="http"]:visited {
	color: #855434 !important;
	text-decoration: none;
	transition: color 0.15s ease;
}

a[href^="tel:"]:hover,
a[href^="mailto:"]:hover,
a[href^="http"]:hover {
	color: #6D4329 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Alternative - quieter treatment in deep teal, if three
   stacked rust links read too loud against the heading.
   Swap the color values above to #172E2A / #855434 on hover.
*/


/* ===== 13. SERVICE TITLES (modern widget) ==================
   The service card header ("For Your Child - Discovery Call")
   is not an h1-h4, so the global heading rule in Section 1
   never reaches it. This widget uses BEM-style class names -
   .date-line--caption was the giveaway - rather than the
   classic #events structure Section 2 assumes.

   Without the exact class, this casts a wide net by matching
   any class containing "title" or "name" inside a service or
   event container. It only sets type properties, so a stray
   match changes a font, not a layout.

   Once you inspect that header and send me the real class,
   this whole section collapses to one clean selector.
   ========================================================== */

[class*="service"] [class*="title"],
[class*="service"] [class*="name"],
[class*="event"] [class*="title"],
[class*="event"] [class*="name"],
[class*="item"] [class*="title"],
[class*="service--title"],
[class*="service__title"],
[class*="event--title"],
[class*="event__title"] {
	font-family: 'Martina Plantijn', Georgia, serif !important;
	font-weight: 300 !important;
	font-synthesis: none !important;
	-webkit-font-synthesis: none !important;
	font-style: normal !important;
	color: #172E2A !important;
	letter-spacing: 0 !important;
}


/* ===== 14. SERVICE CARD PHOTOS ============================
   Paints the modal's card images into each service card's
   picture slot (.item__picture) - one per service id - so the
   standalone page's cards match the website booking modal.
   This replaces the stock "caduceus" default icon that used
   to fill the slot. (Alternatively you could upload images
   under Manage -> Services; this CSS route keeps everything
   in one file. If SimplyBook renames these classes, this is
   the block to update.)
   ========================================================= */

.item.service-item .item__picture,
.item.service-item .item__picture--default {
	display: block !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	border-radius: 4px 4px 0 0 !important;
}

.item.service-item .item__picture svg,
.item.service-item .item__picture .sb-inline-svg {
	display: none !important;
}

/* For Your Child (service id 2) */
.item.service-item.--service-id_2 .item__picture {
	background-image: url('https://clarityassessments.org/wp-content/themes/clarity-assessments/assets/eval-blocks.jpg') !important;
	background-position: center 30% !important;
}

/* For Yourself (service id 3) */
.item.service-item.--service-id_3 .item__picture {
	background-image: url('https://clarityassessments.org/wp-content/themes/clarity-assessments/assets/space-3.jpg') !important;
	background-position: center 55% !important;
}



/* Service descriptions under each card title (matches the modal). .item__content
   holds only the title, so ::after lands right beneath it. */
.item.service-item .item__content::after {
	display: block;
	margin-top: 7px;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 13px; line-height: 1.5; color: #5d554c;
}
.item.service-item.--service-id_2 .item__content::after {
	content: "Questions about your child or teen \002014  development, attention, learning, or autism. We\002019ll call you at the time you choose.";
}
.item.service-item.--service-id_3 .item__content::after {
	content: "Wondering about autism, ADHD, or simply how your mind works. We\002019ll call you at the time you choose.";
}

/* Short card labels - hide SimplyBook's long service name and show the modal's
   short label instead ("For Your Child" / "For Yourself"). */
.item.service-item .item__content .title {
	font-size: 0 !important;
	line-height: 0 !important;
}
.item.service-item .item__content .title::before {
	display: block;
	font-family: 'Martina Plantijn', Georgia, serif;
	font-weight: 300; font-synthesis: none; -webkit-font-synthesis: none;
	font-size: 20px; line-height: 1.15; color: #172E2A;
}
.item.service-item.--service-id_2 .item__content .title::before { content: "For Your Child"; }
.item.service-item.--service-id_3 .item__content .title::before { content: "For Yourself"; }

/* Hover highlight on the photo cards (lift + subtle brighten), like the modal. */
.item.service-item .item__tab {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	border-radius: 6px;
}
.item.service-item:hover .item__tab {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px -14px rgba(23,46,42,0.45);
}
.item.service-item:hover .item__picture {
	filter: brightness(1.05);
}


/* ===== 15. CALENDAR WEEK LAYOUT ============================
   Confirmed structure:

     .calendar
       .weeks-name  row-no-padding clearfix
       .weeks-date  row-no-padding clearfix
         .col-md-4 .col-sm-6   <- one per week, x6

   Each week is a Bootstrap third-width column, so three sit
   across on desktop and you get 21 columns instead of 7.

   Scoped to direct children of .weeks-name / .weeks-date so
   it can only ever hit week blocks. Two things this protects:
   the service cards and other page elements on the same
   Bootstrap grid, and the individual day cells nested inside
   each week - if those got forced to full width too, the days
   would stack vertically instead of sitting in a row.

   (The earlier :has() attempt failed because it looked for a
   .date-line inside these columns. That class lives elsewhere
   in the widget, so the rule matched nothing.)

   NOTE: only layout rule in the file. Comment this out first
   if anything shifts oddly.
   ========================================================== */

.calendar .weeks-name > [class*="col-"],
.calendar .weeks-date > [class*="col-"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

/* .weeks-name carries one SUN-SAT header per week block, so
   with the weeks stacked you get the day names three times.
   Keep the first, drop the rest. */

.calendar .weeks-name > [class*="col-"]:not(:first-child) {
	display: none !important;
}


/* ===== 16. BRANDED PHOTO HERO =============================
   Adds a photo hero (window image + "Let's start with a
   conversation.") to the top of the SERVICE-selection step,
   mirroring the website's booking modal. SimplyBook won't let
   us add real HTML, so the image and BOTH lines of text are
   painted with CSS onto the service-step container
   (#sb_service_step_container): the eyebrow and heading come
   from its ::after / ::before `content`.

   WHY this element (not #header): the hero must show only on
   the landing/service step. Anchoring it here means it appears
   there and cleanly disappears once someone is picking a time
   or filling the form - no empty band left behind. If
   SimplyBook renames this container, this is the thing to fix.

   Note: the whole heading is italic (CSS `content` can't
   italicize just "conversation" the way the site modal does).
   The photo is the same booking-cover asset the modal uses,
   served from the WordPress theme.
   ========================================================= */

#sb_service_step_container {
	position: relative !important;
	padding-top: 408px !important;   /* hero band + intro block + gap */
}

#sb_service_step_container::before {
	content: "Let\002019s start with a conversation.";
	position: absolute; top: 0; left: 0; right: 0; height: 220px;
	box-sizing: border-box;
	display: flex; align-items: flex-end;
	padding: 0 30px 26px;
	background-image:
		linear-gradient(to top, rgba(23,46,42,0.86) 0%, rgba(23,46,42,0.50) 20%, rgba(23,46,42,0) 44%),
		url('https://clarityassessments.org/wp-content/themes/clarity-assessments/assets/booking-cover.jpg');
	background-size: cover, cover;
	background-position: center 45%, center 45%;
	background-repeat: no-repeat;
	border-radius: 4px;
	font-family: 'Martina Plantijn', Georgia, serif;
	font-weight: 300; font-style: italic;
	font-synthesis: none; -webkit-font-synthesis: none;
	font-size: 32px; line-height: 1.08;
	color: #F8F6F2;
	text-shadow: 0 2px 14px rgba(23,46,42,0.45);
	z-index: 1; pointer-events: none;
}



/* Intro block above the two cards - mirrors the website modal exactly:
   lead line, the out-of-network note, the "prefer to write" line, then
   the prompt. SimplyBook gives us no HTML, so
   each line is painted with CSS onto a pseudo-element and positioned in the
   service-step container's coordinate space (it is position:relative). */
#sb_service_step_container .item.service-item.--service-id_2::before {
	content: "A warm, no-pressure call with Dr. Wolf about your questions and what comes next.";
	position: absolute; top: 228px; left: 2px; right: 2px;
	font-family: 'Instrument Sans', sans-serif; font-size: 15px; line-height: 1.5; color: #5d554c;
	z-index: 1; pointer-events: none;
}
#sb_service_step_container .item.service-item.--service-id_2::after {
	content: "We\002019re out-of-network, and we never want cost to be a barrier. Pricing is flat-rate, with superbills, HSA/FSA, and CareCredit financing available. Full details are on our Pricing\0000A0page.";
	position: absolute; top: 258px; left: 2px; right: 2px;
	font-family: 'Instrument Sans', sans-serif; font-size: 13.5px; line-height: 1.55; color: #5d554c;
	z-index: 1; pointer-events: none;
}
/* "prefer to write" line - re-uses the container's ::after (no longer needed for an eyebrow) */
#sb_service_step_container::after {
	content: "Prefer to write? Email hello@clarityassessments.org.";
	position: absolute; top: 318px; left: 2px; right: 2px; height: auto;
	display: block; padding: 0;
	font-family: 'Instrument Sans', sans-serif; font-size: 13px; line-height: 1.5; color: #5d554c;
	text-transform: none; letter-spacing: 0; text-shadow: none;
	z-index: 1; pointer-events: none;
}
#sb_service_step_container .item.service-item.--service-id_3::before {
	content: "Who is the evaluation for?";
	position: absolute; top: 356px; left: 2px; right: 2px;
	font-family: 'Martina Plantijn', Georgia, serif; font-weight: 300; font-synthesis: none; -webkit-font-synthesis: none;
	font-size: 22px; color: #172E2A;
	z-index: 1; pointer-events: none;
}

@media (max-width: 640px) {
	#sb_service_step_container { padding-top: 424px !important; }
	#sb_service_step_container::before { height: 172px; font-size: 24px; padding-bottom: 22px; }
	#sb_service_step_container .item.service-item.--service-id_2::before { top: 182px; font-size: 14px; }
	#sb_service_step_container .item.service-item.--service-id_2::after  { top: 232px; font-size: 13px; }
	#sb_service_step_container::after { top: 336px; }
	#sb_service_step_container .item.service-item.--service-id_3::before { top: 372px; font-size: 20px; }
}


/* ===== 17. HIDE SIMPLYBOOK CHROME =========================
   Hide SimplyBook's stock header, "Book Now" banner, and
   footer so the page is just: photo hero (Section 16) ->
   booking flow. Your website's booking cards deep-link
   straight to each service, so this chrome isn't needed. */

#header,
#main-buttons,
#footer {
	display: none !important;
}


/* ===== 18. CORNER LOGO ====================================
   Small Clarity wordmark in the top-left of the cream step
   bar (#sb_booking_info), above the photo hero. Shows on
   every step for consistent branding. Uses the DARK logo so
   it reads on the cream bar. If SimplyBook renames
   #sb_booking_info, update this anchor.
   ========================================================= */

#sb_booking_info { position: relative !important; }

#sb_booking_info::before {
	content: "";
	position: absolute; left: 24px; top: 13px;
	width: 150px; height: 32px;
	background: url('https://clarityassessments.org/wp-content/themes/clarity-assessments/assets/logo-dark.png') left center / contain no-repeat;
	z-index: 20; pointer-events: none;
}

@media (max-width: 640px) {
	#sb_booking_info::before { width: 118px; height: 26px; left: 16px; top: 12px; }
}


/* ===== 19. CLIENT-DETAILS STEP INTRO ======================
   One warm line under the "Just a few details." heading on
   the details step. (The heading text itself is set in
   SimplyBook under Custom translations, not here.) The
   non-breaking space before "time" keeps the last word from
   sitting alone on its own line. */

#details .title--h2::after {
	content: "We\002019re so glad you\002019re here \002014  just your name, number, and a few details to help us prepare, and Dr. Wolf will call you at your scheduled\0000A0time.";
	display: block;
	margin-top: 8px;
	font-family: 'Instrument Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: #7D6E62;
	text-wrap: pretty;
}


/* ===== 20. SCREEN-READER ANNOUNCER ========================
   SimplyBook's status announcer ("step_announce_service") was
   rendering as visible text at the foot of the page. Keep it
   for screen readers, but take it out of the visual layout. */
#sb_status_announcer {
	position: absolute !important; width: 1px !important; height: 1px !important;
	overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
	margin: -1px !important; padding: 0 !important; border: 0 !important;
}


/* ===== 21. CALENDAR + TIME CELLS (modern widget) ===========
   Verified selectors: a.day-on.sb-available-date (bookable day)
   and a.sb-cell.free (available time). Terracotta on hover and
   when selected, cream at rest. */
a.day-on.sb-available-date {
	font-family: 'Instrument Sans', sans-serif;
	color: #172E2A; background: transparent; border-radius: 0;
	transition: color 0.15s ease;
}
/* SimplyBook draws each day as a 40px CIRCLE (border-radius: 50%) using a
   very specific selector, and gives the selected day a cream box. The rules
   below use the same selector so they win, and make every state the same
   square: terracotta fill when hovered or selected, thin outline for today. */
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date {
	border-radius: 2px !important;
	transition: background-color 0.15s ease;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date:hover,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected:hover {
	background: #855434 !important;
	border-radius: 2px !important;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date:hover .day-on,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected .day-on,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected .day-off {
	color: #FFFFFF !important;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.today:not(.selected) {
	box-shadow: inset 0 0 0 1px #855434 !important;
	border-radius: 2px !important;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date .day-on,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date .day-on:hover,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date .day-on:focus {
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	border-radius: 0 !important; text-decoration: none !important; outline: 0 !important;
}
div.time-legend div.available { background-color: #F8F6F2; border: 1px solid #EFE6DD; }
a.sb-cell { font-family: 'Instrument Sans', sans-serif; border-radius: 2px; }
a.sb-cell.free {
	background-color: #F8F6F2; border-color: #EFE6DD; color: #172E2A;
	transition: background-color 0.15s ease, color 0.15s ease;
}
a.sb-cell.free:hover,
a.sb-cell.free.active,
a.sb-cell.free.selected,
a.sb-cell.free.sb-selected {
	background-color: #855434 !important; border-color: #855434 !important; color: #FFFFFF !important;
}


/* ===== 22. TIME LEGEND ======================================
   SimplyBook prints "<circle> - Available". Keep the circle as a
   terracotta dot and drop the stray hyphen (the text node can't
   be removed with CSS, so the label is repainted beside the dot). */
.time-legend .available {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0; line-height: 0; color: transparent;
	border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important;
}
.time-legend .available .circle {
	width: 10px; height: 10px; border-radius: 50%;
	background: #855434 !important; border: 0 !important; flex: none;
}
.time-legend .available::after {
	content: "Available";
	font-family: 'Instrument Sans', sans-serif; font-size: 13px; line-height: 1; color: #5d554c;
}


/* ===== 24. BACK LINK =========================================
   SimplyBook's "< Back" link (#sb_back_button a.btn--link) renders
   in default hyperlink blue. Bring it into the palette. */
#sb_back_button a.btn--link,
#sb_back_button a.btn--link i,
#sb_back_button a.btn--link span {
	color: #855434 !important;
	font-family: 'Instrument Sans', sans-serif;
	text-decoration: none;
	transition: color 0.15s ease;
}
#sb_back_button a.btn--link:hover,
#sb_back_button a.btn--link:hover i,
#sb_back_button a.btn--link:hover span {
	color: #6D4329 !important;
}