/**
 * IZI Nails booking bridge stylesheet.
 *
 * Baseline: BangNails IZI UI 0.2.3's assets/css/bridge.css. Every selector
 * remains below .bn-izi so it affects only supported shortcode output.
 */

/* Keep .bn-izi a normal block: no containing block for vendor positioning. */
.bn-izi,
.bn-izi * {
	box-sizing: border-box;
}

/* Preserve the vendor utility where theme CSS would otherwise override it. */
.bn-izi .hidden {
	display: none !important;
}

/* Prevent long booking content from escaping the viewport. */
.bn-izi :is(
	input:not([type]),
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	select,
	textarea
),
.bn-izi [class*="col-"],
.bn-izi .service-card,
.bn-izi .service-card > .service-info,
.bn-izi button.btn-service-choose {
	max-width: 100%;
	min-width: 0;
}

.bn-izi :is(
	input:not([type]),
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	select,
	textarea
) {
	width: 100%;
}

.bn-izi textarea {
	resize: vertical;
}

.bn-izi .service-card,
.bn-izi .service-card > .service-info,
.bn-izi button.btn-service-choose {
	overflow-wrap: anywhere;
}

/* Only the primary accent adapts to the active theme; neutral UI stays local. */
.bn-izi {
	--bn-primary: var(--cmsmasters-colors-primary, var(--e-global-color-primary, #66715f));
	--bn-accent: var(--cmsmasters-colors-accent, var(--e-global-color-accent, #c08a99));
	--bn-on-primary: #fff;
	--bn-text: var(--cmsmasters-colors-text, var(--e-global-color-text, #5b534a));
	--bn-muted: #706861;
	--bn-muted: color-mix(in srgb, var(--bn-text) 72%, var(--cmsmasters-colors-bg, #fff));
	--bn-border: var(--cmsmasters-colors-bd, var(--e-global-color-border, #ded6cb));
	--bn-surface: var(--cmsmasters-colors-bg, var(--e-global-color-background, #fff));
	--bn-selected-surface: var(--cmsmasters-colors-alternate, var(--e-global-color-alternate, #faf5ec));
	--bn-input-background: #fff;
	/* The IZI runtime uses the Bootstrap system stack, not La Diva's font tokens. */
	--bn-izi-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--bn-heading-font: var(--bn-izi-font-sans);
	--bn-body-font: var(--bn-izi-font-sans);

	--bn-primary-hover: #1a5ebb;
	--bn-primary-hover: color-mix(in srgb, var(--bn-primary) 82%, #000);

	--bn-dark-hover: #222b3a;
	--bn-dark-hover: color-mix(in srgb, var(--bn-text) 82%, #fff);

	--bn-button-primary-bg: var(--bn-primary);
	--bn-button-primary-text: var(--bn-on-primary);
	--bn-button-primary-hover-bg: var(--bn-primary-hover);
	--bn-button-primary-hover-text: var(--bn-on-primary);

	--bn-button-light-bg: var(--bn-surface);
	--bn-button-light-text: var(--bn-text);
	--bn-button-light-hover-bg: var(--bn-primary);
	--bn-button-light-hover-text: var(--bn-on-primary);

	--bn-button-dark-bg: var(--bn-text);
	--bn-button-dark-text: #fff;
	--bn-button-dark-hover-bg: var(--bn-accent);
	--bn-button-dark-hover-text: #fff;
	--bn-button-radius: var(--radius-btn, 50px);
}

/* Original booking typography and component foundation. */
.bn-izi {
	color: var(--bn-text);
	font-family: var(--bn-body-font);
	line-height: 1.5;
}

.bn-izi :is(.step-label, .category-label, .technicien-label, .service-meta, .staff-service-meta, .page-subtitle) {
	color: var(--bn-muted);
	font-family: var(--bn-body-font);
}

.bn-izi #overModal .staff-modal .staff-modal-sub,
.bn-izi #cancelModal .staff-modal .staff-modal-sub,
.bn-izi [id^="staffModal_"] .staff-modal .staff-modal-sub {
	color: var(--bn-muted);
	font-family: var(--bn-body-font);
}

.bn-izi .step-label {
	margin: 0 0 .5rem;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bn-izi .page-title {
	margin: 0;
	color: var(--bn-text);
	font-family: var(--bn-heading-font);
	font-weight: 600;
	line-height: 1.2;
}

.bn-izi #overModal .staff-modal .staff-modal-title,
.bn-izi #cancelModal .staff-modal .staff-modal-title,
.bn-izi [id^="staffModal_"] .staff-modal .staff-modal-title {
	margin: 0;
	color: var(--bn-text);
	font-family: var(--bn-heading-font);
	font-weight: 600;
	line-height: 1.2;
}

.bn-izi .page-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.bn-izi .page-subtitle {
	margin: .5rem 0 1.5rem;
}

.bn-izi .back-link {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	margin-bottom: 1rem;
	color: var(--bn-text);
	font-family: var(--bn-body-font);
	font-weight: 600;
	text-decoration: none;
}

.bn-izi .back-link:is(:hover, :focus-visible) {
	color: var(--bn-primary-hover);
	text-decoration: underline;
}

.bn-izi .bn-progress {
	overflow: hidden;
	width: 100%;
	height: .375rem;
	border-radius: 999px;
	background: var(--bn-border);
}

.bn-izi .bn-progress-bar {
	width: var(--bn-progress-value, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--bn-primary);
	transition: width 160ms ease;
}

.bn-izi :is(.search-box, .service_search) {
	position: relative;
	margin: 1rem 0;
}

.bn-izi :is(
	.search-box input,
	.service_search,
	input:not([type]),
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	select,
	textarea
) {
	border: 1px solid var(--bn-border);
	border-radius: .25rem;
	background: var(--bn-input-background);
	color: var(--bn-text);
	font-family: var(--bn-body-font);
	font-size: 1rem;
	line-height: 1.5;
}

.bn-izi :is(
	.search-box input,
	.service_search,
	input:not([type]),
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	select,
	textarea
):focus-visible {
	border-color: var(--bn-primary);
	outline: 3px solid color-mix(in srgb, var(--bn-primary) 30%, transparent);
	outline-offset: 1px;
}

/* The booking search field must not inherit La Diva's low-contrast input ink. */
.bn-izi .search-box .service_search,
.bn-izi .search-box .service_search:focus {
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
}

.bn-izi .search-box .service_search::placeholder {
	color: var(--bn-muted);
	opacity: 1;
}

/* Keep the service search compact and independent from La Diva input sizing. */
.bn-izi .booking_list_service > .search-box {
	display: flex !important;
	gap: .625rem;
	align-items: center;
	margin: .75rem 0 1.25rem;
	padding: .625rem .875rem !important;
}

.bn-izi .booking_list_service > .search-box .service_search {
	min-height: 0 !important;
	padding: .3125rem 0 !important;
}

.bn-izi .service-card {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--bn-border);
	border-radius: .5rem;
	background: var(--bn-surface);
	color: var(--bn-text);
}

.bn-izi .service-card {
	padding: 1rem;
}

.bn-izi .service-card.added,
.bn-izi .service-card:has(.service-name.added) {
	border-color: var(--bn-primary);
	background: var(--bn-selected-surface);
}

.bn-izi :is(.service-info, .staff-service-name, .technicien-value) {
	min-width: 0;
	color: var(--bn-text);
	font-family: var(--bn-body-font);
}

.bn-izi .service-info {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bn-izi :is(.service-name, .staff-service-name) {
	margin: 0;
	font-weight: 600;
	overflow-wrap: break-word;
}

/*
 * Service names may occupy their available text column and wrap at ordinary
 * word boundaries. The action stays independently sized, so long translated
 * labels do not collide with it or split in the middle of a word.
 */
.bn-izi .service-card > .service-info .service-name {
	overflow: visible;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
	text-wrap: balance;
	white-space: normal;
}

.bn-izi .service-meta,
.bn-izi .staff-service-meta {
	display: block;
	margin-top: .25rem;
	font-size: .875rem;
}

/* IZI renders the amount and currency inside this one real price wrapper. */
.bn-izi .service-meta .service-price {
	display: inline-block;
	white-space: nowrap;
}

.bn-izi :is(.service-meta, .staff-service-meta) > svg {
	display: inline-block;
	margin-right: .25rem;
	vertical-align: -.2em;
}

.bn-izi .staff-service-card {
	position: relative;
	border: 1px solid var(--bn-border);
	border-radius: .5rem;
	background: var(--bn-surface);
	color: var(--bn-text);
	padding: 1rem;
}

.bn-izi .technicien-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
	gap: .5rem 1rem;
	align-items: center;
	border: 1px solid var(--bn-border);
	border-radius: .5rem;
	background: var(--bn-surface);
	color: var(--bn-text);
	padding: .875rem 1rem;
}

.bn-izi .technicien-label {
	margin: 0;
	color: var(--bn-muted);
	font-family: var(--bn-body-font);
	font-size: .875rem;
	white-space: nowrap;
}

.bn-izi .technicien-value {
	font-weight: 600;
	overflow-wrap: break-word;
	text-align: right;
}

/* The login template places the two radio controls directly in this row. */
.bn-izi form[id^="nails-login-"] .gap-form > .text-center {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	align-items: center;
	justify-content: center;
}

.bn-izi form[id^="nails-login-"] input.erp_login_type {
	flex: 0 0 auto;
	width: auto;
	min-width: auto;
	margin: 0;
	accent-color: var(--bn-primary);
}

.bn-izi form[id^="nails-login-"] label[for^="erp_login_type_"] {
	margin: 0;
	padding: .25rem;
	color: var(--bn-text) !important;
	font-family: var(--bn-body-font);
	font-weight: 600;
	line-height: 1.3;
}

.bn-izi form[id^="nails-login-"] input.erp_login_type:checked + label {
	color: var(--bn-text) !important;
}

.bn-izi form[id^="nails-login-"] :is(label, input, .bn-label) {
	color: #0f1d36 !important;
	-webkit-text-fill-color: #0f1d36;
}

.bn-izi :is(
	form[id^="nails-login-"],
	form[id^="nails-register-"],
	form[id^="nails-reset-pass-"]
) .bn-label > .req {
	color: #dc3545 !important;
	-webkit-text-fill-color: #dc3545 !important;
}

.bn-izi form[id^="nails-login-"] input.erp_login_type:focus-visible + label {
	border-radius: .25rem;
	outline: 3px solid color-mix(in srgb, var(--bn-primary) 30%, transparent);
	outline-offset: 2px;
}

/* City markup is rendered by IZI as image, one label, then the selection badge. */
.bn-izi .city-card {
	position: relative;
	overflow: hidden;
	background: var(--bn-border);
}

.bn-izi .city-card > img {
	display: block;
	width: 100%;
	height: clamp(10rem, 25vw, 16rem);
	object-fit: cover;
}

.bn-izi .city-card > .city-name {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1rem 4rem;
	color: #fff;
	font-family: var(--bn-body-font);
	font-weight: 700;
	text-align: center;
	text-shadow: 0 1px 6px rgb(0 0 0 / 40%);
	pointer-events: none;
}

.bn-izi .city-card > .city-check {
	z-index: 1;
}

.bn-izi [id^="staffModal_"] .staff-avatar-placeholder > img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.bn-izi .add-service-dashed {
	width: 100%;
	padding: 1rem;
	border: 1px dashed var(--bn-border);
	border-radius: .5rem;
	background: transparent;
	color: var(--bn-text);
	font-family: var(--bn-body-font);
	font-weight: 600;
}

.bn-izi .add-service-dashed:is(:hover, :focus-visible) {
	border-color: var(--bn-primary);
	color: var(--bn-primary-hover);
}

/* Reserve the native action-bar height only for the Step 4 staff container. */
@media (max-width: 767.98px) {
	.bn-izi .container-sticky:has(> .booking_list_service_staff) {
		padding-bottom: 6rem;
	}
}

/*
 * IZI owns modal overlay state: .modal-overlay is closed and
 * .modal-overlay.open is visible. Bridge styles only the known modal content
 * below; it never changes an overlay's display, visibility, opacity,
 * pointer-events, position, or z-index.
 */
.bn-izi #overModal .staff-modal,
.bn-izi #cancelModal .staff-modal,
.bn-izi [id^="staffModal_"] .staff-modal {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	overflow: hidden;
	width: min(100%, 42rem);
	max-height: min(90vh, 48rem);
	border: 1px solid var(--bn-border);
	border-radius: .5rem;
	background: var(--bn-surface);
	color: var(--bn-text);
}

.bn-izi #overModal .staff-modal :is(.staff-modal-header, .staff-modal-footer),
.bn-izi #cancelModal .staff-modal :is(.staff-modal-header, .staff-modal-footer),
.bn-izi [id^="staffModal_"] .staff-modal :is(.staff-modal-header, .staff-modal-footer) {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
}

.bn-izi #overModal .staff-modal .staff-modal-header,
.bn-izi #cancelModal .staff-modal .staff-modal-header,
.bn-izi [id^="staffModal_"] .staff-modal .staff-modal-header {
	border-bottom: 1px solid var(--bn-border);
}

.bn-izi #overModal .staff-modal .staff-modal-footer,
.bn-izi #cancelModal .staff-modal .staff-modal-footer,
.bn-izi [id^="staffModal_"] .staff-modal .staff-modal-footer {
	border-top: 1px solid var(--bn-border);
	padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.bn-izi #overModal .staff-modal .staff-list,
.bn-izi #cancelModal .staff-modal .staff-list,
.bn-izi [id^="staffModal_"] .staff-modal .staff-list {
	min-height: 0;
	overflow-y: auto;
	padding: 1rem 1.25rem;
}

.bn-izi [id^="staffModal_"] .staff-modal .staff-option {
	display: flex;
	gap: .875rem;
	align-items: center;
	padding: .875rem 1rem;
	border-bottom: 1px solid var(--bn-border);
}

.bn-izi [id^="staffModal_"] .staff-modal :is(.btn-cancel, .btn-confirm) {
	font-family: var(--bn-body-font);
	font-weight: 600;
}

.bn-izi [id^="staffModal_"] .staff-modal .btn-cancel {
	border-color: var(--bn-border) !important;
	background: var(--bn-surface) !important;
	color: var(--bn-text) !important;
}

.bn-izi [id^="staffModal_"] .staff-modal .btn-confirm {
	border-color: var(--bn-primary) !important;
	background: var(--bn-primary) !important;
	color: var(--bn-on-primary) !important;
}

/* Footer control presentation is intentionally limited to staff selection. */
.bn-izi [id^="staffModal_"] .staff-modal-footer :is(.btn-cancel, .btn-confirm):is(:hover, :active) {
	box-shadow: none !important;
	filter: none !important;
}

.bn-izi [id^="staffModal_"] .staff-modal-footer .btn-cancel:is(:hover, :active) {
	border-color: var(--bn-text) !important;
	background: var(--bn-surface) !important;
	color: var(--bn-text) !important;
}

.bn-izi [id^="staffModal_"] .staff-modal-footer .btn-confirm:is(:hover, :active) {
	border-color: var(--bn-primary-hover) !important;
	background: var(--bn-primary-hover) !important;
	color: var(--bn-on-primary) !important;
}

.bn-izi [id^="staffModal_"] .staff-modal-footer :is(.btn-cancel, .btn-confirm):focus-visible {
	border-radius: var(--bn-button-radius);
	outline: 3px solid var(--bn-accent) !important;
	outline-offset: 2px;
}

.bn-izi [id^="staffModal_"] .staff-modal-footer :is(.btn-cancel, .btn-confirm):is(:disabled, [aria-disabled="true"], .disabled) {
	cursor: not-allowed;
	opacity: .55;
	pointer-events: none;
}

/* Preserve the actual Lucide outline icons emitted by the IZI templates. */
.bn-izi .service-card > .service-info > .service-meta > svg.lucide,
.bn-izi .staff-service-meta > svg.lucide,
.bn-izi .summary-info .info-row > svg.lucide:not(.lucide-map-pin) {
	fill: none !important;
	stroke: currentColor !important;
}

/* La Diva can fill SVG child paths; preserve the vendor map-pin outlines only. */
.bn-izi :is(.salon-addr, .summary-info .info-row, .account-icon) > svg.lucide-map-pin,
.bn-izi :is(.salon-addr, .summary-info .info-row, .account-icon) > svg.lucide-map-pin > :is(path, circle) {
	fill: none !important;
	stroke: currentColor !important;
}

/*
 * Repeat .bn-izi to keep the archived selector's theme-override specificity
 * while satisfying the runtime stylesheet scope check.
 */
.bn-izi.bn-izi.bn-izi :is(
	button.btn-bn-primary,
	input.btn-bn-primary[type="button"],
	input.btn-bn-primary[type="submit"],
	input.btn-bn-primary[type="reset"],
	a.btn-bn-primary,
	button.btn-service-choose,
	button.btn-light,
	input.btn-light[type="button"],
	input.btn-light[type="submit"],
	a.btn-light,
	button.btn-black,
	input.btn-black[type="button"],
	input.btn-black[type="submit"],
	a.btn-black,
	button.lte-btn,
	input.lte-btn[type="button"],
	input.lte-btn[type="submit"],
	a.lte-btn
) {
	position: relative !important;
	isolation: isolate !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-radius: var(--bn-button-radius) !important;
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	overflow: hidden !important;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease !important;
}

/*
 * La Diva adds opaque transition layers to action controls through ::before and
 * ::after. These exact vendor buttons retain their own state markup while the
 * parent-theme layer cannot obscure their labels.
 */
.bn-izi.bn-izi.bn-izi button.btn-service-choose::before,
.bn-izi.bn-izi.bn-izi button.btn-service-choose::after,
.bn-izi.bn-izi.bn-izi button.btn-bn-primary::before,
.bn-izi.bn-izi.bn-izi button.btn-bn-primary::after,
.bn-izi.bn-izi.bn-izi a.btn-bn-primary::before,
.bn-izi.bn-izi.bn-izi a.btn-bn-primary::after {
	background: none !important;
	background-image: none !important;
	pointer-events: none;
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-bn-primary,
	input.btn-bn-primary[type="button"],
	input.btn-bn-primary[type="submit"],
	input.btn-bn-primary[type="reset"]
) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: .875rem 2rem !important;
	font-family: var(--bn-body-font) !important;
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-bn-primary,
	input.btn-bn-primary[type="button"],
	input.btn-bn-primary[type="submit"],
	input.btn-bn-primary[type="reset"],
	a.btn-bn-primary
),
.bn-izi.bn-izi.bn-izi a.btn-bn-primary:link,
.bn-izi.bn-izi.bn-izi a.btn-bn-primary:visited {
	border-color: var(--bn-button-primary-bg) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-button-primary-bg) !important;
	background-color: var(--bn-button-primary-bg) !important;
	background-image: none !important;
	color: var(--bn-button-primary-text) !important;
	-webkit-text-fill-color: var(--bn-button-primary-text) !important;
	overflow: hidden !important;
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-bn-primary,
	input.btn-bn-primary[type="button"],
	input.btn-bn-primary[type="submit"],
	input.btn-bn-primary[type="reset"],
	a.btn-bn-primary
):is(:focus, :focus-visible, :active) {
	border-color: var(--bn-button-primary-bg) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-button-primary-bg) !important;
	background-color: var(--bn-button-primary-bg) !important;
	background-image: none !important;
	color: var(--bn-button-primary-text) !important;
	-webkit-text-fill-color: var(--bn-button-primary-text) !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

@media (hover: hover) and (pointer: fine) {
	.bn-izi.bn-izi.bn-izi :is(
		button.btn-bn-primary,
		input.btn-bn-primary[type="button"],
		input.btn-bn-primary[type="submit"],
		input.btn-bn-primary[type="reset"],
		a.btn-bn-primary
	):hover {
		border-color: var(--bn-button-primary-hover-bg) !important;
		background: var(--bn-button-primary-hover-bg) !important;
		background-color: var(--bn-button-primary-hover-bg) !important;
		color: var(--bn-button-primary-hover-text) !important;
		-webkit-text-fill-color: var(--bn-button-primary-hover-text) !important;
	}
}

.bn-izi.bn-izi.bn-izi button.btn-service-choose {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center;
	justify-content: center;
	gap: 0;
	inline-size: auto;
	min-inline-size: auto;
	max-inline-size: 100%;
	padding: .3125rem 1.125rem !important;
	border-color: var(--bn-border, #dce3ed) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-surface) !important;
	background-color: var(--bn-surface) !important;
	background-image: none !important;
	color: var(--bn-text) !important;
	-webkit-text-fill-color: var(--bn-text) !important;
	box-shadow: none !important;
	overflow: hidden !important;
	font-family: var(--bn-body-font) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.25;
	white-space: nowrap !important;
}

.bn-izi.bn-izi.bn-izi button.btn-service-choose.btn-added {
	border-color: var(--bn-primary) !important;
	background: var(--bn-primary) !important;
	background-color: var(--bn-primary) !important;
	color: var(--bn-on-primary) !important;
	-webkit-text-fill-color: var(--bn-on-primary) !important;
}

.bn-izi.bn-izi.bn-izi button.btn-service-choose.btn-add:is(:focus, :focus-visible, :active) {
	border-color: var(--bn-border) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-surface) !important;
	background-color: var(--bn-surface) !important;
	background-image: none !important;
	color: var(--bn-text) !important;
	-webkit-text-fill-color: var(--bn-text) !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

.bn-izi.bn-izi.bn-izi button.btn-service-choose.btn-added:is(:focus, :focus-visible, :active) {
	border-color: var(--bn-primary) !important;
	background: var(--bn-primary) !important;
	background-color: var(--bn-primary) !important;
	color: var(--bn-on-primary) !important;
	-webkit-text-fill-color: var(--bn-on-primary) !important;
}


.bn-izi.bn-izi.bn-izi button.btn-service-choose > :is(
	.btn-schoose,
	.btn-schoosed
):not(.hidden) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	inline-size: auto;
	min-inline-size: 0;
	position: relative !important;
	z-index: 1 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	white-space: nowrap;
}

.bn-izi.bn-izi.bn-izi button.btn-service-choose > :is(
	.btn-schoose,
	.btn-schoosed
):not(.hidden) > i {
	flex: 0 0 auto;
}

.bn-izi.bn-izi.bn-izi button.btn-service-choose.btn-add:focus-visible {
	border-color: var(--bn-primary) !important;
	outline: 3px solid var(--bn-accent) !important;
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.bn-izi.bn-izi.bn-izi button.btn-service-choose.btn-add:hover {
		border-color: var(--bn-primary) !important;
		background: var(--bn-primary) !important;
		background-color: var(--bn-primary) !important;
		color: var(--bn-on-primary) !important;
		-webkit-text-fill-color: var(--bn-on-primary) !important;
	}
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-light,
	input.btn-light[type="button"],
	input.btn-light[type="submit"],
	a.btn-light
),
.bn-izi.bn-izi.bn-izi a.btn-light:link,
.bn-izi.bn-izi.bn-izi a.btn-light:visited {
	border-color: var(--bn-text) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-button-light-bg) !important;
	background-color: var(--bn-button-light-bg) !important;
	color: var(--bn-button-light-text) !important;
	-webkit-text-fill-color: var(--bn-button-light-text) !important;
	overflow: hidden !important;
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-light,
	input.btn-light[type="button"],
	input.btn-light[type="submit"],
	a.btn-light
):is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--bn-button-light-hover-bg) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-button-light-hover-bg) !important;
	background-color: var(--bn-button-light-hover-bg) !important;
	color: var(--bn-button-light-hover-text) !important;
	-webkit-text-fill-color: var(--bn-button-light-hover-text) !important;
	overflow: hidden !important;
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-black,
	input.btn-black[type="button"],
	input.btn-black[type="submit"],
	a.btn-black
),
.bn-izi.bn-izi.bn-izi a.btn-black:link,
.bn-izi.bn-izi.bn-izi a.btn-black:visited {
	border-color: var(--bn-button-dark-bg) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-button-dark-bg) !important;
	background-color: var(--bn-button-dark-bg) !important;
	color: var(--bn-button-dark-text) !important;
	-webkit-text-fill-color: var(--bn-button-dark-text) !important;
	overflow: hidden !important;
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-black,
	input.btn-black[type="button"],
	input.btn-black[type="submit"],
	a.btn-black
):is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--bn-button-dark-hover-bg) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-button-dark-hover-bg) !important;
	background-color: var(--bn-button-dark-hover-bg) !important;
	color: var(--bn-button-dark-hover-text) !important;
	-webkit-text-fill-color: var(--bn-button-dark-hover-text) !important;
	overflow: hidden !important;
}

.bn-izi.bn-izi.bn-izi :is(button.lte-btn, input.lte-btn, a.lte-btn):not(
	.btn-bn-primary,
	.btn-light,
	.btn-black
),
.bn-izi.bn-izi.bn-izi a.lte-btn:not(.btn-bn-primary):not(.btn-light):not(.btn-black):link,
.bn-izi.bn-izi.bn-izi a.lte-btn:not(.btn-bn-primary):not(.btn-light):not(.btn-black):visited {
	border-color: var(--bn-button-primary-bg) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-button-primary-bg) !important;
	background-color: var(--bn-button-primary-bg) !important;
	color: var(--bn-button-primary-text) !important;
	-webkit-text-fill-color: var(--bn-button-primary-text) !important;
	overflow: hidden !important;
}

.bn-izi.bn-izi.bn-izi :is(button.lte-btn, input.lte-btn, a.lte-btn):not(
	.btn-bn-primary,
	.btn-light,
	.btn-black
):is(:hover, :focus, :focus-visible, :active) {
	border-color: var(--bn-button-primary-hover-bg) !important;
	border-radius: var(--bn-button-radius) !important;
	background: var(--bn-button-primary-hover-bg) !important;
	background-color: var(--bn-button-primary-hover-bg) !important;
	color: var(--bn-button-primary-hover-text) !important;
	-webkit-text-fill-color: var(--bn-button-primary-hover-text) !important;
	overflow: hidden !important;
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-bn-primary,
	input.btn-bn-primary,
	a.btn-bn-primary,
	button.btn-service-choose,
	button.btn-light,
	input.btn-light,
	a.btn-light,
	button.btn-black,
	input.btn-black,
	a.btn-black,
	button.lte-btn,
	input.lte-btn,
	a.lte-btn
):focus-visible {
	outline: 3px solid var(--bn-accent) !important;
	outline-offset: 2px !important;
}

.bn-izi.bn-izi.bn-izi :is(
	button.btn-bn-primary,
	input.btn-bn-primary,
	a.btn-bn-primary,
	button.btn-service-choose,
	button.btn-light,
	input.btn-light,
	a.btn-light,
	button.btn-black,
	input.btn-black,
	a.btn-black,
	button.lte-btn,
	input.lte-btn,
	a.lte-btn
):is(:disabled, [disabled], .disabled, [aria-disabled="true"]) {
	cursor: not-allowed !important;
	filter: none !important;
	opacity: .55 !important;
	pointer-events: none !important;
}

/* IZI renders these animated dots with var(--black), which the host omits. */
.bn-izi .nails-wrapper-noitice .lds-ellipsis > div {
	background-color: #0f1d36;
}

/* Bootstrap 3 grid shim used by the IZI templates. */
.bn-izi .row {
	display: flex;
	flex-wrap: wrap;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.bn-izi [class*="col-"] {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	flex: 0 0 100%;
	padding-right: 15px;
	padding-left: 15px;
}

.bn-izi .col-xs-12 {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
}

.bn-izi .col-xs-6 {
	width: 50%;
	max-width: 50%;
	flex-basis: 50%;
}

@media (min-width: 768px) {
	.bn-izi .col-sm-12 {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
	}

	.bn-izi .col-sm-6 {
		width: 50%;
		max-width: 50%;
		flex-basis: 50%;
	}
}


/* Preserve Bootstrap md geometry only at desktop widths. */
@media (min-width: 992px) {
	.bn-izi .col-md-12 {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
	}

	.bn-izi .col-md-9 {
		width: 75%;
		max-width: 75%;
		flex-basis: 75%;
	}

	.bn-izi .col-md-8 {
		width: 66.66667%;
		max-width: 66.66667%;
		flex-basis: 66.66667%;
	}

	.bn-izi .col-md-6 {
		width: 50%;
		max-width: 50%;
		flex-basis: 50%;
	}

	.bn-izi .col-md-4 {
		width: 33.33333%;
		max-width: 33.33333%;
		flex-basis: 33.33333%;
	}

	.bn-izi .col-md-3 {
		width: 25%;
		max-width: 25%;
		flex-basis: 25%;
	}

	.bn-izi .col-md-offset-4 {
		margin-left: 33.33333%;
	}

	.bn-izi .col-md-offset-3 {
		margin-left: 25%;
	}

	.bn-izi .col-md-offset-2 {
		margin-left: 16.66667%;
	}
}

@media (max-width: 991.98px) {
	.bn-izi .col-md-offset-4,
	.bn-izi .col-md-offset-3,
	.bn-izi .col-md-offset-2 {
		margin-left: 0;
	}

	.bn-izi .service-card > .service-info {
		min-width: 0;
	}
}

@media (max-width: 479.98px) {
	.bn-izi .technicien-box {
		grid-template-columns: minmax(0, 1fr);
	}

	.bn-izi .technicien-value {
		text-align: left;
	}
}

@media (max-width: 767.98px) {
	.bn-izi #overModal .staff-modal,
	.bn-izi #cancelModal .staff-modal,
	.bn-izi [id^="staffModal_"] .staff-modal {
		width: calc(100vw - 24px);
		max-height: calc(100dvh - 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bn-izi .btn-bn-primary,
	.bn-izi .btn-light,
	.bn-izi .btn-black,
	.bn-izi .lte-btn {
		transition: none !important;
	}
}