/*
 * LLBooking Public Booking — front-end styles.
 *
 * Pixel-level port of the approved design kit (online_designe/Дизайн модуля
 * бронирования). Two themes are expressed as scoped CSS custom properties on
 * .llbk-theme-ll / .llbk-theme-exo; every component reads the tokens, so the
 * markup and UX are identical across brands. All styles are scoped under
 * .llbk-module and never touch the host WordPress theme.
 */

/* --- Bundled brand fonts (Rubik, Jura — SIL Open Font License 1.1) --- */
@font-face {
	font-family: Rubik;
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/Rubik-Light.ttf") format("truetype");
}

@font-face {
	font-family: Rubik;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Rubik-Regular.ttf") format("truetype");
}

@font-face {
	font-family: Rubik;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/Rubik-Medium.ttf") format("truetype");
}

@font-face {
	font-family: Rubik;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/Rubik-Bold.ttf") format("truetype");
}

@font-face {
	font-family: Rubik;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/Rubik-Black.ttf") format("truetype");
}

@font-face {
	font-family: Jura;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/Jura.ttf") format("truetype");
}

/* --- Theme tokens: LaserLand --- */
.llbk-theme-ll {
	--llbk-bg: #00244a;
	--llbk-bg2: #001a38;
	--llbk-panel: #0b2647;
	--llbk-panel2: #10315a;
	--llbk-border: rgba(255, 255, 255, 0.1);
	--llbk-border2: rgba(255, 255, 255, 0.18);
	--llbk-text1: #fff;
	--llbk-text2: rgba(255, 255, 255, 0.66);
	--llbk-text3: rgba(255, 255, 255, 0.42);
	--llbk-accent: #00aad4;
	--llbk-accent-soft: rgba(0, 170, 212, 0.14);
	--llbk-cta: #ff7800;
	--llbk-cta-h: #ff9333;
	--llbk-warn: #ffbe2b;
	--llbk-good: #9dc443;
	--llbk-avail: #ff8a1f;
	--llbk-avail-glow: rgba(255, 138, 31, 0.55);
	--llbk-avail-soft: rgba(255, 138, 31, 0.15);
	--llbk-pink: #ee3164;
	--llbk-sel-b: #00aad4;
	--llbk-sel-bg: rgba(0, 170, 212, 0.13);
	--llbk-radcard: 14px;
	--llbk-radbtn: 8px;
	--llbk-glow: 0 10px 34px rgba(0, 170, 212, 0.22);
	--llbk-toolbar: rgba(4, 20, 42, 0.92);
	--llbk-chip: rgba(255, 255, 255, 0.06);
	--llbk-grad: linear-gradient(rgba(0, 26, 56, 0.32), rgba(0, 26, 56, 0.62));
	--llbk-bgimg: url("../img/pattern-ll.jpg");
	--llbk-font: "Rubik", "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", arial, sans-serif;
	--llbk-font-display: "Rubik", "Roboto", -apple-system, blinkmacsystemfont, arial, sans-serif;
}

/* --- Theme tokens: EXOTAG Arena --- */
.llbk-theme-exo {
	--llbk-bg: #161920;
	--llbk-bg2: #10131a;
	--llbk-panel: #1c202a;
	--llbk-panel2: #21262f;
	--llbk-border: rgba(241, 241, 241, 0.08);
	--llbk-border2: rgba(48, 141, 255, 0.55);
	--llbk-text1: #fff;
	--llbk-text2: rgba(255, 255, 255, 0.72);
	--llbk-text3: #a0adcc;
	--llbk-accent: #05f7f1;
	--llbk-accent-soft: rgba(48, 141, 255, 0.16);
	--llbk-cta: #308dff;
	--llbk-cta-h: #53a4ff;
	--llbk-warn: #ffc200;
	--llbk-good: #17de00;
	--llbk-avail: #ff9838;
	--llbk-avail-glow: rgba(255, 152, 56, 0.6);
	--llbk-avail-soft: rgba(255, 152, 56, 0.16);
	--llbk-pink: #ff0703;
	--llbk-sel-b: #308dff;
	--llbk-sel-bg: rgba(48, 141, 255, 0.14);
	--llbk-radcard: 16px;
	--llbk-radbtn: 1000px;
	--llbk-glow: 0 0 24px rgba(5, 247, 241, 0.4);
	--llbk-toolbar: rgba(22, 25, 32, 0.92);
	--llbk-chip: rgba(255, 255, 255, 0.06);
	--llbk-grad: linear-gradient(rgba(22, 25, 32, 0.55), rgba(22, 25, 32, 0.8));
	--llbk-bgimg: url("../img/pattern-exo.jpg");
	--llbk-font: "Rubik", "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", arial, sans-serif;
	--llbk-font-display: "Jura", "Rubik", -apple-system, blinkmacsystemfont, arial, sans-serif;
}

/* --- Module root --- */
.llbk-module {
	box-sizing: border-box;
	color: var(--llbk-text1);
	font-family: var(--llbk-font);
	font-size: 15px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

.llbk-module *,
.llbk-module *::before,
.llbk-module *::after {
	box-sizing: border-box;
}

.llbk-module--inline {
	position: relative;
	isolation: isolate;
	/* Vertical padding is the gap to whatever the page puts above and below the
	   module (and the band of full-bleed background around it), so it is kept
	   tight; horizontal padding is the side inset of that background and stays. */
	padding: clamp(10px, 1.6vw, 16px) clamp(14px, 3vw, 24px);
}

/*
 * Full-bleed background: the module stays in the theme's centred content column
 * (so its content keeps its width and position), while this pseudo-element paints
 * the dark panel + pattern edge-to-edge across the full viewport width behind it.
 */
.llbk-module--inline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	z-index: -1;
	background-color: var(--llbk-bg);
	background-image: var(--llbk-grad), var(--llbk-bgimg);
	background-size: cover, cover;
	background-position: center, top right;
	background-repeat: no-repeat, no-repeat;
	pointer-events: none;
}

.llbk-module__inner {
	position: relative;
	display: block;
}

/* Screen-reader live region: kept for a11y announcements, visually collapsed. */
.llbk-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Animations --- */
@keyframes llbk-shimmer {
	0% {
		background-position: -360px 0;
	}

	100% {
		background-position: 360px 0;
	}
}

@keyframes llbk-fade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes llbk-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes llbk-shake {
	0%,
	100% {
		transform: translateX(0);
	}

	20%,
	60% {
		transform: translateX(-4px);
	}

	40%,
	80% {
		transform: translateX(4px);
	}
}

/* --- Context header ("Выбрано") --- */
.llbk-ctx {
	display: flex;
	align-items: center;
	gap: 14px 18px;
	flex-wrap: wrap;
	background: var(--llbk-panel);
	border: 1px solid var(--llbk-border);
	border-radius: var(--llbk-radcard);
	padding: 13px 18px;
	margin-bottom: 22px;
	animation: llbk-fade 0.3s ease;
}

.llbk-ctx__badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--llbk-cta);
}

.llbk-ctx__item {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.llbk-ctx__item svg {
	flex: none;
	color: var(--llbk-accent);
}

.llbk-ctx__name {
	font-weight: 500;
	color: var(--llbk-text1);
	font-size: 15px;
}

.llbk-ctx__muted {
	color: var(--llbk-text2);
	font-size: 14px;
}

.llbk-ctx__sep {
	width: 1px;
	height: 18px;
	background: var(--llbk-border2);
}

.llbk-ctx__edit {
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--llbk-border2);
	color: var(--llbk-text1);
	padding: 8px 15px;
	border-radius: var(--llbk-radbtn);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}

.llbk-ctx__edit:hover {
	background: var(--llbk-chip);
}

/* --- Center / service selectors --- */
.llbk-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-bottom: 22px;
}

.llbk-control {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 220px;
	flex: 1 1 220px;
}

.llbk-control__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--llbk-text3);
}

.llbk-control__select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 40px 12px 14px;
	border-radius: var(--llbk-radbtn);
	border: 1px solid var(--llbk-border2);
	background-color: var(--llbk-panel);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-opacity='0.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: var(--llbk-text1);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	transition: border-color 0.15s;
}

.llbk-control__select:hover,
.llbk-control__select:focus {
	border-color: var(--llbk-accent);
}

.llbk-control__select option {
	color: var(--llbk-text1);
	background-color: var(--llbk-panel);
}

/* --- Custom selector dropdown (center / service, with availability badges) --- */
.llbk-select {
	position: relative;
	width: 100%;
}

.llbk-select__btn {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--llbk-radbtn);
	border: 1px solid var(--llbk-border2);
	background-color: var(--llbk-panel);
	color: var(--llbk-text1);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	outline: none;
	transition: border-color 0.15s;
}

.llbk-select__btn:hover,
.llbk-select__btn:focus-visible,
.llbk-select--open .llbk-select__btn {
	border-color: var(--llbk-accent);
}

/* Static plaque for a shortcode-fixed center/service: same frame, no interaction. */
.llbk-select--static {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--llbk-radbtn);
	border: 1px solid var(--llbk-border2);
	background-color: var(--llbk-panel);
	color: var(--llbk-text1);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	cursor: default;
}

.llbk-select__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.llbk-select__chev {
	flex: none;
	color: var(--llbk-text2);
	transition: transform 0.15s;
}

.llbk-select--open .llbk-select__chev {
	transform: rotate(180deg);
}

.llbk-select__list {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: 320px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border-radius: var(--llbk-radcard);
	border: 1px solid var(--llbk-border2);
	background: var(--llbk-panel2);
	box-shadow: var(--llbk-glow), 0 12px 30px rgba(0, 0, 0, 0.45);
}

.llbk-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--llbk-text1);
	font-size: 15px;
	cursor: pointer;
	outline: none;
	transition: background 0.12s;
}

.llbk-opt:hover,
.llbk-opt--active {
	background: var(--llbk-accent-soft);
}

.llbk-opt--selected {
	background: var(--llbk-sel-bg);
}

.llbk-opt__name {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Glowing "доступны слоты" badge on options that have free slots. */
.llbk-opt__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px 3px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--llbk-avail);
	background: var(--llbk-avail-soft);
	border: 1px solid var(--llbk-avail-glow);
	box-shadow: 0 0 10px var(--llbk-avail-glow);
}

.llbk-opt__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--llbk-avail);
	box-shadow: 0 0 8px 1px var(--llbk-avail-glow);
	animation: llbk-availpulse 1.8s ease-in-out infinite;
}

/* --- Main grid --- */
.llbk-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

.llbk-col-main {
	min-width: 0;
}

/* --- Date header + navigation --- */
.llbk-dates-head,
.llbk-slots-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.llbk-slots-head {
	align-items: baseline;
	margin: 22px 0 14px;
}

.llbk-h3 {
	margin: 0;
	font-family: var(--llbk-font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--llbk-text1);
}

.llbk-nav {
	display: flex;
	gap: 8px;
}

.llbk-nav-btn {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: var(--llbk-radbtn);
	border: 1px solid var(--llbk-border2);
	background: var(--llbk-panel);
	color: var(--llbk-text1);
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}

.llbk-nav-btn:hover {
	background: var(--llbk-chip);
}

.llbk-nav-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.llbk-selday {
	font-size: 13px;
	color: var(--llbk-text2);
}

/* --- Date strip --- */
.llbk-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 4px 2px 12px;
	scroll-behavior: smooth;
}

.llbk-strip::-webkit-scrollbar {
	height: 6px;
}

.llbk-strip::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.16);
	border-radius: 99px;
}

.llbk-date {
	position: relative;
	flex: none;
	min-width: 62px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 8px;
	border-radius: var(--llbk-radcard);
	cursor: pointer;
	font-family: inherit;
	color: var(--llbk-text2);
	border: 1.5px solid var(--llbk-border);
	background: var(--llbk-panel);
	transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

.llbk-date:hover {
	border-color: var(--llbk-accent);
}

/* Dates that have at least one free slot: brighter with a soft glow + pip. */
.llbk-date--has-slots {
	border-color: var(--llbk-avail);
	color: var(--llbk-text1);
	box-shadow: 0 0 0 1px var(--llbk-avail-glow), 0 0 16px var(--llbk-avail-glow);
}

.llbk-date--has-slots .llbk-date__day {
	color: var(--llbk-avail);
}

.llbk-date__pip {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--llbk-avail);
	box-shadow: 0 0 7px 1px var(--llbk-avail-glow);
	animation: llbk-availpulse 1.8s ease-in-out infinite;
}

.llbk-date--active {
	border-color: var(--llbk-accent);
	background: var(--llbk-accent-soft);
	color: var(--llbk-text1);
}

.llbk-date--has-slots.llbk-date--active .llbk-date__day {
	color: var(--llbk-text1);
}

@keyframes llbk-availpulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}
}

.llbk-date__wd {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.llbk-date--active .llbk-date__wd {
	opacity: 1;
}

.llbk-date__day {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.llbk-date__mon {
	font-size: 12px;
	opacity: 0.7;
}

.llbk-date-add {
	flex: none;
	width: 78px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--llbk-radcard);
	border: 1.5px dashed var(--llbk-border2);
	background: transparent;
	color: var(--llbk-cta);
	cursor: pointer;
	padding: 10px 0;
	font-family: inherit;
	transition: background 0.15s, border-color 0.15s;
}

.llbk-date-add:hover {
	border-color: var(--llbk-cta);
	background: rgba(255, 120, 0, 0.08);
}

.llbk-date-add span {
	font-size: 11px;
	line-height: 1.2;
	color: var(--llbk-text2);
	text-align: center;
}

/* --- Slot grid + cards --- */
.llbk-slots {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

/* Internal scroll for long lists. Added by JS (applyScroll) only past six cards,
   so short lists keep their natural height and never show a scrollbar. The cap is
   about three grid rows — six cards on tablet/desktop (two columns), three on
   mobile (one column) — and lands mid-row on purpose, so the cut-off card signals
   there is more below. Without it a busy date grows the module past 1900px and
   stretches the page background with it. */
.llbk-slots--scroll,
.llbk-list--scroll {
	max-height: 520px;
	max-height: min(520px, 72vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: var(--llbk-accent) transparent;
}

.llbk-slots--scroll::-webkit-scrollbar,
.llbk-list--scroll::-webkit-scrollbar {
	width: 8px;
}

.llbk-slots--scroll::-webkit-scrollbar-track,
.llbk-list--scroll::-webkit-scrollbar-track {
	background: var(--llbk-chip);
	border-radius: 1000px;
}

.llbk-slots--scroll::-webkit-scrollbar-thumb,
.llbk-list--scroll::-webkit-scrollbar-thumb {
	background: var(--llbk-accent);
	border-radius: 1000px;
}

/* --- Single-slot mode (variant 5): no calendar, one enlarged card + cart --- */
.llbk-single-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-bottom: 18px;
}

/* Prominent date + weekday shown above the single slot / list-mode day groups. */
.llbk-single-date {
	font-family: var(--llbk-font-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--llbk-text1);
	text-transform: capitalize;
}

.llbk-single-mount {
	display: block;
}

/* --- List mode (variant 6): calendar-less list of chosen slots by date --- */
.llbk-list-mount {
	display: block;
}

.llbk-list-day {
	margin: 26px 0 14px;
}

.llbk-list-day:first-child {
	margin-top: 0;
}

.llbk-slot--single {
	gap: 14px;
	padding: 20px 22px;
	cursor: default;
	animation: none;
}

.llbk-slot--single:hover {
	transform: none;
	border-color: var(--llbk-border);
}

.llbk-slot--single.llbk-slot--soldout:hover {
	border-color: var(--llbk-border);
}

.llbk-slot--single .llbk-slot__time {
	font-size: 26px;
}

.llbk-slot--single .llbk-slot__name {
	font-size: 18px;
}

.llbk-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 15px 16px;
	border-radius: var(--llbk-radcard);
	border: 1.5px solid var(--llbk-border);
	background: var(--llbk-panel2);
	text-align: left;
	width: 100%;
	font-family: inherit;
	color: var(--llbk-text1);
	cursor: pointer;
	animation: llbk-fade 0.25s ease;
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.llbk-slot:hover {
	transform: translateY(-2px);
	border-color: var(--llbk-accent);
}

.llbk-slot--selected {
	border-color: var(--llbk-sel-b);
	background: var(--llbk-sel-bg);
	box-shadow: var(--llbk-glow);
}

.llbk-slot--soldout {
	opacity: 0.5;
	background: var(--llbk-panel);
	cursor: default;
}

.llbk-slot--soldout:hover {
	transform: none;
	border-color: var(--llbk-border);
}

.llbk-slot__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.llbk-slot__time-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.llbk-slot__time {
	font-family: var(--llbk-font-display);
	font-size: 23px;
	font-weight: 800;
	line-height: 1;
	color: var(--llbk-text1);
	letter-spacing: -0.01em;
}

.llbk-slot__check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--llbk-sel-b);
	display: grid;
	place-items: center;
	flex: none;
}

.llbk-slot__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--llbk-text1);
	white-space: nowrap;
}

.llbk-slot__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--llbk-text1);
	margin-bottom: 3px;
}

.llbk-slot__tech {
	font-size: 12.5px;
	color: var(--llbk-text3);
	line-height: 1.35;
}

.llbk-prog {
	height: 6px;
	border-radius: 99px;
	background: var(--llbk-chip);
	overflow: hidden;
}

.llbk-prog__fill {
	height: 100%;
	background: var(--llbk-accent);
	transition: width 0.4s ease;
}

.llbk-prog__fill--almost {
	background: var(--llbk-warn);
}

.llbk-prog__fill--sold {
	background: var(--llbk-text3);
}

.llbk-slot__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}

.llbk-slot__free {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--llbk-accent);
}

.llbk-slot__free--almost {
	color: var(--llbk-warn);
}

.llbk-slot__free--sold {
	color: var(--llbk-text3);
}

.llbk-slot__occ {
	font-size: 12px;
	color: var(--llbk-text3);
	white-space: nowrap;
}

.llbk-badge--almost {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #1a1205;
	background: var(--llbk-warn);
	padding: 3px 8px;
	border-radius: 99px;
	white-space: nowrap;
}

.llbk-badge--sold {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--llbk-text3);
	white-space: nowrap;
}

/* --- Skeleton / loading --- */
.llbk-skel {
	height: 118px;
	border-radius: var(--llbk-radcard);
	background: linear-gradient(90deg, var(--llbk-panel) 25%, var(--llbk-panel2) 50%, var(--llbk-panel) 75%);
	background-size: 720px 100%;
	animation: llbk-shimmer 1.4s linear infinite;
}

.llbk-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	color: var(--llbk-text2);
	font-size: 14px;
}

.llbk-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--llbk-accent);
	border-right-color: transparent;
	border-radius: 50%;
	display: inline-block;
	animation: llbk-spin 0.9s linear infinite;
}

/* --- System state panels (empty / error / taken) --- */
.llbk-panel {
	background: var(--llbk-panel);
	border: 1px solid var(--llbk-border);
	border-radius: var(--llbk-radcard);
	padding: 28px 22px;
	text-align: center;
	animation: llbk-fade 0.25s ease;
}

.llbk-panel__icon {
	margin: 0 auto 14px;
	display: block;
}

.llbk-panel__text {
	font-size: 13.5px;
	color: var(--llbk-text2);
	line-height: 1.5;
	margin: 0 auto 18px;
	max-width: 320px;
}

.llbk-panel__actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Note under a filled slot list ("показаны не все слоты"). Quieter than the empty
   /error panels it shares markup with — those are the whole content of the area,
   this one sits below real slots and must not compete with them: transparent
   background, dashed border, tighter padding, no fade-in on every re-render. */
.llbk-panel--note {
	padding: 18px;
	background: transparent;
	border-style: dashed;
	animation: none;
}

/* Its own cell of .llbk-layout, placed after the cart. One column (mobile) →
   below the cart; two columns (desktop) → auto-placement puts it in row 2 of the
   first column, under the slots. Collapsed when empty so the grid gap does not
   leave a hole on dates without slots. */
.llbk-note-mount:empty {
	display: none;
}

.llbk-panel--note .llbk-panel__text {
	margin-bottom: 14px;
	max-width: 420px;
}

/* --- Cart --- */
.llbk-cart {
	background: var(--llbk-panel);
	border: 1px solid var(--llbk-border);
	border-radius: var(--llbk-radcard);
	padding: 20px;
	box-shadow: var(--llbk-glow);
}

.llbk-cart__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.llbk-cart__head svg {
	flex: none;
	color: var(--llbk-cta);
}

.llbk-cart__title {
	margin: 0;
	font-family: var(--llbk-font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--llbk-text1);
}

/* Empty cart */
.llbk-cart-empty {
	text-align: center;
	padding: 24px 8px 8px;
}

.llbk-cart-empty__icon {
	width: 54px;
	height: 54px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--llbk-chip);
	display: grid;
	place-items: center;
}

.llbk-cart-empty__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--llbk-text1);
	margin-bottom: 6px;
}

.llbk-cart-empty__text {
	font-size: 13.5px;
	color: var(--llbk-text2);
	line-height: 1.5;
	max-width: 240px;
	margin: 0 auto;
}

/* Filled cart rows */
.llbk-cart-rows {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding-bottom: 16px;
}

.llbk-cart-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.llbk-cart-row svg {
	flex: none;
	color: var(--llbk-text3);
}

.llbk-cart-row__label {
	font-size: 13px;
	color: var(--llbk-text2);
	margin-right: auto;
}

.llbk-cart-row__val {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--llbk-text1);
	text-align: right;
}

.llbk-divider {
	height: 1px;
	background: var(--llbk-border);
}

/* Ticket stepper */
.llbk-step-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
}

.llbk-step-row__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--llbk-text1);
}

.llbk-step-row__label svg {
	color: var(--llbk-text3);
}

.llbk-step {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--llbk-panel2);
	border: 1px solid var(--llbk-border);
	border-radius: var(--llbk-radbtn);
	padding: 4px;
}

.llbk-step__btn {
	width: 34px;
	height: 34px;
	border: none;
	border-radius: calc(var(--llbk-radbtn) - 2px);
	background: var(--llbk-chip);
	color: var(--llbk-text1);
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	transition: background 0.15s;
}

.llbk-step__btn:hover:not(:disabled) {
	background: var(--llbk-border2);
}

.llbk-step__btn:disabled {
	background: transparent;
	color: var(--llbk-text3);
	cursor: not-allowed;
}

.llbk-step__val {
	min-width: 34px;
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	color: var(--llbk-text1);
}

.llbk-maxnote {
	font-size: 12px;
	color: var(--llbk-warn);
	margin: -8px 0 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.llbk-maxnote svg {
	flex: none;
}

/* Totals */
.llbk-totals {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 0 18px;
}

.llbk-totals__row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--llbk-text2);
}

.llbk-totals__row > span:last-child {
	color: var(--llbk-text1);
}

.llbk-totals__discount--none {
	color: var(--llbk-text3);
}

.llbk-totals__discount--none > span:last-child {
	color: var(--llbk-text3);
	font-weight: 600;
}

.llbk-totals__discount--on {
	color: var(--llbk-good);
}

.llbk-totals__discount--on > span:last-child {
	color: var(--llbk-good);
	font-weight: 600;
}

.llbk-totals__grand {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 4px;
}

.llbk-totals__grand-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--llbk-text1);
}

.llbk-totals__grand-val {
	font-family: var(--llbk-font-display);
	font-size: 26px;
	font-weight: 800;
	color: var(--llbk-text1);
	letter-spacing: -0.01em;
}

/* CTA */
.llbk-cta-btn {
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: var(--llbk-radbtn);
	background: var(--llbk-cta);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.01em;
	transition: background 0.15s, transform 0.08s;
}

.llbk-cta-btn:hover:not(:disabled) {
	background: var(--llbk-cta-h);
}

.llbk-cta-btn:active:not(:disabled) {
	transform: scale(0.98);
}

.llbk-cta-btn:disabled {
	background: var(--llbk-chip);
	color: var(--llbk-text3);
	cursor: not-allowed;
}

.llbk-cart-note {
	text-align: center;
	font-size: 12px;
	color: var(--llbk-text3);
	margin-top: 10px;
}

.llbk-cart-note--ro {
	color: var(--llbk-text2);
}

/* --- Mobile sticky bottom bar --- */
.llbk-mobilebar {
	display: none;
}

/* --- Buttons --- */
.llbk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 16px;
	border: none;
	border-radius: var(--llbk-radbtn);
	background: var(--llbk-cta);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
}

.llbk-btn:hover {
	background: var(--llbk-cta-h);
}

.llbk-btn--ghost {
	background: transparent;
	border: 1px solid var(--llbk-border2);
	color: var(--llbk-text1);
	font-weight: 600;
}

.llbk-btn--ghost:hover {
	background: var(--llbk-chip);
}

/* --- Checkout form (only used when the checkout flag is on) --- */
.llbk-form {
	display: flex;
	flex-direction: column;
	gap: 13px;
	max-width: 460px;
	animation: llbk-fade 0.25s ease;
}

.llbk-field {
	display: block;
}

.llbk-field__label {
	display: block;
	font-size: 12.5px;
	color: var(--llbk-text2);
	margin-bottom: 6px;
}

.llbk-field__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 13px;
	border-radius: var(--llbk-radbtn);
	border: 1px solid var(--llbk-border2);
	background: var(--llbk-panel);
	color: var(--llbk-text1);
	font-family: inherit;
	font-size: 14px;
	outline: none;
}

.llbk-field__input:focus {
	border-color: var(--llbk-accent);
}

.llbk-form__error {
	font-size: 13px;
	color: var(--llbk-pink);
	min-height: 1em;
	margin: 0;
}

/* --- Consent checkbox (required before submit) --- */
.llbk-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1.45;
	color: var(--llbk-text2);
}

.llbk-consent__box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--llbk-cta);
	cursor: pointer;
}

.llbk-consent__text {
	display: block;
}

.llbk-consent a {
	color: var(--llbk-accent);
	text-decoration: underline;
}

.llbk-consent a:hover {
	text-decoration: none;
}

/* --- Result panels (checkout / payment states) --- */
.llbk-result {
	text-align: center;
	padding: 20px 8px;
	animation: llbk-fade 0.25s ease;
}

.llbk-result__title {
	margin: 0 0 8px;
	font-family: var(--llbk-font-display);
	font-size: 22px;
	font-weight: 800;
	color: var(--llbk-text1);
}

.llbk-result__price {
	font-family: var(--llbk-font-display);
	font-size: 24px;
	font-weight: 800;
	color: var(--llbk-text1);
	margin: 0 0 14px;
}

.llbk-result__number {
	margin: 0 0 10px;
	font-size: 16px;
	color: var(--llbk-text1);
}

.llbk-result__number-val {
	font-family: var(--llbk-font-display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--llbk-accent, var(--llbk-text1));
}

.llbk-result__note {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--llbk-text2, var(--llbk-text1));
}

.llbk-result__rows {
	margin: 8px auto 2px;
	max-width: 340px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.llbk-result__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 14px;
	border-bottom: 1px dashed var(--llbk-border);
	padding-bottom: 7px;
}

.llbk-result__row:last-child {
	border-bottom: none;
}

.llbk-result__row-label {
	color: var(--llbk-text2);
	flex: none;
}

.llbk-result__row-val {
	color: var(--llbk-text1);
	font-weight: 600;
	text-align: right;
}

.llbk-result__done {
	margin-top: 18px;
}

/* --- Modal (manual request / "Другое время") --- */
.llbk-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: var(--llbk-font);
	color: var(--llbk-text1);
	background: rgba(0, 8, 20, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 18px;
	overflow-y: auto;
}

.llbk-modal {
	width: 100%;
	max-width: 480px;
	background: var(--llbk-bg2);
	border: 1px solid var(--llbk-border2);
	border-radius: var(--llbk-radcard);
	padding: 26px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	animation: llbk-fade 0.2s ease;
}

.llbk-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.llbk-modal__title {
	margin: 0;
	font-family: var(--llbk-font-display);
	font-size: 21px;
	font-weight: 800;
	color: var(--llbk-text1);
}

.llbk-modal__close {
	flex: none;
	width: 32px;
	height: 32px;
	border: none;
	background: var(--llbk-chip);
	color: var(--llbk-text2);
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

.llbk-modal__lead {
	margin: 0 0 20px;
	font-size: 13.5px;
	color: var(--llbk-text2);
	line-height: 1.5;
}

.llbk-modal__body {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.llbk-modal__row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.llbk-modal__row .llbk-field {
	flex: 1;
	min-width: 140px;
}

.llbk-modal__notice {
	font-size: 13px;
	color: var(--llbk-text2);
	line-height: 1.5;
	background: var(--llbk-panel);
	border: 1px solid var(--llbk-border);
	border-radius: var(--llbk-radbtn);
	padding: 14px 16px;
}

/* --- Checkout modal (booking form + result) --- */
.llbk-modal--checkout {
	max-width: 440px;
}

.llbk-modal__summary {
	margin: 2px 0 16px;
	padding: 12px 14px;
	background: var(--llbk-panel);
	border: 1px solid var(--llbk-border);
	border-radius: var(--llbk-radbtn);
}

.llbk-modal__summary-line {
	font-weight: 600;
	color: var(--llbk-text1);
	font-size: 14px;
}

.llbk-modal__summary-when {
	margin-top: 3px;
	font-size: 13px;
	color: var(--llbk-text2);
}

.llbk-field__req {
	color: var(--llbk-cta);
}

.llbk-step--form {
	width: max-content;
}

.llbk-step-note {
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--llbk-text2);
}

/* --- Popup shell --- */
.llbk-launcher-wrap {
	display: inline-block;
}

.llbk-launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border: none;
	border-radius: var(--llbk-radbtn);
	background: var(--llbk-cta);
	color: #fff;
	font-family: var(--llbk-font);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
}

.llbk-launcher:hover {
	background: var(--llbk-cta-h);
}

.llbk-module--popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 18px;
	overflow-y: auto;
	background: rgba(0, 8, 20, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.llbk-module--popup[hidden] {
	display: none;
}

.llbk-module__dialog {
	position: relative;
	width: 100%;
	max-width: 1180px;
	background-color: var(--llbk-bg);
	background-image: var(--llbk-grad), var(--llbk-bgimg);
	background-size: cover, cover;
	background-position: center, top right;
	background-repeat: no-repeat, no-repeat;
	border: 1px solid var(--llbk-border2);
	border-radius: var(--llbk-radcard);
	padding: clamp(16px, 3vw, 26px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.llbk-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: none;
	background: var(--llbk-chip);
	color: var(--llbk-text1);
	border-radius: 50%;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	z-index: 2;
}

.llbk-close:hover {
	background: var(--llbk-border2);
}

/* Configuration error */
.llbk-state--configuration-error {
	padding: 22px;
	text-align: center;
	color: var(--llbk-text2);
}

/* Body scroll lock while a popup is open */
.llbk-scroll-locked {
	overflow: hidden;
}

/* --- Responsive: tablet (single column, slots 2-up) --- */
@media (min-width: 600px) {
	.llbk-slots {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

/* --- Responsive: desktop (two columns, sticky cart) --- */
@media (min-width: 1024px) {
	.llbk-layout {
		grid-template-columns: minmax(0, 1.9fr) minmax(310px, 1fr);
	}

	.llbk-col-cart {
		position: sticky;
		top: 20px;
	}

	/* Pin the note under the slots rather than under the cart. Auto-placement
	   already lands here; stated explicitly so a future row cannot shift it. */
	.llbk-note-mount {
		grid-column: 1;
	}
}

/* --- Responsive: mobile sticky bar (< 600px, slot selected) --- */
@media (max-width: 599px) {
	.llbk-module.is-selected .llbk-mobilebar {
		display: flex;
		position: sticky;
		bottom: 0;
		margin: 18px calc(-1 * clamp(14px, 3vw, 24px)) calc(-1 * clamp(14px, 3vw, 24px));
		padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
		background: var(--llbk-toolbar);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid var(--llbk-border2);
		align-items: center;
		gap: 14px;
		z-index: 30;
	}

	.llbk-mobilebar__info {
		min-width: 0;
	}

	.llbk-mobilebar__sub {
		font-size: 11px;
		color: var(--llbk-text3);
	}

	.llbk-mobilebar__total {
		font-family: var(--llbk-font-display);
		font-size: 22px;
		font-weight: 800;
		color: var(--llbk-text1);
		line-height: 1.1;
	}

	.llbk-mobilebar__btn {
		margin-left: auto;
		padding: 15px 26px;
		border: none;
		border-radius: var(--llbk-radbtn);
		background: var(--llbk-cta);
		color: #fff;
		font-family: inherit;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
		white-space: nowrap;
	}
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.llbk-module *,
	.llbk-module *::before,
	.llbk-module *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}