/**
 * Style listy terminów.
 *
 * Kolory biorą się w pierwszej kolejności ze zmiennych globalnych Elementora —
 * jeśli klientka zmieni paletę w motywie, lista pójdzie za nią. Wartości
 * zapasowe odpowiadają obecnej identyfikacji Beside You. Kroju nie narzucamy,
 * dziedziczy się z motywu.
 *
 * ŚWIADOMA DECYZJA: terminy NIE wyglądają na klikalne. Lista jest wyłącznie
 * do odczytu (rezerwacja dopiero po opłaceniu zamówienia), więc nie ma tu
 * ramek przycisków, kursora pointer ani wyraźnych stanów hover. Element, który
 * wygląda na klikalny, a nie reaguje, jest gorszy niż zwykły tekst.
 */

.siteart-calendly {
	/* Paleta — zmienne Elementora z wartościami zapasowymi. */
	--sa-cal-ink: var( --e-global-color-primary, #0b0449 );
	--sa-cal-accent: var( --e-global-color-03b57a8, #ce0054 );
	--sa-cal-muted: var( --e-global-color-text, #7a7a7a );
	--sa-cal-surface: var( --e-global-color-511ef37, #fcf9f5 );
	--sa-cal-line: var( --e-global-color-4bd5645, #f5ecee );

	/* Wymiary — jedno miejsce do strojenia. */
	--sa-cal-radius: 10px;
	--sa-cal-pad: 1.25rem;
	--sa-cal-gap: 0.9rem;

	margin: 0 0 1.5em;
	padding: var( --sa-cal-pad );
	background: var( --sa-cal-surface );
	border: 1px solid var( --sa-cal-line );
	border-radius: var( --sa-cal-radius );
	color: var( --sa-cal-ink );
	font-size: 1rem;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/*  Nagłówek nad listą                                                  */
/* ------------------------------------------------------------------ */

.siteart-calendly__title {
	margin: 0 0 0.85rem;
	padding: 0 0 0.7rem;
	border-bottom: 1px solid var( --sa-cal-line );
	color: var( --sa-cal-ink );
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
}

/* ------------------------------------------------------------------ */
/*  Lista terminów                                                      */
/* ------------------------------------------------------------------ */

.siteart-calendly__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.siteart-calendly__slot {
	margin: 0;
	padding: 0;
	border-top: 1px solid var( --sa-cal-line );
}

.siteart-calendly__slot:first-child {
	border-top: 0;
}

/*
 * Data po lewej, godzina po prawej. Kropka-znacznik dokładana pseudoelementem,
 * żeby nie ruszać markupu renderu.
 */
.siteart-calendly__stamp {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem var( --sa-cal-gap );
	padding: 0.65rem 0;
}

.siteart-calendly__date {
	display: inline-block;
	position: relative;
	padding-left: 1rem;
	color: var( --sa-cal-ink );
	font-size: 0.95em;
}

.siteart-calendly__date::first-letter {
	text-transform: uppercase;
}

.siteart-calendly__date::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --sa-cal-accent );
}

.siteart-calendly__hour {
	font-weight: 700;
	font-size: 1.05em;
	color: var( --sa-cal-ink );
	/* Cyfry o równej szerokości — godziny układają się w równą kolumnę. */
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/*  Teksty pod listą                                                    */
/* ------------------------------------------------------------------ */

.siteart-calendly__note {
	margin: var( --sa-cal-gap ) 0 0;
	padding-top: var( --sa-cal-gap );
	border-top: 1px solid var( --sa-cal-line );
	color: var( --sa-cal-muted );
	font-size: 0.875em;
	line-height: 1.45;
}

.siteart-calendly__updated {
	margin: 0.75rem 0 0;
	color: var( --sa-cal-muted );
	font-size: 0.75em;
	opacity: 0.85;
}

/* Komunikat zapasowy — ma wyglądać spokojnie, nie jak błąd. */
.siteart-calendly__fallback {
	margin: 0;
	color: var( --sa-cal-ink );
	font-size: 0.95em;
}

/* ------------------------------------------------------------------ */
/*  Przycisk „pokaż więcej"                                             */
/*                                                                      */
/*  TEN element jest klikalny i celowo tak wygląda — w odróżnieniu od   */
/*  samych terminów. Kursor, podkreślenie i strzałka mają to jasno      */
/*  komunikować.                                                        */
/* ------------------------------------------------------------------ */

.siteart-calendly__more {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: var( --sa-cal-gap ) 0 0;
	padding: 0.35rem 0;
	background: none;
	border: 0;
	color: var( --sa-cal-accent );
	font: inherit;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* Strzałka w dół, składana z obróconego narożnika — bez plików graficznych. */
.siteart-calendly__more::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY( -0.18em ) rotate( 45deg );
}

.siteart-calendly__more:hover,
.siteart-calendly__more:focus-visible {
	color: var( --sa-cal-ink );
}

.siteart-calendly__more:focus-visible {
	outline: 2px solid var( --sa-cal-accent );
	outline-offset: 3px;
	border-radius: 3px;
}

/*
 * Atrybut hidden musi wygrać z display ustawionym wyżej — inaczej przycisk
 * i ukryte pozycje listy byłyby nadal widoczne.
 */
.siteart-calendly__more[hidden],
.siteart-calendly__slot[hidden] {
	display: none;
}

/*
 * Uwaga: JS podmienia listę przez innerHTML i nie ustawia żadnej klasy stanu,
 * więc nie ma tu reguł na „w trakcie odświeżania" — byłyby martwym kodem.
 * Gdybyśmy chcieli przygaszenie listy przy podmianie, wystarczy dołożyć
 * przełączanie klasy w calendly-terminy.js i wtedy dopisać tu regułę.
 */

/* ------------------------------------------------------------------ */
/*  Wariant kompaktowy — na karty produktów                             */
/*  Użycie: klasa "siteart-calendly--kompakt" w polu klasy widgetu      */
/* ------------------------------------------------------------------ */

.siteart-calendly--kompakt {
	--sa-cal-pad: 0.9rem;
	--sa-cal-gap: 0.6rem;

	font-size: 0.9375rem;
}

.siteart-calendly--kompakt .siteart-calendly__stamp {
	padding: 0.45rem 0;
}

.siteart-calendly--kompakt .siteart-calendly__note {
	font-size: 0.8125em;
}

/* ------------------------------------------------------------------ */
/*  Wariant bez ramki — gdy widget siedzi w sekcji z własnym tłem       */
/*  Użycie: klasa "siteart-calendly--goly"                              */
/* ------------------------------------------------------------------ */

.siteart-calendly--goly {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* ------------------------------------------------------------------ */
/*  Wąskie ekrany                                                       */
/* ------------------------------------------------------------------ */

@media ( max-width: 400px ) {
	.siteart-calendly__stamp {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
	}

	.siteart-calendly__hour {
		padding-left: 1rem;
	}
}