/*
 * 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.
 */
html:root {
	--latepoint-brand-primary: var(--e-global-color-primary, #8c5e52);
	--latepoint-body-color: var(--rcp-color-text, #5f5852);
	--latepoint-headings-color: var(--rcp-color-heading, #2e2a27);
	--latepoint-color-text-faded: color-mix(in srgb, var(--rcp-color-text, #5f5852) 75%, #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: color-mix(in srgb, var(--e-global-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(--rcp-color-text, #5f5852) 18%, #fff);
	--rcp-lp-soft: color-mix(in srgb, var(--e-global-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(.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ł). */
.latepoint-w :is(.os-item-price, .os-item-price-w, .spi-price, .os-price) {
	white-space: nowrap;
}

/* --- Przyciski LatePoint --- */
.latepoint-w .latepoint-btn,
.latepoint-customer-dashboard .latepoint-btn {
	border-radius: var(--rcp-radius, 0);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-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: #fff;
}

.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(--latepoint-headings-color);
	border-color: var(--latepoint-headings-color);
	color: #fff;
}

.latepoint-w .latepoint-btn.latepoint-btn-link,
.latepoint-w .latepoint-btn.latepoint-btn-link:hover {
	background: transparent;
	border-color: transparent;
	color: var(--latepoint-brand-primary);
	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(--latepoint-brand-primary);
}

/* --- 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: #fff;
}

.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;
}