/*
 * LatePoint w stylu Recepcji: kolory, fonty i przyciski z Kitu strony.
 * Wyłączane w Recepcja → Ustawienia → Rezerwacje.
 * LatePoint ustawia zmienne na :root, html:root wygrywa bez !important.
 * Kolory z tokenów Recepcji (--rcp-color-*, też na :root). Zmienne Elementora (--e-global-*) są dopiero na body, na :root ich nie ma.
 */
html:root {
	--latepoint-brand-primary: var(--rcp-color-primary, #8c5e52);
	/* Karta LatePoint jest biała także na ciemnych szablonach, więc tekst w wersji „ink” (czytelny na bieli). */
	--latepoint-body-color: var(--rcp-color-text-ink, var(--rcp-color-text, #5f5852));
	--latepoint-headings-color: var(--rcp-color-heading-ink, var(--rcp-color-heading, #2e2a27));
	--latepoint-color-text-faded: color-mix(in srgb, var(--latepoint-body-color) 75%, #fff);
	--rcp-lp-ink: var(--rcp-color-primary-ink, var(--latepoint-brand-primary));
	--rcp-lp-on-primary: var(--rcp-color-on-primary, #fff);
	--latepoint-timeslot-selected-color: var(--latepoint-brand-primary);
	--latepoint-calendar-weekday-label-color: var(--latepoint-headings-color);
	--latepoint-calendar-weekday-label-bg: transparent;
	--latepoint-side-panel-bg: var(--rcp-lp-side-bg, color-mix(in srgb, var(--rcp-color-secondary, #f3ede1) 45%, #fff));
	--latepoint-summary-panel-bg: #fff;
	--latepoint-border-radius: var(--rcp-radius, 0px);
	--latepoint-border-radius-sm: var(--rcp-radius, 0px);
	--latepoint-border-radius-md: var(--rcp-radius, 0px);
	--latepoint-border-radius-lg: var(--rcp-radius, 0px);
	--rcp-lp-line: color-mix(in srgb, var(--latepoint-body-color) 18%, #fff);
	--rcp-lp-soft: color-mix(in srgb, var(--rcp-color-secondary, #f3ede1) 60%, #fff);
}

/* --- Fonty: tekst jak na stronie, nagłówki fontem nagłówków --- */
.latepoint-w,
.latepoint-w :is(input, textarea, select, button),
.latepoint-lightbox-w,
.latepoint-customer-dashboard,
.latepoint-customer-dashboard :is(input, textarea, select, button) {
	font-family: var(--rcp-font-body, "Jost", sans-serif);
}

/* LatePoint wpisuje szary-niebieski (#7c85a3) na sztywno w wielu miejscach. */
.latepoint-w :is(.sbh-item, .os-item-desc, .latepoint-step-desc-w, .latepoint-desc-content, .latepoint-questions, .os-item-details, .summary-box-description, .sbc-highlighted-item, .os-calendar-searching-info, .os-form-group, .os-step-tabs-w, .os-weekday),
.latepoint-customer-dashboard :is(.os-item-desc, .customer-booking-service-name + *, .label) {
	color: var(--latepoint-color-text-faded);
}

.latepoint-w .os-item-name {
	color: var(--latepoint-headings-color);
}

.latepoint-w :is(.os-heading-text, .latepoint-desc-title, .summary-header-label, .os-current-month-label .current-month, h1, h2, h3),
.latepoint-customer-dashboard :is(h1, h2, h3, .os-heading-text) {
	font-family: var(--rcp-font-heading, "Cormorant Garamond", serif);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--latepoint-headings-color);
}

/* Ceny w jednej linii (120 zł, nie 120 / zł), w kolorze czytelnym na białej karcie (jasny główny był blady). */
.latepoint-w :is(.os-item-price, .os-item-price-w, .spi-price, .os-price) {
	white-space: nowrap;
}

.latepoint-w :is(.os-item-price, .os-item-price-w, .spi-price, .os-price, .os-item-price-label) {
	color: var(--rcp-lp-ink) !important;
}

/* --- Przyciski LatePoint --- */
.latepoint-w .latepoint-btn,
.latepoint-customer-dashboard .latepoint-btn {
	border-radius: var(--rcp-radius-btn, var(--rcp-radius, 0));
	font-size: var(--rcp-form-btn-size, 13px);
	font-weight: 500;
	letter-spacing: var(--rcp-form-btn-ls-lp, 0.12em);
	text-transform: var(--rcp-form-btn-transform, uppercase);
	box-shadow: none;
}

.latepoint-w .latepoint-btn.latepoint-btn-primary:not(.latepoint-btn-link),
.latepoint-customer-dashboard .latepoint-btn.latepoint-btn-primary:not(.latepoint-btn-link) {
	background-color: var(--latepoint-brand-primary);
	border-color: var(--latepoint-brand-primary);
	color: var(--rcp-lp-on-primary);
}

.latepoint-w .latepoint-btn.latepoint-btn-primary:not(.latepoint-btn-link):hover,
.latepoint-customer-dashboard .latepoint-btn.latepoint-btn-primary:not(.latepoint-btn-link):hover {
	
	background-color: var(--rcp-color-primary-hover, var(--latepoint-brand-primary));
	border-color: var(--rcp-color-primary-hover, var(--latepoint-brand-primary));
	color: var(--rcp-lp-on-primary);
}

/* LatePoint po najechaniu wymusza biały tekst; na jasnym głównym (brzoskwinia, łosoś, miód) zostaje ciemny. */
.latepoint-w .latepoint-btn.latepoint-btn-primary:not(.latepoint-btn-link):not(#rcp-x):hover,
.latepoint-w .latepoint-btn.latepoint-btn-primary:not(.latepoint-btn-link):not(#rcp-x):hover :is(span, i),
.latepoint-customer-dashboard .latepoint-btn.latepoint-btn-primary:not(.latepoint-btn-link):not(#rcp-x):hover,
.latepoint-customer-dashboard .latepoint-btn.latepoint-btn-primary:not(.latepoint-btn-link):not(#rcp-x):hover :is(span, i) {
	color: var(--rcp-lp-on-primary) !important;
}

.latepoint-w .latepoint-btn.latepoint-btn-link,
.latepoint-w .latepoint-btn.latepoint-btn-link:hover {
	background: transparent;
	border-color: transparent;
	color: var(--rcp-lp-ink);
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.latepoint-w .latepoint-btn.latepoint-btn-white {
	color: var(--latepoint-headings-color);
}

/*
 * Kit Elementora stylizuje każdy <button> (tło, wersaliki, padding).
 * W oknie LatePoint przyciski mają wyglądać tak, jak zaprojektował LatePoint.
 */
.latepoint-w button:not(.latepoint-btn),
.latepoint-w button:not(.latepoint-btn):hover,
.latepoint-w button:not(.latepoint-btn):focus,
.latepoint-customer-dashboard button:not(.latepoint-btn),
.latepoint-customer-dashboard button:not(.latepoint-btn):hover,
.latepoint-customer-dashboard button:not(.latepoint-btn):focus {
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* --- Pola formularza --- */
.latepoint-w :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select).os-form-control,
.latepoint-w .os-form-group :is(input, textarea, select) {
	border-radius: var(--rcp-radius, 0);
	border-color: var(--rcp-lp-line);
	box-shadow: none;
	color: var(--latepoint-headings-color);
}

.latepoint-w .os-form-group :is(input, textarea, select):focus {
	border-color: var(--latepoint-brand-primary);
	outline: none;
}

/* Zakładki „Nowy klient / Masz już konto?” */
.latepoint-w .os-step-tab.active {
	color: var(--latepoint-headings-color);
}

.latepoint-w .os-step-tab {
	color: var(--rcp-lp-ink);
}

/* --- Wybór usługi, kategorii, osoby: karty z cienką linią --- */
.latepoint-w :is(.os-service-selector, .os-item-i, .os-agent-selector) {
	border-color: var(--rcp-lp-line);
	box-shadow: none;
}

.latepoint-w :is(.os-service-selector, .os-item-i):hover,
.latepoint-w .os-selectable-item.selected :is(.os-service-selector, .os-item-i) {
	border-color: var(--latepoint-brand-primary);
	box-shadow: none;
}

/* --- Kalendarz i godziny: kolory strony zamiast zielonego --- */
.latepoint-w .os-day .os-day-status,
.latepoint-w .os-day .os-available-slots-bar {
	background-color: var(--rcp-lp-soft);
}

.latepoint-w .os-day .os-day-status .day-available,
.latepoint-w .os-day .os-available-slots-bar span,
.latepoint-w .os-day.os-day-has-availability .os-day-status {
	background-color: var(--latepoint-brand-primary);
}

.latepoint-w .dp-timepicker-trigger:not(.is-booked):not(.is-off) {
	background-color: var(--rcp-lp-soft);
	box-shadow: none;
	color: var(--latepoint-headings-color);
}

.latepoint-w .dp-timepicker-trigger:not(.is-booked):not(.is-off):hover,
.latepoint-w .dp-timepicker-trigger.selected {
	background-color: var(--latepoint-brand-primary);
	color: var(--rcp-lp-on-primary);
}

.latepoint-w .os-day.os-today :is(.os-day-box, .os-day-number) {
	background-color: var(--rcp-lp-soft);
}

.latepoint-w .os-weekdays .weekday {
	background-color: transparent;
	color: var(--latepoint-color-text-faded);
	font-size: 12px;
	letter-spacing: 0.08em;
}

.latepoint-w .os-day-number,
.latepoint-w .os-current-month-label .current-year {
	font-family: var(--rcp-font-body, "Jost", sans-serif);
}

/* Ikony kroków w panelu bocznym: kwadracik w kolorze strony zamiast niebieskiego. */
.latepoint-w .latepoint-step-desc-library svg [fill="#1d7bff"],
.latepoint-w .latepoint-step-desc svg [fill="#1d7bff"] {
	fill: var(--rcp-lp-soft);
}

/* „Dowiedz się więcej” pod osobą: jedna linia (dwie nachodziły na imię). */
.latepoint-w .os-item-details-popup-btn {
	overflow: hidden;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Pola: obramowanie i podpowiedzi w kolorach strony (LatePoint ma szaroniebieskie). */
.latepoint-w .os-form-group .os-form-control,
.latepoint-w .os-form-group.os-form-group-transparent .os-form-control,
.latepoint-customer-dashboard .os-form-group .os-form-control {
	border-color: var(--rcp-lp-line);
	border-radius: var(--rcp-radius, 0);
	color: var(--latepoint-headings-color);
}

.latepoint-w .os-form-group.os-form-group-transparent .os-form-control:focus,
.latepoint-w .os-form-group .os-form-control:focus {
	border-color: var(--latepoint-brand-primary);
}

.latepoint-w .os-form-control::placeholder,
.latepoint-customer-dashboard .os-form-control::placeholder {
	color: var(--latepoint-color-text-faded);
	opacity: 0.8;
}

.latepoint-w .os-day-number {
	font-weight: 500;
}

/* Dzisiejszy dzień: tło strony zamiast żółtego. */
.latepoint-w .latepoint-booking-form-element .os-monthly-calendar-days .os-day.os-today.os-month-current .os-day-box .os-day-number,
.latepoint-w .os-day.os-today .os-day-box {
	background-color: var(--rcp-lp-soft);
	color: var(--latepoint-headings-color);
}

/* Podsumowanie: nazwy i ceny w kolorze nagłówków, podpisy w kolorze tekstu (LatePoint ma granat i szaroniebieski). */
.latepoint-w :is(.sbc-big-item, .sbc-main-item, .sbc-label) {
	color: var(--latepoint-headings-color);
}

.latepoint-w :is(.sbc-sub-item, .pbh-label, .latepoint-questions p),
.latepoint-lightbox-w .latepoint-questions p {
	color: var(--latepoint-color-text-faded);
}

.latepoint-w .sbc-link-item {
	color: var(--rcp-lp-ink);
}

/* Telefon: kit Elementora dodaje przyciskowi kraju 28px z boków, numer się nie mieścił. */
.latepoint-w .os-form-group button.lp_iti__selected-country {
	padding-right: 0;
	padding-left: 0;
	letter-spacing: normal;
	text-transform: none;
}

.latepoint-w .os-form-group input.lp_iti__tel-input,
.latepoint-w .os-form-group .lp_iti__selected-dial-code {
	color: var(--latepoint-headings-color);
}

/* Fokus z myszy bez ramki; z klawiatury czytelna obwódka. */
.latepoint-w .latepoint-btn:focus:not(:focus-visible) {
	outline: none;
}

.latepoint-w .latepoint-btn:focus-visible {
	outline: 2px solid var(--latepoint-brand-primary);
	outline-offset: 3px;
}

/* Telefon: LatePoint przesuwa kalendarz i godziny o 15px w lewo (do krawędzi ekranu), z prawej zostaje pusty pas. */
@media (max-width: 767px) {
	.latepoint-w .latepoint-booking-form-element .calendar-style-modern {
		margin-left: 0;
	}
}

/* --- Panel klienta --- */
/* Przyciski „obrysowane” (Dodaj do kalendarza, Zarządzaj): tekst w kolorze strony na przezroczystym tle. */
.latepoint-w .latepoint-btn.latepoint-btn-primary.latepoint-btn-outline:not(.latepoint-btn-link) {
	background-color: transparent;
	border: 1px solid var(--latepoint-brand-primary);
	color: var(--rcp-lp-ink);
}

.latepoint-w .latepoint-btn.latepoint-btn-primary.latepoint-btn-outline:not(.latepoint-btn-link) :is(span, i) {
	color: inherit;
}

.latepoint-w .latepoint-btn.latepoint-btn-primary.latepoint-btn-outline:not(.latepoint-btn-link):hover {
	background-color: var(--latepoint-brand-primary);
	border-color: var(--latepoint-brand-primary);
	color: var(--rcp-lp-on-primary);
}

.latepoint .latepoint-w .customer-dashboard-tabs a,
.latepoint-w .latepoint-section-heading-w .heading-extra,
.latepoint-w .customer-bookings-tiles .customer-booking-info .booking-info-label {
	color: var(--latepoint-color-text-faded);
}

.latepoint .latepoint-w .customer-dashboard-tabs a.active,
.latepoint .latepoint-w .customer-dashboard-tabs a:hover {
	color: var(--rcp-lp-ink);
}

.latepoint-w :is(.customer-booking-datetime, .booking-info-value, .customer-booking-service-name) {
	color: var(--latepoint-headings-color);
}

/* „Nadchodzące”, „Witamy…”: mały nagłówek fontem tekstu zamiast drobnego Cormoranta. */
.latepoint-w .latepoint-section-heading,
.latepoint-w .customer-password-form-w h5 {
	color: var(--latepoint-color-text-faded);
	font-family: var(--rcp-font-body, "Jost", sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.latepoint-w .latepoint-customer-dashboard-header h4,
.latepoint-w > h4 {
	font-family: var(--rcp-font-body, "Jost", sans-serif);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
}

/* Status „Zatwierdzony”: kolory strony zamiast zielonego. */
.latepoint-w .customer-bookings-tiles .customer-booking-info .booking-info-value.status-approved {
	background-color: var(--rcp-lp-soft);
	color: var(--latepoint-headings-color);
}

/* --- Pola po autouzupełnieniu przeglądarki: bez niebieskiego tła Chrome --- */
/* :not(#rcp-x) podnosi wagę ponad selektory LatePoint z box-shadow: none !important. */
:is(.latepoint-w, .latepoint-form, .latepoint-customer-dashboard-w, .os-customer-login-w) input:not(#rcp-x):is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) {
	-webkit-box-shadow: 0 0 0 1000px var(--rcp-input-bg, #fff) inset !important;
	box-shadow: 0 0 0 1000px var(--rcp-input-bg, #fff) inset !important;
	transition: background-color 600000s 0s !important;
	-webkit-text-fill-color: var(--latepoint-body-color);
	caret-color: var(--latepoint-body-color);
}

/* --- Napisy w przyciskach: LatePoint koloruje <span> w środku (biały, kolor główny), więc dziedziczą kolor przycisku --- */
.latepoint-btn.latepoint-btn-primary.latepoint-btn span,
.latepoint-btn.latepoint-btn-primary.latepoint-btn-link.latepoint-btn span,
.latepoint-btn.latepoint-btn-primary.latepoint-btn-link.latepoint-btn i {
	color: inherit;
}

/* Linki-przyciski w każdej karcie LatePoint (też logowanie do panelu klienta). */
.latepoint-btn.latepoint-btn-primary.latepoint-btn-link {
	color: var(--rcp-lp-ink);
}

/* Po najechaniu LatePoint dawał kolor główny: w ciemnych szablonach jasny beż na białej karcie (np. „Nie pamiętasz?” przy logowaniu). */
.latepoint-btn.latepoint-btn-primary.latepoint-btn-link:not(#rcp-x):is(:hover, :focus-visible),
.latepoint-btn.latepoint-btn-primary.latepoint-btn-link:not(#rcp-x):is(:hover, :focus-visible) :is(span, i) {
	color: var(--rcp-lp-ink) !important; /* LatePoint ustawia kolor po najechaniu z !important */
	text-decoration: underline;
	text-underline-offset: 3px;
}


.latepoint-lightbox-w :is(.latepoint-body, .latepoint-lightbox-i, .latepoint-w) {
	overscroll-behavior: contain;
}