/* ==========================================================================
   Salon Booking System — override wizualny dla LP "Swiateczna sesja rodzinna"
   Scope: .lp-salon (widget [salon] wewnatrz modala #lp-booking-modal,
   patrz css/style.css sekcja "MODAL REZERWACJI")

   Baza kolorow (czerwony akcent na przyciskach/progress barze) pochodzi
   z globalnych ustawien wtyczki (Style -> Custom colors, juz wlaczone,
   wspolne z /rezerwacja-sesji-fotograficznej/) — NIE jest tu nadpisywana.
   Ten plik dostosowuje wylacznie typografie, promienie, odstepy i karte,
   zeby widget wygladal jak natywna czesc LP, a nie osadzony obcy blok.
   Ladowany PO stylach wtyczki (patrz functions.php, priorytet enqueue).
   ========================================================================== */

/* Karta - usuwamy podwojne obramowanie (LP juz ma .booking__panel jako karte) */
.lp-salon #sln-salon {
	background: transparent;
	padding: 0;
}

.lp-salon #sln-salon-booking.sln-shortcode {
	font-family: var(--font-body, 'DM Sans', sans-serif);
	color: var(--ink, #2B2118);
}

/* Wewnetrzny naglowek "Book an appointment" duplikuje H2 LP nad widgetem — ukryty */
.lp-salon .sln-salon-title {
	display: none !important;
}

/* Tytul aktualnego kroku - typografia LP (Fraunces), mniejszy odstep od gory */
.lp-salon .salon-step-title {
	font-family: var(--font-display, 'Fraunces', serif);
	color: var(--green-800, #1B4136);
	font-weight: 600;
	margin-top: 0;
}

/* ==========================================================================
   PALETA: czerwien (main-a, globalna, wspolna z /rezerwacja-sesji-fotograficznej/)
   -> zielen butelkowa LP, WYLACZNIE w scope .lp-salon.
   Wszystkie selektory ponizej zweryfikowane bezposrednio w DOM (getComputedStyle
   na zywym widgecie, kroki 2/6 uslugi + 3/6 data) — nie zgadywane z minifikatu.
   Czerwien ZOSTAJE tam, gdzie oznacza blad walidacji: .sln-alert--problem,
   .sln-alert--warning, .errors-area, .sln-input--error / stan invalid pol —
   te klasy NIE sa tu dotykane.
   ========================================================================== */

/* --- Progress bar: sln-progbar__wrapper > .sln-progbar__text + .sln-progbar > .sln-progbar__item --- */
.lp-salon .sln-progbar__wrapper {
	margin-bottom: 1.5rem;
}

/* Track (bylo rgba(221,51,51,.25) rozowy pasek) -> pastelowa zielen */
.lp-salon .sln-progbar {
	background-color: var(--green-100, #E1EBE5) !important;
}

/* Wypelnienie: krok biezacy + wszystkie kroki juz zaliczone (nastepne rodzenstwo
   w DOM wg reversed-steps renderingu wtyczki) -> zielen; przyszle kroki przezroczyste */
.lp-salon .sln-progbar__item {
	background-color: transparent !important;
}
.lp-salon .sln-progbar__item--current,
.lp-salon .sln-progbar__item--current ~ .sln-progbar__item {
	background-color: var(--green-700, #245046) !important;
}
.lp-salon .sln-progbar__item--current {
	box-shadow: 0 0 0 2px var(--gold, #C79A44);
}

/* --- Tytuly uslug (linki) --- */
.lp-salon .sln-list__item__name,
.lp-salon .sln-service-name,
.lp-salon .sln-steps-name {
	color: var(--green-700, #245046) !important;
}

/* --- Karta uslugi: szare tlo -> biel karty LP, delikatna ramka dla odrebnosci --- */
.lp-salon .sln-list__item {
	background-color: var(--paper, #FFFFFF) !important;
	border: 1px solid var(--border, #E3D6BF);
}

/* --- Checkboxy: ramka + haczyk po zaznaczeniu --- */
.lp-salon .sln-checkbox label:before {
	border-color: var(--green-700, #245046) !important;
}
.lp-salon .sln-checkbox input:checked + label:before {
	background-color: var(--green-100, #E1EBE5) !important;
	border-color: var(--green-700, #245046) !important;
}
.lp-salon .sln-checkbox input:checked + label:after,
.lp-salon .sln-radiobox input:checked + label:after {
	color: var(--green-700, #245046) !important;
	border-color: var(--green-700, #245046) !important;
}

/* --- Cena przy usludze (.sln-service-price/.sln-list__item__price) + kwota "Razem" --- */
.lp-salon .sln-service-price,
.lp-salon .sln-service-price-value,
.lp-salon .sln-total-price {
	color: var(--green-800, #1B4136) !important;
}

/* Rozowe tlo paska dolnego (Wroc/Dalej/Razem) -> pastelowa zielen, jak track progbara */
.lp-salon .sln-box__bottombar__fkbg--customcolors {
	background-color: var(--green-100, #E1EBE5) !important;
}

/* Ikona lupy + tekst pola "Przeszukaj uslugi" (placeholder ma WLASNA regule
   koloru, niezalezna od .color na input - trzeba nadpisac osobno) */
.lp-salon .sln-service-search input,
.lp-salon .sln-service-search__icon {
	color: var(--green-700, #245046) !important;
}
.lp-salon .sln-service-search input::placeholder,
.lp-salon .sln-input input::placeholder,
.lp-salon .sln-input textarea::placeholder {
	color: rgba(36, 80, 70, .6) !important; /* green-700 @ 60% - czytelny, ale nadal placeholder */
}

/* --- Przyciski: Dalej (emphasis) + Wroc (borderonly). Stan disabled dziedziczy
   ten sam kolor bazowy + opacity z wtyczki -> daje stonowana zielen automatycznie. --- */
.lp-salon .sln-btn--emphasis {
	background-color: var(--green-700, #245046) !important;
	border-color: var(--green-700, #245046) !important;
}
.lp-salon .sln-btn--emphasis:hover,
.lp-salon .sln-btn--emphasis:focus,
.lp-salon .sln-btn--emphasis:active {
	background-color: var(--green-800, #1B4136) !important;
	border-color: var(--green-800, #1B4136) !important;
}
.lp-salon .sln-btn--borderonly {
	border-color: var(--green-700, #245046) !important;
	color: var(--green-800, #1B4136) !important;
}
.lp-salon .sln-btn--borderonly:hover {
	background-color: var(--green-100, #E1EBE5) !important;
}

/* --- Datepicker/kalendarz: znacznik "dzisiaj" + dostepny/zaznaczony dzien
   (base selector w salon.css laczy .sln-btn--emphasis z .day.active:not(.disabled)
   i .day:not(.disabled):hover - powielone tu dla pewnosci w kazdym stanie) --- */
.lp-salon .day.active,
.lp-salon .datetimepicker table tr td.day.active:not(.disabled),
.lp-salon .datetimepicker table tr td.day:not(.disabled):hover,
.lp-salon .datetimepicker table tr td span.hour.active:not(.disabled),
.lp-salon .datetimepicker table tr td span.minute.active:not(.disabled),
.lp-salon .datetimepicker table tr td span.month.active:not(.disabled),
.lp-salon .datetimepicker table tr td span.year.active:not(.disabled) {
	background-color: var(--green-700, #245046) !important;
	color: #fff !important;
}

/* --- select2 (dropdowny) + stepper — te same wspolne selektory co przyciski w wtyczce --- */
.lp-salon .select2-container--sln .select2-results__option[aria-selected="true"] {
	background-color: var(--green-700, #245046) !important;
}
.lp-salon .sln-stepper .step.step--active .step-number {
	background-color: var(--green-700, #245046) !important;
}

/* --- Komunikaty niebedace bledem (info/success/general/wait) — problem/warning
   ZOSTAJA czerwone/pomaranczowe, to sa faktyczne bledy walidacji --- */
.lp-salon .sln-alert--info,
.lp-salon .sln-alert--info:after,
.lp-salon .sln-alert--success,
.lp-salon .sln-alert--success:after,
.lp-salon .sln-alert--general:not(.sln-alert--problem),
.lp-salon .sln-alert--wait,
.lp-salon .sln-alert--wait:after {
	color: var(--green-800, #1B4136) !important;
	border-color: var(--green-700, #245046) !important;
}

/* Promienie i cienie przyciskow/pol wewnatrz kroków - spojne z --radius LP */
.lp-salon .sln-btn,
.lp-salon .sln-input,
.lp-salon .sln-input input,
.lp-salon .sln-input textarea,
.lp-salon .sln-input select {
	border-radius: var(--radius, 10px) !important;
}

/* Focus states - obwodka zlota zamiast domyslnej niebieskiej (dziala na kazdym kroku) */
.lp-salon *:focus-visible {
	outline: 2px solid var(--gold, #C79A44) !important;
	outline-offset: 2px;
}

/* Loader / credits stopki wtyczki - wyciszony, nie krzyczy kolorem z domyslnego motywu */
.lp-salon #sln-plugin-credits {
	opacity: .6;
	font-size: .75rem;
	text-align: center;
	margin-top: 1rem;
}

/* Mobile - mniej paddingu wewnatrz karty na waskich ekranach (karta LP ma .75rem) */
@media (max-width: 480px) {
	.lp-salon .sln-salon--m,
	.lp-salon .sln-salon--m__content {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Dopisek "As X% upfront deposit" pod przyciskiem platnosci (krok summary) -
   duplikuje info z lp-modal__note pod widgetem, ukryty TYLKO w tym scope.
   Zrodlo: views/shortcode/_form_actions.php ok. 162, klasa .sln-deposit-note
   (weryfikacja w zywym DOM 02.09.2026, krok summary z pakietem PREMIUM).
   Przycisk platnosci ZOSTAJE - ukrywamy wylacznie ten podpis. */
.lp-salon .sln-deposit-note {
	display: none;
}

/* Etykieta wybranego pakietu (ustawiana przez lp-booking.js po kliknieciu "Wybieram"
   na karcie cennika) - nad widgetem, aria-live, pusta domyslnie */
.lp-salon__selected {
	font-family: var(--font-body, 'DM Sans', sans-serif);
	font-weight: 700;
	color: var(--green-800, #1B4136);
	margin: -.5rem 0 1rem;
}
.lp-salon__selected:empty {
	display: none;
}