/**
 * Skórka BookingPress: teal kart, kalendarz, sloty, przycisk rezerwacji.
 * Scope: formularz Vue 3 + otoczka .fp-booking. Nie nadpisuje custom_css BP.
 */

.fp-booking {
	--fp-teal: #30c7b5;
	--fp-teal-dark: #0f766e;
	--fp-ink: #0f172a;
	--fp-muted: #475569;
	container: fp-booking / inline-size;
	isolation: isolate;
	margin: 0 auto;
	padding: 24px 16px 48px;
	max-width: 1180px;
}

.fp-booking__shell {
	display: grid;
	grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
	gap: 0;
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	border: 1px solid #e6eef3;
	box-shadow: 0 18px 50px rgb(15 23 42 / 0.1);
}

.fp-booking__aside {
	background: linear-gradient(165deg, var(--fp-teal) 0%, var(--fp-teal-dark) 100%);
	color: #fff;
	padding: 32px 28px;
	border-radius: 24px 0 0 24px;
	min-inline-size: 0;
}

.fp-booking__brand,
.fp-booking .fp-booking__brand,
.fp-booking__kicker,
.fp-booking .fp-booking__kicker {
	display: block;
	margin: 0 0 8px;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
	color: #fff;
}

.fp-booking__title,
.fp-booking h2.fp-booking__title {
	display: block;
	margin: 0 0 0.85rem !important;
	padding: 0 !important;
	max-inline-size: 100%;
	font-family: inherit;
	font-size: clamp(2rem, 5.5cqi, 2.65rem) !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em;
	color: #fff !important;
	white-space: nowrap;
}

.fp-booking__lead,
.fp-booking__meta,
.fp-booking__fallback,
.fp-booking .fp-booking__lead,
.fp-booking .fp-booking__meta {
	margin: 0 0 1.15rem;
	padding: 0;
	font-size: 0.98rem;
	font-weight: 300;
	line-height: 1.5;
	color: #fff;
}

.fp-booking__points,
.fp-booking ul.fp-booking__points {
	margin: 2.35rem 0 1.25rem;
	padding: 0;
	list-style: none;
}

.fp-booking__points li {
	position: relative;
	margin: 0;
	padding: 0 0 1rem 1.55rem;
	color: #fff;
	font-weight: 300;
}

.fp-booking__points li strong {
	display: block;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.fp-booking__points li span {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.86rem;
	font-weight: 300;
	opacity: 0.86;
}

.fp-booking__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

.fp-booking__aside-link,
.fp-booking a.fp-booking__aside-link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fp-booking__main {
	min-width: 0;
	background: #f8fafc;
	border-radius: 0 24px 24px 0;
}

.fp-booking__form {
	padding: 8px 8px 16px;
	background: transparent;
}

.fp-booking__bar {
	display: none;
}

@container fp-booking (max-width: 820px) {
	.fp-booking__shell {
		grid-template-columns: 1fr;
	}

	.fp-booking__aside,
	.fp-booking__form,
	.fp-booking__main {
		border-radius: 0;
	}

	.fp-booking__aside {
		border-radius: 24px 24px 0 0;
	}

	.fp-booking__form,
	.fp-booking__main {
		border-radius: 0 0 24px 24px;
	}
}

.fp-booking .bpa-frontend-main-container.bpa-frontend-vue3,
.bpa-frontend-main-container.bpa-frontend-vue3 {
	--bpa-pt-main-green: #30c7b5;
	--bpa-pt-main-green-darker: #0f766e;
	--bpa-pt-main-green-alpha-12: rgb(48 199 181 / 0.12);
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-si-card,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card {
	border: 1px solid #dce4f5;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 20px rgb(15 23 42 / 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-si-card:hover,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card:hover,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-si-card:focus-visible,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card:focus-visible {
	border-color: var(--bpa-pt-main-green);
	box-shadow: 0 10px 24px rgb(15 118 110 / 0.12);
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-si-card.__bpa-is-selected,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card.__bpa-is-selected,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-sm-card.--bpa-is-selected {
	border-color: var(--bpa-pt-main-green-darker);
	box-shadow: inset 0 0 0 1px var(--bpa-pt-main-green);
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host {
	border-radius: 16px;
	background: #fff;
	padding: 8px;
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day-content {
	border-radius: 999px;
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day-content:hover,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-day-content.is-selected {
	background: var(--bpa-pt-main-green);
	color: #fff;
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__ts-body--item {
	border: 1px solid #dce4f5;
	border-radius: 10px;
	background: #fff;
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__ts-body--item.__bpa-is-selected {
	background: var(--bpa-pt-main-green);
	border-color: var(--bpa-pt-main-green-darker);
	color: #fff;
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-btn--primary,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs--foot .bpa-front-btn--primary {
	background: var(--bpa-pt-main-green);
	border-color: var(--bpa-pt-main-green);
	color: #fff;
	border-radius: 999px;
	font-weight: 600;
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-btn--primary:hover,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-btn--primary:focus-visible {
	background: var(--bpa-pt-main-green-darker);
	border-color: var(--bpa-pt-main-green-darker);
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-ci-pill.__bpa-is-active,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tabs--panel-body__service .bpa-front-ci-pill.__bpa-is-active {
	border-color: var(--bpa-pt-main-green);
	color: var(--bpa-pt-main-green-darker);
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tab-menu--item.__bpa-is-active,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tab-menu--item.__bpa-is-active span {
	color: var(--bpa-pt-main-green-darker);
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front-tab-menu--item.__bpa-is-active .bpa-front-tm--item-icon {
	color: var(--bpa-pt-main-green);
}

.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-highlight,
.bpa-frontend-main-container.bpa-frontend-vue3 .bpa-front--dt__calendar-host .vc-highlights {
	background: var(--bpa-pt-main-green-alpha-12);
}