/*
 * NailsbySam Studio — LatePoint booking form and booking window in the
 * studio's look. Loaded only where LatePoint loads (after Core's
 * latepoint.css, which maps the theme colours and fonts).
 */
:root {
	--dsc-btn-radius: 999px;
}

:where(.latepoint-w, .latepoint-lightbox-w) {
	--latepoint-brand-primary: #2a1b13;
	--latepoint-body-color: #2a1b13;
	--latepoint-headings-color: #2a1b13;
	--latepoint-color-text-faded: #5f4a3b;
	--latepoint-timeslot-selected-color: #8b5e2b;
	--latepoint-side-panel-bg: #f4ece2;
	--latepoint-summary-panel-bg: #fffdf9;
	--latepoint-calendar-weekday-label-color: #5f4a3b;
	--latepoint-calendar-weekday-label-bg: #fffdf9;
	--latepoint-border-radius: 12px;
	--latepoint-border-radius-sm: 8px;
	--latepoint-border-radius-md: 16px;
	--latepoint-border-radius-lg: 24px;
}

/* The form on the booking page: one calm card. */
.nbs-latepoint {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

body .latepoint-w .latepoint-booking-form-element {
	overflow: hidden;
	border: 1px solid var(--nbs-line);
	border-radius: var(--nbs-radius-lg);
	background: #fffdf9;
	box-shadow: var(--nbs-shadow-lift);
}

/* Booking page: the steps take the room the column gives them, the
   summary keeps its own width beside them once a service is picked. */
@media (min-width: 768px) {
	.nbs-book__form .latepoint-w.latepoint-hide-side-panel .latepoint-booking-form-element {
		width: 100%;
		max-width: none;
	}

	.nbs-book__form .latepoint-w.latepoint-hide-side-panel .latepoint-form-w {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.nbs-book__form .latepoint-w.latepoint-hide-side-panel .latepoint-summary-w {
		flex: 0 0 280px;
	}
}

/* Headings in the display serif. */
body .latepoint-w :is(.os-heading-text, .latepoint-desc-title, .summary-header-label, .os-item-name, .latepoint-lightbox-heading h2),
body .latepoint-lightbox-w :is(.os-heading-text, .latepoint-desc-title, .summary-header-label, .os-item-name, .latepoint-lightbox-heading h2) {
	font-family: var(--nbs-serif) !important;
	font-weight: 450;
	letter-spacing: -0.005em;
}

body .latepoint-w .latepoint-desc-title,
body .latepoint-lightbox-w .latepoint-desc-title {
	font-size: 1.45rem;
	line-height: 1.2;
}

body .latepoint-w .latepoint-desc-content,
body .latepoint-lightbox-w .latepoint-desc-content {
	font-size: 0.97rem;
	line-height: 1.6;
	color: var(--nbs-cocoa);
}

/* LatePoint's stock line drawings give way to the studio's gold heart. */
body .latepoint-w .latepoint-desc-media,
body .latepoint-lightbox-w .latepoint-desc-media {
	display: none !important;
}

body .latepoint-w .latepoint-step-desc::before,
body .latepoint-lightbox-w .latepoint-step-desc::before {
	content: "";
	display: block;
	width: 46px;
	height: 42px;
	margin: 0 auto 1.1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 44'%3E%3Cpath d='M24 40.5C17 34.6 4.5 25.3 4.5 14.8 4.5 8.6 9.2 4 15 4c4 0 7.3 2.3 9 5.8C25.7 6.3 29 4 33 4c5.8 0 10.5 4.6 10.5 10.8 0 10.5-12.5 19.8-19.5 25.7Z' fill='none' stroke='%23C99A4E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

body .latepoint-w .latepoint-questions h5,
body .latepoint-lightbox-w .latepoint-questions h5 {
	font-family: var(--nbs-serif) !important;
	font-size: 1rem;
}

/* Service and add-on tiles. */
body .latepoint-w .os-item .os-item-i,
body .latepoint-lightbox-w .os-item .os-item-i {
	border-color: var(--nbs-line);
	background: #fffdf9;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s var(--nbs-ease);
}

body .latepoint-w .os-item .os-item-i:hover,
body .latepoint-lightbox-w .os-item .os-item-i:hover {
	border-color: var(--nbs-gold);
	box-shadow: 0 0 0 1px var(--nbs-gold), 0 14px 30px -20px rgba(42, 27, 19, 0.45);
	transform: translateY(-1px);
}

body .latepoint-w .os-item.selected .os-item-i,
body .latepoint-lightbox-w .os-item.selected .os-item-i {
	border-color: var(--nbs-bronze);
	box-shadow: 0 0 0 1.5px var(--nbs-bronze);
}

body .latepoint-w .os-item-name,
body .latepoint-lightbox-w .os-item-name {
	font-size: 1.08rem;
	color: var(--nbs-ink);
}

body .latepoint-w .os-item-desc,
body .latepoint-lightbox-w .os-item-desc {
	color: var(--nbs-cocoa);
	line-height: 1.5;
}

body .latepoint-w .os-item-price,
body .latepoint-lightbox-w .os-item-price {
	font-family: var(--nbs-serif) !important;
	font-size: 1.2rem;
	color: var(--nbs-bronze);
}

body .latepoint-w .os-item-img-w,
body .latepoint-lightbox-w .os-item-img-w {
	border-radius: 10px;
	overflow: hidden;
}

/* Buttons: pills like the rest of the site. */
body .latepoint-w .latepoint-btn,
body .latepoint-lightbox-w .latepoint-btn {
	padding-inline: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

body .latepoint-w .latepoint-btn-primary:hover,
body .latepoint-lightbox-w .latepoint-btn-primary:hover {
	background-color: var(--nbs-bronze);
	border-color: var(--nbs-bronze);
}

/* Booking window. */
.latepoint-lightbox-w {
	background: rgba(34, 21, 14, 0.62) !important;
	backdrop-filter: blur(3px);
}

body .latepoint-lightbox-w .latepoint-lightbox-i {
	border-radius: var(--nbs-radius-lg);
	overflow: hidden;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
}

/* Menu: the small "Book" pill under each service. */
.nbs-fullmenu .dsc-menu__book {
	margin-top: 0.75rem;
	border-color: rgba(201, 154, 78, 0.55);
	background: #fffdf9;
	color: var(--nbs-ink);
	font-size: 0.875rem;
}

.nbs-fullmenu .dsc-menu__book::after {
	content: "";
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.45em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.25s var(--nbs-ease);
}

.nbs-fullmenu .dsc-menu__book:hover::after {
	transform: translateX(3px);
}

.nbs-fullmenu .dsc-menu__book:hover,
.nbs-fullmenu .dsc-menu__book:focus-visible {
	border-color: var(--nbs-ink);
	background: var(--nbs-ink);
	color: var(--nbs-ivory);
}

@media (max-width: 767px) {
	body .latepoint-w .latepoint-booking-form-element {
		border-radius: var(--nbs-radius);
	}
}