/* ==========================================================================
   REDESIGN 2026 „Warm Teal" — krok rezerwacji /wizyty/wybierz-usluge/ (step_2).
   Nadpisuje style pluginu zielonaprzychodnia-mydr (Vue) tokenami z formularza
   fast-lane na stronie głównej: mintowy kafel, selecty #FBFBF8, koralowe pille.
   Paleta: Deep Teal #00445C · Coral #F55E32 · Turquoise #00B2AC · tinty
   ========================================================================== */

/* --- eyebrow + H2 (spójne z nagłówkami podstron) --- */
/* kicker — bezpośrednie dziecko .row, wyśrodkowany nad obiema kolumnami */
.reservation-step .mydr2026-kicker {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #F55E32;
	margin: 0 0 10px;
	width: 100%;
	text-align: center;
}
.reservation-step .mydr2026-kicker::before { content: "\2014"; margin-right: 10px; }
.reservation-step .mydr2026-kicker::after  { content: "\2014"; margin-left: 10px; }

.reservation-step .step-info-title {
	font-family: Rubik !important;
	font-size: 34px !important;
	font-weight: 700 !important;
	color: #00445C !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em;
	border-bottom: none !important;
}
@media (max-width: 767px) {
	.reservation-step .step-info-title { font-size: 26px !important; }
}

/* --- formularz — mintowy kafel jak fast-lane na home --- */
.reservation-step.step-2 form {
	background: rgb(209 244 242 / 86%);
	border: 0;
	border-radius: 8px;
	padding: 28px;
	box-shadow: 0 8px 24px rgba(0, 68, 92, 0.12);
}
/* fast-lane (przyjście z home) — kalendarz tygodniowy bez mintowego tła */
.reservation-step.step-2 form:has(.booking-step.is-fastlane) {
	background: transparent;
	padding: 0;
	box-shadow: none;
}

/* etykiety selectów + mini-nagłówki kroków — jak labelki formu na home (sidebar) */
.reservation-step .form-label,
.reservation-step .booking-step .title-step-small {
	font-family: Rubik;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #00445C !important;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 6px;
}

/* selecty — jak selecty formu na home */
.reservation-step .form-select {
	height: 48px;
	padding: 0 40px 0 16px;
	border: 1px solid #EEEBE4;
	border-radius: 8px;
	background-color: #FBFBF8;
	color: #00445C;
	font-family: Rubik;
	font-size: 15px;
	font-weight: 500;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3e%3cpath fill='%2300B2AC' d='M4 5L0 0h8z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 10px;
	box-shadow: none;
	cursor: pointer;
}
.reservation-step .form-select:focus {
	border-color: #00445C;
	outline: none;
	box-shadow: none;
}

/* --- karty rodzaju wizyty --- */
/* uwaga: arkusz pluginu (zielona-mydr-style) drukuje się blisko naszego —
   kolejność wymusza zależność w enqueue, a !important zabezpiecza kluczowe właściwości */
.reservation-step .product-card {
	background: #fff !important;
	border: 1px solid #EEEBE4 !important;
	border-radius: 8px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.reservation-step .product-card:hover {
	border-color: #00B2AC !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 68, 92, 0.10);
}
.reservation-step .product-card.is-active {
	border-color: #00B2AC !important;
	background: #fff !important;
	box-shadow: inset 0 0 0 1px #00B2AC;
}
.reservation-step .product-card__title { font-family: Rubik; color: #00445C !important; }
.reservation-step .product-card__price { font-family: Rubik; font-weight: 700; color: #00445C !important; }
.reservation-step .product-card__duration { font-family: Rubik; font-size: 13px; color: #6A7A85 !important; }

/* --- next („Wybierz termin" / „Wypełnij dane") — koralowy pill jak „Umów wizytę" na home --- */
.reservation-step .btn-select-date,
.reservation-step .btn-next {
	height: 48px;
	padding: 0 26px;
	background: #F55E32 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 86px !important;
	font-family: Rubik;
	font-weight: 500;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.reservation-step .btn-select-date:hover:not(:disabled),
.reservation-step .btn-next:hover:not(:disabled) {
	background: #E4491F !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(245, 94, 50, 0.38);
	opacity: 1;
}
.reservation-step .btn-next:disabled { opacity: .55; cursor: not-allowed; }
/* strzałka (span w markupie) — slide na hover jak ::after na home */
.reservation-step .btn-select-date span,
.reservation-step .btn-next span { transition: transform .18s ease; }
.reservation-step .btn-select-date:hover:not(:disabled) span,
.reservation-step .btn-next:hover:not(:disabled) span { transform: translateX(4px); }

/* ==========================================================================
   Kroki 3–4 (wybór wizyty po zmianie / dane pacjenta + płatność).
   Uwaga: obie sekcje mają w twigach klasę .step-3.
   ========================================================================== */
.reservation-step.step-3 form {
	background: rgb(209 244 242 / 86%);
	border: 0;
	border-radius: 8px;
	padding: 28px;
	box-shadow: 0 8px 24px rgba(0, 68, 92, 0.12);
}

/* pola checkoutu WooCommerce — jak pola formu na home */
.reservation-step .input-text {
	height: 48px;
	padding: 0 16px;
	border: 1px solid #EEEBE4 !important;
	border-radius: 8px !important;
	background-color: #FBFBF8 !important;
	color: #00445C !important;
	font-family: Rubik;
	font-size: 15px;
	font-weight: 500;
}
.reservation-step textarea.input-text { height: auto; padding: 12px 16px; }
.reservation-step .input-text:focus {
	border-color: #00445C !important;
	outline: none;
	box-shadow: none;
}
.reservation-step .form-row label:not(.checkbox) {
	font-family: Rubik;
	font-size: 12px !important;
	font-weight: 600;
	color: #00445C;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
/* zgody/checkboxy — normalna wielkość liter, stonowany granat */
.reservation-step .form-row label.checkbox { color: #2E5A62; text-transform: none; }

/* metody płatności (gdy widoczne) — białe karty na mincie */
.reservation-step .wc_payment_methods .wc_payment_method {
	background: #fff !important;
	border: 1px solid #EEEBE4;
	border-radius: 8px;
}

/* „Zamawiam i płacę" — koralowy pill jak CTA na home */
.reservation-step .place-order button {
	height: 48px;
	padding: 0 26px !important;
	background: #F55E32 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 86px !important;
	font-family: Rubik;
	font-weight: 500;
	font-size: 15px;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.reservation-step .place-order button:hover {
	background: #E4491F !important;
	color: #fff !important;
	border-color: transparent !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(245, 94, 50, 0.38);
}

/* modal (patient popup) — przycisk potwierdzenia jako koralowy pill */
.modal-patient .btn-primary {
	background: #F55E32 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 86px !important;
	padding: 12px 26px;
	font-family: Rubik;
	font-weight: 500;
	font-size: 15px;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.modal-patient .btn-primary:hover {
	background: #E4491F !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(245, 94, 50, 0.38);
}

/* --- prev („Wstecz") — ghost navy pill (wariant drugorzędny z home/kontakt) --- */
/* Tekst-link w stylu .oferta-read z home (mono, koral, uppercase); strzałka ←
   jest w treści przycisku. Neutralizujemy pill z niższych warstw (scoped Vue
   wstrzykiwane w runtime — stąd !important); wysokość 48px zostaje z pluginu
   jako niewidoczny, większy target dotykowy. */
.reservation-step .btn-back {
	margin-top: 20px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 3px;
	font-family: 'IBM Plex Mono', monospace !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: color .18s ease;
	color: #F55E32 !important;
}
.reservation-step .btn-back:hover,
.reservation-step .btn-back:focus {
	background: none !important;
	color: #E4491F !important;
}
/* bez widocznego obrysu przycisk potrzebuje wyraźnego focusa dla klawiatury */
.reservation-step .btn-back:focus-visible {
	outline: 2px solid #00445C;
	outline-offset: 2px;
}