/* ------------------------------------------------------------------
   Sekcja "Wolne terminy" na stronie ogloszenia (par. 6).

   OSOBNY PLIK, nie dopisek do advert_page.css - ?VERSION jest stala z
   gitignorowanego .env, wiec poprawka w ISTNIEJACYM arkuszu nie dociera ani na
   serwer testowy, ani do przegladarek. Nowy plik dostaje swoj adres i dziala
   od razu.

   Oprawa karty (tlo, ramka, cien, padding) przychodzi z .rd-card w
   advert_page.css - tutaj jest wylacznie to, czego tamten nie zna.
   ------------------------------------------------------------------ */

/* KOTWICA POD PRZYKLEJONYM PASKIEM. Skok z "Zobacz wolne terminy" ustawial
   sekcje dokladnie przy gornej krawedzi okna, a tam stoi przyklejony pasek:
   .navbar-top jest position: fixed i ma okolo 66 px, a ponizej 992 px przykleja
   sie cala .navbar, okolo 70 px. Naglowek sekcji ladowal wiec ZA paskiem.

   scroll-margin-top przesuwa sam punkt docelowy przewijania, nie uklad - nic
   sie nie przesuwa, dopoki ktos nie skoczy w kotwice. Jedna wartosc na oba
   warianty paska: 90 px pokrywa ten wyzszy z zapasem, a odrobine za niski
   punkt docelowy nikomu nie przeszkadza. */
#wolne-terminy { scroll-margin-top: 90px; }

.rd-sch-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.rd-sch-titles { min-width: 0; }

.rd-sch-sub {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-secondary, #5a6664);
}

/* Zielona kropka przed informacja o swiezosci - ten sam sygnal co przy
   aktywnosci korepetytora, wiec uczen czyta go bez tlumaczenia. */
.rd-sch-fresh::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 999px;
	background: var(--brand-500, #2db994);
	vertical-align: middle;
}

.rd-sch-pill {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--brand-700, #1d8a6e);
	background: var(--brand-50, #ecfaf5);
	border-radius: 999px;
	padding: 6px 14px;
	white-space: nowrap;
}

/* ---------- skrot w naglowku ogloszenia ----------
   Kotwica do sekcji nizej. Wyglada jak przycisk, bo ma byc zauwazona, ale
   zostaje linkiem - dziala bez javascriptu i da sie otworzyc w nowej karcie. */

.rd-sch-jump {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 8px 12px;
	border: 1px solid var(--border-subtle, #e2e7e5);
	border-radius: 8px;
	background: var(--gray-50, #f6f8f7);
	font-size: 14px;
	line-height: 20px;
	color: var(--text-primary, #161e1c);
	text-decoration: none;
}
.rd-sch-jump:hover {
	border-color: var(--brand-400, #5ccdb0);
	background: var(--brand-50, #ecfaf5);
	color: var(--text-primary, #161e1c);
}
.rd-sch-jump .rd-ico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--brand-600, #25a282); }

/* Siedem kolumn o rownej szerokosci. minmax(0, 1fr), a nie samo 1fr: 1fr to
   minmax(auto, 1fr), a to auto nie pozwala kolumnie zejsc ponizej szerokosci
   tresci - najdluzszy termin rozpychalby wtedy caly tydzien. */
.rd-sch-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}

.rd-sch-day {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rd-sch-head {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-subtle, #e2e7e5);
	text-align: center;
}

.rd-sch-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: var(--text-primary, #161e1c);
}

/* Wysokosci calkowite, nie mnozniki - inaczej kolumny z inna liczba terminow
   rozjezdzaja sie o pol piksela i naglowki nie stoja w jednej linii. */
.rd-sch-count {
	display: block;
	font-size: 12px;
	line-height: 16px;
	color: var(--text-tertiary, #7c8886);
}

.rd-sch-slots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rd-sch-slots li { min-width: 0; }

/* Kafelek terminu jest PRZYCISKIEM, nie elementem listy: uczen go klika, wiec
   ma byc fokusowalny i obslugiwac Enter bez dorabiania obslugi klawiatury.
   Stad reset wygladu przycisku i szerokosc 100%, zeby wypelnial kolumne. */
.rd-sch-slot {
	display: block;
	width: 100%;
	border: 1px solid var(--brand-200, #b5ebdd);
	background: var(--brand-50, #ecfaf5);
	border-radius: 8px;
	padding: 6px 4px;
	text-align: center;
	min-width: 0;
	font: inherit;
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
}

.rd-sch-slot:hover {
	background: var(--brand-100, #d8f4ec);
	border-color: var(--brand-400, #5ccdb0);
}

.rd-sch-slot:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(45, 185, 148, .3);
}

.rd-sch-slot.is-selected {
	background: var(--brand-500, #2db994);
	border-color: var(--brand-600, #25a282);
}
.rd-sch-slot.is-selected .rd-sch-time,
.rd-sch-slot.is-selected .rd-sch-dur { color: #fff; }

/* Stopka: legenda po lewej, wyjscie dla kogos, komu nic nie pasuje, po prawej
   (par. 6.1). Na waskim ekranie lamie sie na dwa wiersze. */
.rd-sch-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--border-subtle, #e2e7e5);
	font-size: 14px;
	color: var(--text-secondary, #5a6664);
}

.rd-sch-legend,
.rd-sch-own-wrap { margin: 0; }

.rd-sch-legend {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rd-sch-key {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	display: inline-block;
}
.rd-sch-key--free {
	background: var(--brand-50, #ecfaf5);
	border: 1px solid var(--brand-200, #b5ebdd);
}
.rd-sch-key--picked { background: var(--brand-500, #2db994); }
/* Odstep przed druga para swatch-podpis, zeby nie sklejaly sie w jedno. */
.rd-sch-key--picked { margin-left: 10px; }

/* ---------- podpowiedz w kolumnie kontaktu ----------
   Wstawiana przez javascript, bo ma sens wylacznie wtedy, gdy klikanie w ogole
   dziala. Bez skryptu nie pojawia sie wcale - nie obiecujemy czegos, czego
   strona wtedy nie potrafi. */

.rd-sch-hint {
	border-radius: 12px;
	background: var(--gray-50, #f6f8f7);
	padding: 12px 14px;
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-secondary, #5a6664);
}

/* ---------- karta wybranego terminu w kolumnie kontaktu ----------
   Wstawiana przez javascript nad przyciskami, zeby uczen widzial, o co
   wlasnie zapyta. Znika razem z odznaczeniem terminu. */

.rd-sch-picked {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--border-default, #c8d0ce);
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 12px;
}

.rd-sch-picked-body { flex: 1 1 auto; min-width: 0; }

.rd-sch-picked-when {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: var(--text-primary, #161e1c);
}

.rd-sch-picked-time {
	display: block;
	font-size: 14px;
	line-height: 18px;
	color: var(--text-secondary, #5a6664);
}

.rd-sch-picked-clear {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--text-secondary, #5a6664);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.rd-sch-picked-clear:hover { background: var(--gray-100, #eef1f0); }

.rd-sch-time {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	color: var(--brand-700, #1d8a6e);
	white-space: nowrap;
}

.rd-sch-dur {
	display: block;
	font-size: 11px;
	line-height: 14px;
	color: var(--text-tertiary, #7c8886);
}

.rd-sch-day--empty .rd-sch-head { border-bottom-color: transparent; }
.rd-sch-day--empty .rd-sch-name { color: var(--text-tertiary, #7c8886); font-weight: 500; }

/* ---------- waski ekran ----------
   Siedem kolumn nie miesci sie na telefonie: termin "17:15-18:15" potrzebuje
   okolo 70 px, a przy 375 px szerokosci kolumna ma ich 45. Dni ida wiec jeden
   pod drugim, a terminy ukladaja sie w wiersz obok nazwy dnia. */

@media (max-width: 767px) {
	.rd-sch-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.rd-sch-day {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 8px 0;
		border-bottom: 1px solid var(--border-subtle, #e2e7e5);
	}

	.rd-sch-head {
		flex: 0 0 92px;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.rd-sch-slots {
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1 1 auto;
		min-width: 0;
	}

	.rd-sch-slot { padding: 6px 10px; }

	/* Dzien bez terminow to na telefonie sama nazwa i podpis - kreska pod nim
	   zostaje, zeby rytm listy sie nie lamal. */
	.rd-sch-day--empty { opacity: .6; }
}