#booknetic_theme_8 *
{
    font-family: 'Poppins', sans-serif !important;
}
#booknetic_theme_8
{
    height: 600px;
}

#booknetic_theme_8 .booknetic_appointment_steps
{
    background: #292d32;
}

#booknetic_theme_8 .booknetic_badge
{
    background: #4d545a;
}
#booknetic_theme_8 .booknetic_appointment_steps_footer_txt2
{
    color: #4d545a;
}
#booknetic_theme_8 .booknetic_step_title, #booknetic_theme_8 .booknetic_appointment_steps_footer_txt1
{
    color: #626c76;
}

#booknetic_theme_8 .booknetic_selected_step > .booknetic_badge::after
{
background-color: #6c70dc;
}
#booknetic_theme_8 .booknetic_selected_step .booknetic_step_title
{
color: #ffffff;
}

#booknetic_theme_8 .booknetic_active_step .booknetic_badge, #booknetic_theme_8 .booknetic_calendar_days > div > span > i[a], #booknetic_theme_8 .booknetic_btn_success
{
    background: #4fbf65;
}
#booknetic_theme_8 .booknetic_active_step .booknetic_step_title
{
    color: #4fbf65;
}

#booknetic_theme_8 .booknetic_btn_primary,
#booknetic_theme_8 .booknetic_selected_time,
#booknetic_theme_8 .booknetic_calendar_selected_day > div
{
    background: #6c70dc !important;
    color: #ffffff !important;
}

#booknetic_theme_8 .booknetic_service_category, .booknetic_package_category, #booknetic_theme_8 .booknetic_service_extra_title, #booknetic_theme_8 .booknetic_times_title, #booknetic_theme_8 .booknetic_text_primary
{
    color: #6c70dc !important;
}

#booknetic_theme_8 .booknetic_category_accordion .booknetic_service_category span,
#booknetic_theme_8 .booknetic_category_accordion .booknetic_service_extra_title span{
    background: #6c70dc !important;
}

#booknetic_theme_8 .booknetic_appointment_container_header
{
    color: #292d32 !important;
}

#booknetic_theme_8 .booknetic_service_card_selected,
#booknetic_theme_8 .booknetic_card_selected,
#booknetic_theme_8 .booknetic_service_extra_card_selected,
#booknetic_theme_8 .booknetic_payment_method_selected,
#booknetic_theme_8 .booknetic-cart-item.active
{
    border-color: #53d56c !important;
}

#booknetic_theme_8 .booknetic_service_card_price,
#booknetic_theme_8 .booknetic_service_extra_card_price,
#booknetic_theme_8 .booknetic_confirm_details_price:not([data-price-id="discount"] .booknetic_confirm_details_price,.booknetic_gift_discount_price),
#booknetic_theme_8 .booknetic-cart-item-body-cell.amount,
#booknetic_theme_8 .booknetic_sum_price
{
    color: #53d56c !important;
}

/* Package Booking Panel Theming */
#booknetic_theme_8 .bkntc_package-confirmation_header h1,
#booknetic_theme_8 .bkntc_package_summary h2
{
    color: #292d32 !important;
}

#booknetic_theme_8 .bkntc_package_summary,
#booknetic_theme_8 .bkntc_package_warning,
#booknetic_theme_8 .bkntc_package_appointment.booked,
#booknetic_theme_8 .bkntc_package_appointment.empty
{
    border-color: #53d56c !important;
}

.booknetic_package_card_service_el > span:first-child
{
    color: #6c70dc !important;
}

.booknetic_package_card_service_el > span:last-child {
    background: #6c70dc !important;
}

#booknetic_theme_8 .bkntc_package_appointment.empty:hover
{
    border-color: #6c70dc !important;
    background-color: rgba(108, 112, 220, 0.1) !important;
}

#booknetic_theme_8 .bkntc_package-confirmation_header span,
#booknetic_theme_8 .bkntc_package_summary h2
{
    color: #6c70dc !important;
}

/* ==========================================================================
   CALENDA — BOOKING WIDGET UI REVAMP (DESKTOP)   rev.6 — 2026-09-03
   --------------------------------------------------------------------------
   Lives entirely in Booknetic > Appearance > Custom CSS (theme id 8).
   NO plugin file is modified: booknetic.css, booknetic.php, booknetic.js and
   theme-template.css are all stock. That means it survives plugin updates,
   but also that nothing here can add or move markup.

   Consequences of being CSS-only:
     · No "STEP x of y" counter and no progress ring — both need markup + JS.
     · The company logo stays at the start of the top step strip.
     · The branding pill and the contact line cannot be reparented, so they
       are absolutely positioned into place (see their rules for the maths).

   Colours, font and panel height still come from the Appearance colour
   pickers, because the theme file's own rules sit above this block in the
   same generated file. The --bkntc-* tokens in section 1 are the local
   greys/geometry only; %%placeholder%% tokens do NOT work in Custom CSS
   (Booknetic substitutes them before this text is inserted).

   The main block is guarded by @media (min-width: 1001px) — the exact
   complement of Booknetic's own (max-width: 1000px) block. A matching
   mobile section for that range is at the END of this file (rev.7). The
   header section in the middle is unguarded on purpose.

   Revert: clear the Custom CSS box and save.
   ========================================================================== */

@media only screen and (min-width: 1001px)
{

	/* ---------------------------------------------------------------
	   1. Tokens
	   --------------------------------------------------------------- */
	.booknetic_appointment
	{
		--bkntc-canvas:        #F7F8FA;
		--bkntc-surface:       #FFFFFF;
		--bkntc-border:        #ECEFF3;
		--bkntc-border-hover:  #D8DCE6;
		--bkntc-rule:          #E7EAF0;
		/* --bkntc-cfg-title only exists with the companion plugin's template patch;
		   without it this simply falls back to the module default below */
		--bkntc-ink:           var(--bkntc-cfg-title, #292d32);
		--bkntc-ink-2:         #475467;
		--bkntc-muted:         #98A2B3;
		--bkntc-chevron:       #A9B2C0;
		--bkntc-r:             16px;
		--bkntc-r-sm:          12px;
		--bkntc-r-xs:          10px;
		--bkntc-shadow:        0 1px 2px rgba(16, 24, 40, .05);
		--bkntc-shadow-hover:  0 6px 18px rgba(16, 24, 40, .08);
	}

	/* ---------------------------------------------------------------
	   2. Shell — FIXED width, stacked layout
	   Width is a fixed px value per tier (never a percentage), so the
	   panel cannot re-flow when the page scrollbar appears/disappears
	   during loading. Tiers stay inside Elementor's 1140px container.
	   --------------------------------------------------------------- */
	.booknetic_appointment
	{
		width: 860px;
		min-width: 860px;
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;

		/* reserves the band the contact bar is pinned into (see
		   .booknetic_appointment_steps_footer) */
		padding-bottom: 36px;

		/* No fixed `height` is set here — the panel keeps the height configured
		   in Booknetic > Appearance > "Panel height" (written into the theme
		   file as `#booknetic_theme_N { height: Npx }`), and overflowing
		   content scrolls inside .booknetic_appointment_container_body rather
		   than stretching the widget (see section 4).

		   min-height is only a floor for the desktop layout, which needs more
		   room than the 600px module default. Appearance still wins whenever
		   Panel height is set above this — raise it there to go taller and
		   this floor stops mattering. */
		min-height: 760px;

		/* header/steps on top, content beneath — no dark side rail */
		flex-direction: column;
		align-items: stretch;

		background-color: var(--bkntc-canvas);
		border: 1px solid var(--bkntc-border);
		border-radius: 20px;
		box-shadow: none;
		overflow: hidden;
	}

	/* ---------------------------------------------------------------
	   3. Step rail -> light progress strip across the top
	   --------------------------------------------------------------- */
	/* NB: no background or text colour is set here — .booknetic_appointment_steps
	   is painted by the theme file from Appearance > "Panel background", and the
	   badge / step-title colours from the four step-colour settings. Set Panel
	   background to a light colour in that panel for the reference look. */
	/* position:static (it is relative in the core stylesheet) so the contact
	   block inside it can anchor to the whole widget and drop to the bottom
	   bar instead of being trapped in this strip */
	.booknetic_appointment_steps
	{
		position: static;
		width: 100%;
		flex: 0 0 auto;
		height: auto;
		border-radius: 0;
		border-bottom: 1px solid var(--bkntc-rule);
		display: flex;
		align-items: center;
		gap: 20px;
		padding: 0 30px;
	}

	.booknetic_appointment_steps_body
	{
		flex: 1 1 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 20px;
		padding: 11px 0;
		max-height: none;
		overflow: visible;
		word-break: normal;
	}

	.booknetic_appointment_step_element
	{
		margin-bottom: 0 !important;
		font-size: 13px;
		line-height: 26px;
		white-space: nowrap;
	}

	/* geometry only — badge and label colours stay under Appearance control */
	.booknetic_badge
	{
		width: 24px;
		height: 24px;
		line-height: 24px;
		margin-right: 9px;
		font-size: 11px;
		font-weight: 700;
		border-radius: 50%;
	}

	.booknetic_step_title
	{
		font-weight: 500;
		letter-spacing: .01em;
	}

	.booknetic_selected_step .booknetic_step_title
	{
		font-weight: 600;
	}

	/* "Have any questions? <phone>" — moved out of the dark top strip and down
	   into a full-width bar pinned to the bottom of the widget, where the
	   branding badge used to sit. .booknetic_appointment is position:relative in
	   the core stylesheet, so this anchors to the widget itself. The matching
	   padding-bottom on .booknetic_appointment reserves the band. */
	.booknetic_appointment_steps_footer
	{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		flex: 0 0 auto;
		width: 100%;
		height: 36px;
		margin: 0;
		padding: 0 30px;
		background: #F1F3F6;
		border-top: 1px solid var(--bkntc-rule);
		text-align: left;
		font-size: 12px;
		line-height: 36px;
	}

	.booknetic_appointment_steps_footer > div
	{
		display: inline-block;
		vertical-align: middle;
		margin-left: 6px;
	}

	/* ---------------------------------------------------------------
	   4. Content column
	   --------------------------------------------------------------- */
	/* fills what the fixed-height shell leaves after the step strip.
	   min-height:0 is what lets the body below actually shrink and scroll —
	   without it a flex child refuses to go below its content height. */
	.booknetic_appointment_container
	{
		width: 100%;
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		background: transparent;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.booknetic_appointment_container_header
	{
		height: auto;
		flex: 0 0 auto;
		padding: 16px 30px 12px;
		min-height: 65px;
		font-size: 22px;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: -.015em;
		border-bottom: 1px solid var(--bkntc-rule);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.booknetic_appointment_container_header_text
	{
		flex: 1 1 auto;
		min-width: 0;
	}

	/* desktop scale for the new header chrome */




	/* the only scroll container: tall steps (calendar + slots, long service
	   lists) scroll in here while the widget itself stays a fixed box */
	.booknetic_appointment_container_body
	{
		height: auto;
		min-height: 0;
		flex: 1 1 auto;
		padding: 20px 30px 24px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.booknetic_appointment_container_body > div
	{
		height: auto;
	}

	.booknetic_appointment_container_body::-webkit-scrollbar
	{
		width: 8px;
	}

	.booknetic_appointment_container_body::-webkit-scrollbar-thumb
	{
		background: #D6DAE2;
		border-radius: 8px;
	}

	.booknetic_appointment_container_body::-webkit-scrollbar-track
	{
		background: transparent;
	}

	.booknetic_appointment_container_footer
	{
		height: auto;
		flex: 0 0 auto;
		min-height: 66px;
		align-items: center;
		background: transparent;
		border-top: 1px solid var(--bkntc-rule);
		padding: 12px 30px;
	}

	.booknetic_warning_message
	{
		/* inline in the footer row, between BACK and NEXT. It sits there as a
		   flex item; min-width:0 + white-space:normal let it shrink and wrap,
		   which is what the core rule could not do (nowrap + 430px max-width),
		   so it used to overflow and cover both buttons on a narrow footer. */
		position: static;
		flex: 0 1 auto;
		min-width: 0;
		width: auto;
		max-width: 100%;
		height: auto;
		min-height: 0;
		align-self: center;
		margin: 0 14px;
		border-radius: var(--bkntc-r-xs);
		line-height: 20px;
		padding: 8px 14px;
		box-shadow: none;
		white-space: normal;
	}

	/* ---------------------------------------------------------------
	   5. Choice cards — Location & Practitioner
	   3-up vertical tiles -> full-width rows: avatar, text, chevron.
	   --------------------------------------------------------------- */
	.booknetic_appointment_container .booknetic_card_container
	{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
	}

	.booknetic_card_container > .booknetic_category_accordion
	{
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
	}

	.booknetic_appointment_container .booknetic_card_container .booknetic_card,
	.booknetic_card
	{
		flex-basis: auto;
		float: none !important;
		width: 100%;
		margin: 0;
		padding: 18px 46px 18px 18px;

		flex-direction: row;
		align-items: center;
		gap: 16px;

		background: var(--bkntc-surface);
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r-sm);
		box-shadow: var(--bkntc-shadow);
		transition: border-color .15s ease, box-shadow .15s ease;
	}

	.booknetic_card:hover
	{
		border-color: var(--bkntc-border-hover);
		box-shadow: var(--bkntc-shadow-hover);
	}

	.booknetic_card.booknetic_card_selected
	{
		padding: 17px 45px 17px 17px;
		border-radius: var(--bkntc-r-sm);
	}

	/* the decorative dashed strip becomes the reference's right chevron */
	.booknetic_card:not(.booknetic_card_selected):after
	{
		left: auto;
		bottom: auto;
		right: 22px;
		top: 50%;
		width: 8px;
		height: 8px;
		background-image: none;
		border-top: 2px solid var(--bkntc-chevron);
		border-right: 2px solid var(--bkntc-chevron);
		border-radius: 1px;
		transform: translateY(-50%) rotate(45deg);
	}

	.booknetic_card_image
	{
		flex: 0 0 48px;
		width: 48px;
		height: 48px;
		margin: 0;
	}

	.booknetic_card_title
	{
		flex: 1 1 auto;
		min-width: 0;
		height: auto;
		margin-top: 0;
		text-align: left;
		align-items: flex-start;
		justify-content: center;
		line-height: 22px;
	}

	.booknetic_card_title *
	{
		text-align: left;
	}

	.booknetic_card_title_first
	{
		font-size: 15px;
		font-weight: 600;
		color: var(--bkntc-ink);
	}

	.booknetic_card_description
	{
		text-align: left;
		padding-top: 3px;
		font-size: 13px;
		line-height: 20px;
		color: var(--bkntc-ink-2);
	}

	.booknetic_rtl .booknetic_card
	{
		float: none !important;
		margin: 0;
		padding: 18px 18px 18px 46px;
	}

	.booknetic_rtl .booknetic_card_title,
	.booknetic_rtl .booknetic_card_title *
	{
		text-align: right;
	}

	.booknetic_rtl .booknetic_card:not(.booknetic_card_selected):after
	{
		right: auto;
		left: 22px;
		border-right: 0;
		border-left: 2px solid var(--bkntc-chevron);
		transform: translateY(-50%) rotate(-45deg);
	}

	/* ---------------------------------------------------------------
	   6. Service cards — "Appointment Type"
	   --------------------------------------------------------------- */
	.booknetic_service_card
	{
		margin-bottom: 12px;
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r-sm);
		box-shadow: var(--bkntc-shadow);
		transition: border-color .15s ease, box-shadow .15s ease;
	}

	.booknetic_service_card:hover
	{
		border-color: var(--bkntc-border-hover);
		box-shadow: var(--bkntc-shadow-hover);
	}

	.booknetic_service_card.booknetic_service_card_selected
	{
		border-width: 2px;
	}

	/* vertical rhythm lives on the header, not on the image margins, so a card
	   with no description collapses to exactly the row height */
	.booknetic_service_card_header
	{
		padding: 12px 0;
	}

	.booknetic_service_card_header:after
	{
		content: '';
		flex: 0 0 8px;
		width: 8px;
		height: 8px;
		margin-right: 24px;
		border-top: 2px solid var(--bkntc-chevron);
		border-right: 2px solid var(--bkntc-chevron);
		border-radius: 1px;
		transform: rotate(45deg);
	}

	.booknetic_rtl .booknetic_service_card_header:after
	{
		margin-right: 0;
		margin-left: 24px;
		border-right: 0;
		border-left: 2px solid var(--bkntc-chevron);
		transform: rotate(-45deg);
	}

	.booknetic_service_card_image
	{
		width: 44px;
		height: 44px;
		flex: 0 0 44px;
		margin: 0 14px 0 16px;
		border-radius: 50%;
	}

	.booknetic_service_card.booknetic_service_card_selected .booknetic_service_card_image
	{
		margin: 0 13px 0 15px;
	}

	.booknetic_service_card_title
	{
		height: auto;
		line-height: 22px;
	}

	.booknetic_service_card_title > span:first-child
	{
		font-size: 15px;
		font-weight: 600;
		color: var(--bkntc-ink);
	}

	.booknetic_service_card_title > span:last-child
	{
		font-size: 12px;
		letter-spacing: .02em;
	}

	.booknetic_service_card_price
	{
		font-size: 17px;
		font-weight: 600;
		padding-left: 16px;
		padding-right: 16px;
	}

	.booknetic_service_card_description
	{
		padding: 0 46px 14px 74px;
		font-size: 13px;
		line-height: 21px;
		color: var(--bkntc-ink-2);
	}

	.booknetic_rtl .booknetic_service_card_description
	{
		padding: 0 74px 14px 46px;
	}

	/* Services with no notes still render an empty description block, which was
	   showing as a band of dead space under the duration pill. Collapse it when
	   neither the wrapped nor the full note has any text. Browsers without
	   :has() drop this rule and simply keep the old padding. */
	.booknetic_service_card:not(:has(.booknetic_service_card_description > span:not(:empty))) .booknetic_service_card_description
	{
		display: none;
	}

	.booknetic_service_category,
	.booknetic_location_category
	{
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .06em;
		margin-top: 24px;
		margin-bottom: 10px;
	}

	.booknetic_service_search_input
	{
		border-radius: var(--bkntc-r-xs);
		height: 46px;
	}

	.booknetic_empty_box
	{
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
		border: 1px solid var(--bkntc-border);
		min-height: 300px;
	}

	.booknetic_empty_box > img
	{
		width: auto;
		height: auto;
		max-width: 88px;
		max-height: 88px;
	}

	.booknetic_empty_box > span
	{
		margin: 18px 0 0;
		font-size: 14px;
		line-height: 21px;
		max-width: 300px;
	}

	/* ---------------------------------------------------------------
	   7. Date & time step
	   --------------------------------------------------------------- */
	/* calendar and slots sit SIDE BY SIDE, as in the original widget */
	.booknetic_date_time_area
	{
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20px;
	}

	.booknetic_calendar_div
	{
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.booknetic_time_div
	{
		flex: 0 0 420px;
		width: 420px;
	}

	/* the wrapper becomes the card, so month + arrows sit inside it */
	.booknetic_calendar_div
	{
		background: var(--bkntc-surface);
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
		padding-bottom: 14px;
	}

	#booknetic_calendar_area
	{
		background: transparent;
		box-shadow: none;
		border-radius: 0;
	}

	.booknetic_calendar_head
	{
		justify-content: space-between;
		padding: 20px 22px 10px;
	}

	.booknetic_calendar_head > div
	{
		padding: 0;
	}

	.booknetic_calendar_head > .booknetic_month_name
	{
		font-size: 17px;
		font-weight: 700;
		color: var(--bkntc-ink);
		letter-spacing: -.01em;
	}

	.booknetic_next_month,
	.booknetic_prev_month
	{
		width: 32px;
		height: 32px;
		line-height: 30px;
		text-align: center;
		font-size: 14px;
		color: var(--bkntc-ink-2);
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r-xs);
	}

	.booknetic_next_month:hover,
	.booknetic_prev_month:hover
	{
		border-color: var(--bkntc-border-hover);
		color: var(--bkntc-ink);
	}

	.booknetic_calendar
	{
		padding: 0 12px;
	}

	.booknetic_calendar > .booknetic_calendar_rows > .booknetic_td,
	.booknetic_calendar_rows > .booknetic_td:first-child,
	.booknetic_calendar_rows > .booknetic_td:last-child
	{
		width: calc(100% / 7);
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.booknetic_week_names > .booknetic_td
	{
		color: var(--bkntc-ink-2);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0;
		border-bottom: 0;
		padding: 6px 0 12px !important;
	}

	.booknetic_calendar_days
	{
		padding: 3px 0 !important;
	}

	/* flat numerals in a circle; selected day is a filled circle */
	.booknetic_calendar_days > div
	{
		width: 40px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		background-color: transparent;
		border-radius: 50%;
		font-size: 15px;
		font-weight: 500;
		color: var(--bkntc-ink);
		transition: background-color .12s ease;
	}

	.booknetic_calendar_days:not(.booknetic_calendar_empty_day) > div:hover
	{
		background-color: #EFF0FA;
	}

	.booknetic_calendar_days.booknetic_calendar_empty_day > div
	{
		color: #C6CBD5;
	}

	.booknetic_calendar_days.booknetic_calendar_selected_day > div
	{
		border-radius: 50%;
	}

	/* availability is conveyed by the date colour alone — the green load-meter
	   dash under each day is removed entirely */
	.booknetic_calendar_days > div > span
	{
		display: none;
	}

	/* unavailable dates: grey and genuinely not clickable */
	.booknetic_calendar_days.booknetic_calendar_empty_day,
	.booknetic_calendar_days.booknetic_calendar_empty_day > div
	{
		pointer-events: none;
		cursor: default;
	}

	/* --- slots --- */
	.booknetic_times_head
	{
		text-align: left;
		padding: 0 0 10px;
		font-size: 16px;
		font-weight: 700;
		color: var(--bkntc-ink);
	}

	.booknetic_rtl .booknetic_times_head
	{
		text-align: right;
	}

	.booknetic_times
	{
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 0 22px 22px;
		background: var(--bkntc-surface);
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_times_title
	{
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		padding: 18px 0 14px;
		border-bottom: 1px solid #EEF0F4;
	}

	.booknetic_times_list
	{
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		height: auto;
		overflow: visible;
		padding: 18px 0 0;
	}

	.booknetic_times_list.booknetic_clearfix:after
	{
		display: none;
	}

	/* outlined pills instead of grey blocks */
	.booknetic_times_list > div
	{
		float: none !important;
		/* two per row inside the 420px slot column */
		flex: 1 1 calc(50% - 5px);
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: 44px;
		margin: 0;
		padding: 0 12px;
		flex-direction: row;
		gap: 6px;

		background-color: var(--bkntc-surface);
		border: 1px solid #E4E8EF;
		border-radius: var(--bkntc-r-xs);
		box-shadow: none;

		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		color: #1D2433;
		transition: border-color .12s ease, box-shadow .12s ease;
	}

	.booknetic_times_list > div:hover
	{
		border-color: var(--bkntc-border-hover);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_times_list > div.booknetic_selected_time
	{
		border-color: transparent;
	}

	/* ---------------------------------------------------------------
	   8. Confirmation step — the "Booking Summary" card
	   Applies ONLY on this step, never frozen onto the other steps.
	   --------------------------------------------------------------- */
	.booknetic_confirm_container
	{
		height: auto;
		gap: 16px;
	}

	.booknetic_confirm_date_time
	{
		padding: 6px 24px;
		margin-bottom: 0;
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_confirm_date_time > div
	{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 20px;
		width: 100%;
		padding: 14px 0;
		border-bottom: 1px solid #EEF0F4;
		font-size: 14px;
		line-height: 22px;
	}

	.booknetic_confirm_date_time > div:last-child
	{
		border-bottom: 0;
	}

	.booknetic_confirm_date_time > div > span:first-child
	{
		flex: 0 0 auto;
		font-weight: 500;
	}

	.booknetic_confirm_date_time > div > span:last-child
	{
		text-align: right;
		color: var(--bkntc-ink);
		font-weight: 600;
		word-break: break-word;
	}

	/* summary column right, payment column left — as in the reference */
	.booknetic_confirm_step_body
	{
		flex-direction: row-reverse;
		align-items: stretch;
		gap: 18px;
	}

	.booknetic_confirm_sum_body
	{
		flex: 0 0 348px;
		width: 348px;
	}

	.booknetic_confirm_deposit_body
	{
		flex: 1 1 auto;
		width: auto;
	}

	.booknetic_confirm_sum_body_full_width,
	.booknetic_confirm_deposit_body_full_width
	{
		flex: 1 1 100%;
		width: 100%;
	}

	.booknetic_portlet
	{
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_confirm_step_body .booknetic_portlet_content
	{
		height: auto;
		min-height: 150px;
		padding: 18px 24px;
		margin-right: 0;
		overflow: visible;
	}

	/* hairline rows instead of the dashed leader line */
	.booknetic_confirm_details
	{
		padding: 12px 0;
		border-bottom: 1px solid #EEF0F4;
		font-size: 14px;
		line-height: 22px;
	}

	.booknetic_confirm_details:last-child
	{
		border-bottom: 0;
	}

	.booknetic_confirm_details:before
	{
		display: none;
	}

	.booknetic_confirm_details > .booknetic_confirm_details_title
	{
		background: transparent;
		color: var(--bkntc-ink-2);
		word-break: break-word;
	}

	.booknetic_confirm_details > .booknetic_confirm_details_price
	{
		position: static;
		background: transparent;
		font-weight: 600;
	}

	.booknetic_confirm_sum_price
	{
		height: 58px;
		padding: 0 24px;
		font-size: 15px;
		border-bottom-left-radius: var(--bkntc-r);
		border-bottom-right-radius: var(--bkntc-r);
	}

	.booknetic_confirm_sum_price > div:last-child
	{
		font-size: 20px;
		font-weight: 700;
	}

	.booknetic_deposit_price
	{
		border-radius: var(--bkntc-r-xs);
		padding: 14px 16px;
	}

	.booknetic_add_coupon,
	.booknetic_add_giftcard
	{
		border-radius: var(--bkntc-r-xs);
		border-color: #E4E8EF;
		padding: 4px;
	}

	.booknetic_add_coupon input,
	.booknetic_add_giftcard input
	{
		height: 32px;
		font-size: 14px;
	}

	/* core pins these via `.booknetic_add_coupon button` (0,1,1), which
	   outranks the generic .booknetic_btn_success rule above — but that
	   rule's line-height:44px still lands, leaving a 44px line box inside
	   a 30px button. Re-match both at higher specificity. */
	.booknetic_add_coupon .booknetic_btn_success,
	.booknetic_add_coupon .booknetic_btn_cancel,
	.booknetic_add_giftcard .booknetic_btn_success,
	.booknetic_add_giftcard .booknetic_btn_cancel
	{
		height: 32px !important;
		line-height: 32px !important;
		width: auto !important;
		min-width: 56px;
		padding: 0 16px !important;
		font-size: 12px !important;
	}

	/* core's .booknetic-cart-holder already does this — flex column,
	   flex-grow:1, justify-content:space-between — but its height:100%
	   dies against the `> div { height:auto }` rule in section 4, so it
	   shrink-wraps and the button lands under the card. Give the step
	   wrapper a floor and let the holder stretch into it, dropping the
	   button to the bottom just above the footer. */
	.booknetic_appointment_container_body > div[data-step-id="cart"]
	{
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* fallback gap if the percentage floor above ever fails to resolve */
	.booknetic_appointment button.bkntc_again_booking
	{
		margin-top: 40px;
	}

	/* ---------------------------------------------------------------
	   9. Buttons & form controls
	   --------------------------------------------------------------- */
	.booknetic_btn_primary,
	.booknetic_btn_secondary,
	.booknetic_btn_success
	{
		height: 44px;
		padding: 0 24px !important;
		font-size: 13px !important;
		line-height: 44px !important;
		letter-spacing: .02em !important;
		border-radius: var(--bkntc-r-xs) !important;
	}

	.booknetic_appointment .form-control
	{
		height: 48px;
		border-radius: var(--bkntc-r-xs) !important;
		border-color: #E4E8EF;
		font-size: 14px;
	}

	.booknetic_appointment textarea.form-control
	{
		height: auto;
	}

	.booknetic_appointment .form-row label
	{
		font-size: 13px;
		font-weight: 500;
		color: var(--bkntc-ink-2);
		margin-bottom: 6px;
	}

	/* ---------------------------------------------------------------
	   10. Success screen
	   --------------------------------------------------------------- */
	.booknetic_appointment_finished
	{
		min-height: 560px;
		border-radius: 0;
	}

	/* ---------------------------------------------------------------
	   11. Loading placeholders — match the new card geometry so the
	   panel does not visibly re-flow when real content replaces them.
	   --------------------------------------------------------------- */
	/* NB: no `display` is set on the *_box wrappers — `.booknetic_appointment
	   .booknetic_hidden { display: none }` must keep winning over them. */
	.booknetic_preloader_card1,
	.booknetic_preloader_card2
	{
		float: none !important;
		width: 100%;
		height: 84px;
		margin: 0 0 12px 0;
		border-radius: var(--bkntc-r-sm);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_preloader_card3
	{
		border-radius: var(--bkntc-r-sm);
	}

	/* ---------------------------------------------------------------
	   12. Wider tier — still a fixed px width, never a percentage
	   --------------------------------------------------------------- */
	@media only screen and (min-width: 1200px)
	{
		.booknetic_appointment
		{
			width: 980px;
			min-width: 980px;
			max-width: 980px;
		}
	}

}


/* ==========================================================================
   HEADER — title (left) · branding pill + cart (right)
   --------------------------------------------------------------------------
   Unguarded by media query on purpose: it restyles pre-existing elements at
   every width, not just desktop.

   The header is made a flex row so the title and the cart sit at opposite
   ends, and the cart is switched from absolute to static so it flows in that
   row. The branding pill is then absolutely placed just left of the cart.

   NOTE: the .bkntc_header_* rules further down are INERT in this CSS-only
   setup — they style markup (step counter, progress ring, relocated logo)
   that only exists if the companion plugin is installed. They are harmless
   and are kept so the file works unchanged if that markup is ever added.
   ========================================================================== */

/* Header grid: title | "x of y" | ring | cart, sequenced with order.
   The branding ribbon is NOT part of this — it is a sibling of the
   header and lives in the strip corner, so nothing here reserves space
   for it. minmax(0, 1fr) lets the title shrink and ellipsis rather than
   push the cart off the end. */
.booknetic_appointment_container_header
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	column-gap: 12px;
	align-items: center;
}



.booknetic_appointment_container_header .booknetic_appointment_container_header_text
{
	order: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* the cart button now flows in the header's grid instead of being
   pinned to the container, which would have made it overlap the ring */
.booknetic_appointment_container_header .booknetic_appointment_container_header_cart,
.booknetic_rtl .booknetic_appointment_container_header .booknetic_appointment_container_header_cart
{
	order: 4;
	position: static;
	right: auto;
	top: auto;
	transform: none;
}

/* Progress ring + "x of y" counter, next to the cart in the header
   (moved out of the strip). --i / --n are set on .booknetic_appointment
   rather than the strip's own steps_body, specifically so the value
   inherits down into these HEADER pseudo-elements too — steps_body and
   the header are siblings, not ancestor/descendant, so a value set on
   steps_body would never reach them. :has() matches DOM structure, not
   rendering, so this still resolves correctly with every step hidden.

   ::before / ::after become real grid items on a grid container, but
   always render before/after the two real children (title, cart)
   regardless — order overrides that so the visual sequence is
   title, counter, ring, cart no matter what the DOM/generation order
   actually is. */
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_appointment_step_element:nth-child(1 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --n: 1; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_appointment_step_element:nth-child(2 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --n: 2; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_appointment_step_element:nth-child(3 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --n: 3; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_appointment_step_element:nth-child(4 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --n: 4; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_appointment_step_element:nth-child(5 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --n: 5; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_appointment_step_element:nth-child(6 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --n: 6; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_appointment_step_element:nth-child(7 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --n: 7; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_appointment_step_element:nth-child(8 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --n: 8; }

.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_active_step:nth-child(1 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --i: 1; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_active_step:nth-child(2 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --i: 2; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_active_step:nth-child(3 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --i: 3; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_active_step:nth-child(4 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --i: 4; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_active_step:nth-child(5 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --i: 5; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_active_step:nth-child(6 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --i: 6; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_active_step:nth-child(7 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --i: 7; }
.booknetic_appointment:has(.booknetic_appointment_steps_body > .booknetic_active_step:nth-child(8 of .booknetic_appointment_step_element:not(.booknetic_menu_hidden))) { --i: 8; }

.booknetic_appointment_container_header::before
{
	order: 2;
	counter-reset: bkntc-i var(--i, 0) bkntc-n var(--n, 1);
	content: counter(bkntc-i) " of " counter(bkntc-n);
	font-size: 15px;
	font-weight: 500;
	color: var(--bkntc-ink-2, #475467);
	white-space: nowrap;
}

.booknetic_appointment_container_header::after
{
	order: 3;
	content: '';
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: conic-gradient(
		var(--bkntc-cfg-active, #4fbf65) calc(var(--i, 0) / var(--n, 1) * 100%),
		#E4E8EF 0
	);
	-webkit-mask: radial-gradient(circle at 50% 50%, #0000 calc(50% - 2px), #000 0);
	        mask: radial-gradient(circle at 50% 50%, #0000 calc(50% - 2px), #000 0);
}

@media only screen and (max-width: 1000px)
{
	.booknetic_appointment_container_header::before
	{
		font-size: 13px;
	}

	.booknetic_appointment_container_header::after
	{
		width: 20px;
		height: 20px;
	}
}
/* Its inner button is position:relative, and Booknetic offsets it with
   `right: 65px` (.booknetic-appointment-container-cart-btn-r-100) to clear the
   old rotated corner ribbon. On a relatively-positioned element that shifts it
   65px to the LEFT — straight over the "STEP x of y" label. The ribbon is gone
   from that corner now, so the offset is neutralised outright. */
.booknetic_appointment_container_header .booknetic-appointment-container-cart-btn,
.booknetic_rtl .booknetic_appointment_container_header .booknetic-appointment-container-cart-btn
{
	right: auto;
	left: auto;
	top: auto;
	bottom: auto;
}

/* Company logo (Settings > Company > "Display logo on booking panel").
   It used to sit at the top of the dark side rail; with that rail gone it is
   placed at the start of the header, separated from the step title by a
   hairline so it reads as a brand mark rather than an icon on the title. */



/* Branding pill — bottom-right of the contact bar, opposite the
   "Have any questions?" text on its left. It is the last child of
   .booknetic_appointment_container and cannot be reparented from CSS, so it
   is absolutely positioned; the container is position:static, so the anchor
   falls through to .booknetic_appointment (the panel) — the same anchor the
   bar itself uses at bottom:0.
     bar is 36px tall, pill is 20px (padding 3+3 + line-height 14)
     -> bottom = (36-20)/2 = 8px centres it in the bar
   z-index 3 keeps it above the bar background (z-index 2). Colours are
   dark-on-light because the bar is light grey, not the navy strip. */
.booknetic_powered_by
{
	position: absolute;
	top: auto;
	bottom: 8px;
	right: 30px;
	left: auto;
	z-index: 3;
	width: auto;
	transform: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 10px;
	line-height: 14px;
	background: rgba(16, 24, 40, .05);
	color: #667085;
	box-shadow: none;
	white-space: nowrap;
	text-decoration: none !important;
}


.booknetic_powered_by:hover
{
	background: rgba(16, 24, 40, .07);
	color: #344054;
}

.booknetic_powered_by > span
{
	display: inline;
	font-size: 11px;
	font-weight: 700;
	color: var(--bkntc-cfg-primary, #6c70dc);
}

.booknetic_rtl .booknetic_powered_by
{
	padding: 5px 10px;
	left: 78px;
	right: auto;
	transform: none;
}

.booknetic_rtl .booknetic_appointment_steps_footer
{
	text-align: right;
}

/* STEP x of y + ring */






/* 2 * pi * r, r = 11  ->  69.115 */

/* ===================== END CALENDA UI REVAMP (DESKTOP) ==================== */

/* ==========================================================================
   MOBILE / TABLET  (max-width: 1000px)                       rev.7 — 2026-09-03
   --------------------------------------------------------------------------
   Complements Booknetic's own (max-width: 1000px) block instead of replacing
   it. That block already stacks the panel, hides the step titles so only the
   numbered badges show, and turns the choice cards into rows. What follows
   brings the same visual language as the desktop revamp — rounded surfaces,
   hairline borders, flat calendar, pill slots — on top of that stacking.

   Deliberately NOT changed here:
     · the panel keeps height:auto and grows with its content (Booknetic's own
       mobile behaviour). A fixed box with an inner scroll area is worse on
       touch, so the page scrolls instead of the widget.
     · "Have any questions?" stays hidden — Booknetic hides it at this width,
       and the desktop bottom bar would crowd a phone screen.

   The tokens are redeclared because the desktop set lives inside the
   (min-width: 1001px) guard and does not reach this block.
   ========================================================================== */

@media only screen and (max-width: 1000px)
{

	.booknetic_appointment
	{
		--bkntc-canvas:        #F7F8FA;
		--bkntc-surface:       #FFFFFF;
		--bkntc-border:        #ECEFF3;
		--bkntc-rule:          #E7EAF0;
		--bkntc-ink:           #292d32;
		--bkntc-ink-2:         #475467;
		--bkntc-chevron:       #A9B2C0;
		--bkntc-r:             14px;
		--bkntc-r-sm:          12px;
		--bkntc-r-xs:          10px;
		--bkntc-shadow:        0 1px 2px rgba(16, 24, 40, .05);

		background-color: var(--bkntc-canvas);
		border: 1px solid var(--bkntc-border);
		border-radius: 16px;
		box-shadow: none;
		overflow: hidden;
	}

	/* ---- step strip: badges only, scrolls sideways if the list is long ---- */
	.booknetic_appointment_steps
	{
		padding: 0;
	}

	.booknetic_appointment_steps_body
	{
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		padding: 10px 16px;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.booknetic_appointment_steps_body::-webkit-scrollbar
	{
		display: none;
	}

	.booknetic_appointment_step_element
	{
		float: none !important;
		flex: 0 0 auto;
		margin: 0 !important;
	}

	/* geometry only — badge colours stay under Appearance control */
	.booknetic_badge
	{
		width: 26px;
		height: 26px;
		line-height: 26px;
		margin-right: 0;
		font-size: 11px;
		font-weight: 700;
		border-radius: 50%;
	}

	/* ---- header ---- */
	.booknetic_appointment_container_header
	{
		height: auto;
		padding: 13px 18px 10px;
		min-height: 60px;
		font-size: 18px;
		font-weight: 700;
		line-height: 26px;
		letter-spacing: -.01em;
		border-bottom: 1px solid var(--bkntc-rule);
	}



	.booknetic_appointment_container_body
	{
		padding-left: 16px;
		padding-right: 16px;
	}

	/* ---- choice cards: location & practitioner ---- */
	.booknetic_card
	{
		height: auto;
		margin: 0 0 10px 0;
		padding: 14px 38px 14px 14px;
		gap: 14px;
		background: var(--bkntc-surface);
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r-sm);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_card.booknetic_card_selected
	{
		padding: 13px 37px 13px 13px;
	}

	/* dashed strip -> chevron, as on desktop */
	.booknetic_card:not(.booknetic_card_selected):after
	{
		left: auto;
		bottom: auto;
		right: 16px;
		top: 50%;
		width: 8px;
		height: 8px;
		background-image: none;
		border-top: 2px solid var(--bkntc-chevron);
		border-right: 2px solid var(--bkntc-chevron);
		border-radius: 1px;
		transform: translateY(-50%) rotate(45deg);
	}

	.booknetic_rtl .booknetic_card
	{
		padding: 14px 14px 14px 38px;
	}

	.booknetic_rtl .booknetic_card:not(.booknetic_card_selected):after
	{
		right: auto;
		left: 16px;
		border-right: 0;
		border-left: 2px solid var(--bkntc-chevron);
		transform: translateY(-50%) rotate(-45deg);
	}

	.booknetic_card_image
	{
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin: 0;
	}

	.booknetic_card_title
	{
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: auto;
		margin: 0;
		line-height: 20px;
	}

	.booknetic_card_title_first
	{
		font-size: 15px;
		font-weight: 600;
		color: var(--bkntc-ink);
	}

	.booknetic_card_description
	{
		padding-top: 3px;
		font-size: 13px;
		line-height: 19px;
		color: var(--bkntc-ink-2);
	}

	/* ---- service cards ---- */
	.booknetic_service_card
	{
		margin-bottom: 10px;
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r-sm);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_service_card.booknetic_service_card_selected
	{
		border-width: 2px;
	}

	.booknetic_service_card_header
	{
		padding: 10px 0;
	}

	.booknetic_service_card_image
	{
		width: 42px;
		height: 42px;
		flex: 0 0 42px;
		margin: 0 12px 0 14px;
		border-radius: 50%;
	}

	.booknetic_service_card.booknetic_service_card_selected .booknetic_service_card_image
	{
		margin: 0 11px 0 13px;
	}

	.booknetic_service_card_title
	{
		height: auto;
		line-height: 20px;
	}

	.booknetic_service_card_title > span:first-child
	{
		font-size: 14px;
		font-weight: 600;
		color: var(--bkntc-ink);
	}

	.booknetic_service_card_price
	{
		font-size: 15px;
		font-weight: 600;
		padding: 0 14px;
	}

	.booknetic_service_card_description
	{
		padding: 0 14px 12px 68px;
		font-size: 12px;
		line-height: 19px;
		color: var(--bkntc-ink-2);
	}

	/* same empty-note collapse as desktop */
	.booknetic_service_card:not(:has(.booknetic_service_card_description > span:not(:empty))) .booknetic_service_card_description
	{
		display: none;
	}

	.booknetic_service_category,
	.booknetic_location_category
	{
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .06em;
		margin-top: 18px;
		margin-bottom: 8px;
	}

	.booknetic_service_search_input
	{
		border-radius: var(--bkntc-r-xs);
		height: 44px;
	}

	.booknetic_empty_box
	{
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
		min-height: 260px;
	}

	/* core leaves the empty-state SVG unconstrained, so it renders at its
	   natural size (~230px) and dwarfs the message. Cap it and tighten the
	   gap — core puts margin:30px on all four sides of the span. */
	.booknetic_empty_box > img
	{
		width: auto;
		height: auto;
		max-width: 72px;
		max-height: 72px;
	}

	.booknetic_empty_box > span
	{
		margin: 14px 0 0;
		font-size: 13px;
		line-height: 20px;
		max-width: 260px;
	}

	/* ---- date & time ---- */
	.booknetic_date_time_area
	{
		gap: 14px;
	}

	.booknetic_calendar_div
	{
		width: 100%;
		max-width: 100%;
		background: var(--bkntc-surface);
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
		padding-bottom: 10px;
	}

	#booknetic_calendar_area
	{
		background: transparent;
		box-shadow: none;
		border-radius: 0;
	}

	.booknetic_calendar_head
	{
		justify-content: space-between;
		padding: 16px 16px 8px;
	}

	.booknetic_calendar_head > div
	{
		padding: 0;
	}

	.booknetic_calendar_head > .booknetic_month_name
	{
		font-size: 16px;
		font-weight: 700;
		color: var(--bkntc-ink);
	}

	.booknetic_next_month,
	.booknetic_prev_month
	{
		width: 30px;
		height: 30px;
		line-height: 28px;
		text-align: center;
		font-size: 13px;
		color: var(--bkntc-ink-2);
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r-xs);
	}

	.booknetic_calendar
	{
		padding: 0 8px;
	}

	.booknetic_calendar > .booknetic_calendar_rows > .booknetic_td,
	.booknetic_calendar_rows > .booknetic_td:first-child,
	.booknetic_calendar_rows > .booknetic_td:last-child
	{
		width: calc(100% / 7);
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.booknetic_week_names > .booknetic_td
	{
		color: var(--bkntc-ink-2);
		font-size: 12px;
		font-weight: 600;
		border-bottom: 0;
		padding: 4px 0 8px !important;
	}

	.booknetic_calendar_days
	{
		padding: 2px 0 !important;
	}

	.booknetic_calendar_days > div
	{
		width: 36px;
		height: 36px;
		line-height: 36px;
		margin: 0 auto;
		background-color: transparent;
		border-radius: 50%;
		font-size: 14px;
		font-weight: 500;
		color: var(--bkntc-ink);
	}

	.booknetic_calendar_days.booknetic_calendar_selected_day > div
	{
		border-radius: 50%;
	}

	/* available = ink, unavailable = grey and not tappable, no green dash */
	.booknetic_calendar_days.booknetic_calendar_empty_day > div
	{
		color: #C6CBD5;
	}

	.booknetic_calendar_days.booknetic_calendar_empty_day,
	.booknetic_calendar_days.booknetic_calendar_empty_day > div
	{
		pointer-events: none;
		cursor: default;
	}

	.booknetic_calendar_days > div > span
	{
		display: none;
	}

	/* ---- slots ---- */
	.booknetic_time_div
	{
		width: 100%;
	}

	.booknetic_times_head
	{
		text-align: left;
		padding: 0 0 8px;
		font-size: 15px;
		font-weight: 700;
		color: var(--bkntc-ink);
	}

	.booknetic_times
	{
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 0;
		padding: 0 16px 16px;
		background: var(--bkntc-surface);
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_times_title
	{
		text-align: center;
		font-size: 13px;
		font-weight: 600;
		padding: 14px 0 12px;
		border-bottom: 1px solid #EEF0F4;
	}

	.booknetic_times_list
	{
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		height: auto;
		overflow: visible;
		padding: 14px 0 0;
	}

	.booknetic_times_list.booknetic_clearfix:after
	{
		display: none;
	}

	/* stack start/end time vertically. row layout let long strings
	   ("11:40 AM") wrap onto 2 lines while short ones ("1:00 PM")
	   stayed on 1, so cards in the same row came out different heights. */
	.booknetic_times_list > div
	{
		float: none !important;
		flex: 1 1 calc(50% - 4px);
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: auto;
		margin: 0;
		padding: 7px 10px;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		background-color: var(--bkntc-surface);
		border: 1px solid #E4E8EF;
		border-radius: var(--bkntc-r-xs);
		box-shadow: none;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.3;
		color: #1D2433;
	}

	.booknetic_times_list > div > div
	{
		white-space: nowrap;
	}

	.booknetic_times_list > div.booknetic_selected_time
	{
		border-color: transparent;
	}

	/* ---- confirmation ---- */
	.booknetic_portlet
	{
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_confirm_date_time
	{
		padding: 4px 16px;
		border: 1px solid var(--bkntc-border);
		border-radius: var(--bkntc-r);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_confirm_date_time > div
	{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		width: 100%;
		padding: 12px 0;
		border-bottom: 1px solid #EEF0F4;
		font-size: 13px;
		line-height: 20px;
	}

	.booknetic_confirm_date_time > div:last-child
	{
		border-bottom: 0;
	}

	.booknetic_confirm_date_time > div > span:last-child
	{
		text-align: right;
		font-weight: 600;
		color: var(--bkntc-ink);
	}

	.booknetic_confirm_step_body .booknetic_portlet_content
	{
		height: auto;
		min-height: 0;
		padding: 14px 16px;
		margin-right: 0;
		overflow: visible;
	}

	.booknetic_confirm_details
	{
		padding: 10px 0;
		border-bottom: 1px solid #EEF0F4;
		font-size: 13px;
		line-height: 20px;
	}

	.booknetic_confirm_details:last-child
	{
		border-bottom: 0;
	}

	.booknetic_confirm_details:before
	{
		display: none;
	}

	.booknetic_confirm_details > .booknetic_confirm_details_title
	{
		background: transparent;
		color: var(--bkntc-ink-2);
	}

	.booknetic_confirm_details > .booknetic_confirm_details_price
	{
		position: static;
		background: transparent;
		font-weight: 600;
	}

	.booknetic_confirm_sum_price
	{
		height: 52px;
		padding: 0 16px;
		font-size: 14px;
		border-bottom-left-radius: var(--bkntc-r);
		border-bottom-right-radius: var(--bkntc-r);
	}

	.booknetic_deposit_price
	{
		border-radius: var(--bkntc-r-xs);
		padding: 12px 14px;
	}

	.booknetic_add_coupon,
	.booknetic_add_giftcard
	{
		border-radius: var(--bkntc-r-xs);
		border-color: #E4E8EF;
		padding: 4px;
	}

	.booknetic_add_coupon input,
	.booknetic_add_giftcard input
	{
		height: 30px;
		font-size: 14px;
	}

	.booknetic_add_coupon .booknetic_btn_success,
	.booknetic_add_coupon .booknetic_btn_cancel,
	.booknetic_add_giftcard .booknetic_btn_success,
	.booknetic_add_giftcard .booknetic_btn_cancel
	{
		height: 30px !important;
		line-height: 30px !important;
		width: auto !important;
		min-width: 52px;
		padding: 0 14px !important;
		font-size: 12px !important;
	}

	/* ---- buttons & inputs ---- */
	.booknetic_btn_primary,
	.booknetic_btn_secondary,
	.booknetic_btn_success
	{
		height: 42px;
		padding: 0 18px !important;
		font-size: 12px !important;
		line-height: 42px !important;
		border-radius: var(--bkntc-r-xs) !important;
	}

	.booknetic_appointment .form-control
	{
		height: 46px;
		border-radius: var(--bkntc-r-xs) !important;
		border-color: #E4E8EF;
		font-size: 14px;
	}

	.booknetic_appointment textarea.form-control
	{
		height: auto;
	}

	.booknetic_appointment .form-row label
	{
		font-size: 13px;
		font-weight: 500;
		color: var(--bkntc-ink-2);
		margin-bottom: 6px;
	}

	.booknetic_warning_message
	{
		/* stays above the buttons — no room inline on a phone — but sized to
		   its text rather than stretched edge to edge. top:auto is REQUIRED:
		   core has its own (max-width:1000px) rule setting position:absolute
		   + top:20px, and with height:auto an element given BOTH top and
		   bottom uses top and ignores bottom — so core was pinning this 20px
		   inside the footer, on top of the BACK button. */
		position: absolute;
		top: auto;
		bottom: calc(100% + 14px);
		left: 16px;
		right: 16px;
		width: fit-content;
		max-width: calc(100% - 32px);
		height: auto;
		min-height: 0;
		border-radius: var(--bkntc-r-xs);
		line-height: 19px;
		padding: 8px 12px;
		margin: 0 auto;
		box-shadow: none;
		white-space: normal;
	}

	/* ---- loading placeholders match the new card geometry ---- */
	.booknetic_preloader_card1,
	.booknetic_preloader_card2
	{
		float: none !important;
		width: 100%;
		height: 72px;
		margin: 0 0 10px 0;
		border-radius: var(--bkntc-r-sm);
		box-shadow: var(--bkntc-shadow);
	}

	.booknetic_preloader_card3
	{
		border-radius: var(--bkntc-r-sm);
	}

}
/* ================= END CALENDA MOBILE REVAMP (max-width 1000px) ============ */


/* ==========================================================================
   LOGO ALIGNMENT (rev.8/11/12, ring content moved out — see UNGUARDED
   section further down for where it lives now)
   --------------------------------------------------------------------------
   The company logo was off-centre because the core stylesheet gives
   .booknetic_company_logo margin-top:25px / margin-bottom:10px — asymmetric,
   so flex centring could never look centred. Margins are zeroed and the
   image is capped so it stops inflating the strip.
   ========================================================================== */

.booknetic_company_logo
{
	margin: 0;
	flex: 0 0 auto;
	align-self: center;
	padding-right: 18px;
	border-right: 0;
}

.booknetic_rtl .booknetic_company_logo
{
	padding-right: 0;
	padding-left: 18px;
	border-right: 0;
	border-left: 0;
}

.booknetic_company_logo > img
{
	display: block;
	width: auto;
	height: auto;
	max-width: 130px;
	max-height: 52px;
	object-fit: contain;
}

@media only screen and (max-width: 1000px)
{
	.booknetic_company_logo
	{
		padding-right: 12px;
	}

	.booknetic_rtl .booknetic_company_logo
	{
		padding-right: 0;
		padding-left: 12px;
	}

	.booknetic_company_logo > img
	{
		max-width: 96px;
		max-height: 34px;
	}
}
/* =================== END LOGO ALIGNMENT (rev.8) ============================ */

/* ==========================================================================
   STEP LIST HIDDEN — the ring carries the progress on its own  rev.9
   --------------------------------------------------------------------------
   Only the step ITEMS are hidden, not .booknetic_appointment_steps itself, so
   the strip survives to hold the logo.

   Note this is NOT the Appearance > "Hide steps" option: that one hides the
   whole strip (and would take the logo with it) and also forces the panel to
   a 765px width. Leave that checkbox off.

   :has() matches on DOM structure, not on rendering, so --i / --n (see the
   UNGUARDED section further down) keep resolving correctly even though every
   step element is display:none.
   !important is required because jQuery's fadeIn writes display:block inline
   onto each step as it animates them in.
   ========================================================================== */

.booknetic_appointment_steps_body > .booknetic_appointment_step_element
{
	display: none !important;
}
/* ====================== END STEP LIST HIDDEN (rev.9) ====================== */

/* ==========================================================================
   STRIP + LOGO SIZE (rev.11/12)
   --------------------------------------------------------------------------
   Logo cap restored to roughly its original size so the mark reads at full
   size; strip padding sized to match.
   ========================================================================== */

.booknetic_appointment_steps
{
	padding: 12px 30px;
}

.booknetic_company_logo > img
{
	max-width: 200px;
	max-height: 92px;
}

@media only screen and (max-width: 1000px)
{
	.booknetic_appointment_steps
	{
		padding: 10px 16px;
	}

	.booknetic_company_logo > img
	{
		max-width: 140px;
		max-height: 54px;
	}
}
/* ===================== END STRIP + LOGO SIZE (rev.11) ====================== */

/* ==========================================================================
   MOBILE STRIP CLEAN-UP                                      rev.12 — 2026-09-03
   --------------------------------------------------------------------------
   Three things had drifted on mobile as the revisions stacked up:

   1. Doubled padding. rev.7 padded .booknetic_appointment_steps_body (10/16)
      while rev.11 padded .booknetic_appointment_steps (10/16) as well, so the
      strip carried 20px vertical / 32px horizontal. The strip now owns the
      padding and the body is zeroed, matching how desktop is arranged.

   2. Dead horizontal scroll. The body was overflow-x:auto so seven step
      badges could scroll sideways. The steps are hidden as of rev.9, so there
      is nothing left to scroll. Cleared.

   3. Logo too small to read at the restored strip height — raised to match
      the desktop treatment, scaled for a phone.
   ========================================================================== */

@media only screen and (max-width: 1000px)
{
	.booknetic_appointment_steps
	{
		padding: 12px 16px;
		gap: 12px;
	}

	.booknetic_appointment_steps_body
	{
		padding: 0;
		gap: 0;
		overflow: visible;
		flex-wrap: nowrap;
	}

	.booknetic_company_logo
	{
		padding-right: 14px;
	}

	.booknetic_rtl .booknetic_company_logo
	{
		padding-right: 0;
		padding-left: 14px;
	}

	.booknetic_company_logo > img
	{
		max-width: 150px;
		max-height: 64px;
	}
}
/* ================= END MOBILE STRIP CLEAN-UP (rev.12) ==================== */

/* ==========================================================================
   MOBILE STRIP LAYOUT BUGS                                   rev.14 — 2026-09-03
   --------------------------------------------------------------------------
   Two faults on a phone, both inherited from the core stylesheet:

   1. Huge empty navy block. booknetic.css carries
          @media (max-width: 768px) { .booknetic_appointment_steps.has-logo {
              height: 200px !important; } }
      and the template adds .has-logo whenever the company logo is enabled, so
      the strip was locked to 200px regardless of content. Released to auto.

   2. Logo on its own centred line with the label + ring dropped underneath.
      display:flex was only ever set on the strip inside the (min-width:1001px)
      guard, so below that it stayed a block box: the logo (itself display:flex
      with justify-content:center) filled the width, and the steps body became
      the next block down. The strip is now a flex row here too, and the logo
      is pinned to the start instead of centred.
   ========================================================================== */

@media only screen and (max-width: 1000px)
{
	.booknetic_appointment_steps
	{
		display: flex;
		align-items: center;
	}

	.booknetic_appointment_steps.has-logo
	{
		height: auto !important;
	}

	.booknetic_company_logo
	{
		justify-content: center;
	}
}
/* ================ END MOBILE STRIP LAYOUT BUGS (rev.14) ================== */

/* ==========================================================================
   LOGO CENTRED — the strip is a one-cell grid so the logo can centre against
   the full strip width. (Was shared with the ring before the ring moved to
   the header — see the UNGUARDED section below.)
   ========================================================================== */

.booknetic_appointment_steps
{
	display: grid;
	grid-template-columns: 1fr;
}

.booknetic_company_logo
{
	grid-area: 1 / 1;
	justify-self: center;
	align-self: center;
}

/* The steps body has no visible content left — its step items are hidden
   (rev.9) and the ring/counter moved to the header — but the empty box was
   still rendering with its own padding, and as an auto-placed item in this
   1-column grid it landed in ROW 2, adding ~22px of dead space under the
   logo at both breakpoints. Hidden outright. :has() still resolves --i/--n
   through it, since that matches DOM structure, not rendering. */
.booknetic_appointment_steps_body
{
	display: none;
}
/* ============================ END LOGO CENTRED ============================ */



/* ==========================================================================
   PILL -> NAVY STRIP (TOP-RIGHT) · NO INPUT ZOOM             rev.20 — 2026-09-03
   --------------------------------------------------------------------------
   1. The branding pill moves out of the panel header and into the navy strip,
      top-right, sitting above the progress. This removes the title/pill
      collision at the source instead of reserving a gap for it, so the header
      is left with just the step title and the cart icon.

      It is a child of .booknetic_appointment_container, which was
      position:relative AND overflow:hidden — that combination anchored the
      pill to the container and clipped anything outside it, so the strip was
      unreachable. Making the container static hands the anchor to
      .booknetic_appointment (position:relative in the core CSS) and clearing
      the overflow lets the pill sit above the container's own box. The inner
      scroll is unaffected: it lives on .booknetic_appointment_container_body,
      and the rounded corners are still clipped by the shell.

      Colours flip to light-on-dark, since the pill is now on the navy panel.
      The brand word follows --bkntc-step-label; if you set Panel background to
      a light colour, both of these need darkening.

   2. The reserved gap shrinks to a plain title/cart separation, as nothing
      floats between them any more.

   3. iOS Safari zooms the page whenever a focused field's font-size is under
      16px. The inputs were 14px, so every tap on a text field zoomed in.
      Raising them to exactly 16px on touch widths stops that, without the
      accessibility cost of maximum-scale=1 in the viewport meta (which CSS
      could not set anyway).
   ========================================================================== */

.booknetic_appointment_container
{
	position: static;
	overflow: visible;
}


.booknetic_powered_by:hover
{
	background: rgba(16, 24, 40, .09);
	color: #344054;
}

.booknetic_powered_by > span
{
	color: var(--bkntc-cfg-primary, #6c70dc);
}
.booknetic_rtl .booknetic_powered_by
{
	left: 30px;
	right: auto;
	transform: none;
}

@media only screen and (max-width: 1000px)
{
	.booknetic_appointment
	{
		padding-bottom: 32px;
	}
	.booknetic_appointment_steps
	{
		position: static;
	}
	.booknetic_appointment_steps_footer
	{
		display: block !important;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 32px;
		padding: 0 16px;
		background: #F1F3F6;
		border-top: 1px solid var(--bkntc-rule);
		font-size: 11px;
		line-height: 32px;
	}
	.booknetic_appointment_steps_footer > div
	{
		display: inline;
		margin-left: 4px;
	}
	/* same bottom-bar placement, scaled for the 32px mobile bar:
	   pill is 16px tall (padding 2+2 + line-height 12), so
	   bottom = (32-16)/2 = 8px, right aligned to the bar's 16px padding */
	.booknetic_powered_by
	{
		bottom: 8px;
		right: 16px;
		top: auto;
		left: auto;
		transform: none;
		width: auto;
		border-radius: 999px;
		padding: 2px 8px;
		font-size: 9px;
		line-height: 12px;
	}

	.booknetic_powered_by > span
	{
		font-size: 9px;
	}

	.booknetic_rtl .booknetic_powered_by
	{
		right: auto;
		left: 16px;
		transform: none;
	}

	/* >= 16px is the threshold that stops iOS Safari auto-zooming on focus */
	.booknetic_appointment .form-control,
	.booknetic_appointment input,
	.booknetic_appointment select,
	.booknetic_appointment textarea
	{
		font-size: 16px;
	}
}
/* ========= END PILL TO NAVY STRIP / NO INPUT ZOOM (rev.20) =============== */