.sc-kafelek {
	background: #faf9f7;
	border-radius: 6px;
	padding: 28px 22px;
	text-align: center;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0;
	max-width: 340px;
	height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.sc-kafelek * {
	box-sizing: border-box;
}

/* Górna część: data -> godziny -> etykieta -> tytuł -> zdjęcie -> lekarz */
.sc-gorna-czesc {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100%;
}

.sc-data {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
	color: #333333;
	margin-bottom: 2px;
}

.sc-godziny {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	color: #333333;
	margin-bottom: 10px;
}

.sc-numer {
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.5px;
	color: #8a5a2b;
	margin-bottom: 10px;
}

/* Stała strefa wysokości dla tytułu - niezależnie czy 1 czy 3 linijki tekstu,
   niżej znajdujące się elementy (zdjęcie/lekarz/timer/button) zaczynają się
   zawsze w tym samym miejscu we wszystkich kafelkach obok siebie. */
.sc-tytul {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: #8a5a2b;
	width: 100%;
	min-height: calc(1.4em * 3);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 10px;
}

/* sc-zdjecie ZAWSZE zajmuje miejsce (min-height ustawiane też przez kontrolkę
   "Rozmiar zdjęcia" w Elementorze), nawet gdy zdjęcie jest ukryte/puste -
   dzięki temu kafelki bez zdjęcia i ze zdjęciem mają dolne elementy wyrównane. */
.sc-zdjecie {
	min-height: 100px;
	width: 100px;
	margin-bottom: 10px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.sc-zdjecie img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 12px;
	display: block !important;
	margin: 0 auto;
}

/* Stała strefa wysokości dla nazwiska lekarza (max 2 linijki) */
.sc-lekarz {
	font-size: 14px;
	font-weight: 600;
	color: #333333;
	width: 100%;
	min-height: calc(1.4em * 2);
	line-height: 1.4;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Dolna część: timer + button - zawsze przyklejona do dołu kafelka */
.sc-dolna-czesc {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100%;
	margin-top: 14px;
}

/* nowrap = odliczanie zawsze w JEDNEJ linii, nawet przy 4 wąskich kafelkach obok siebie.
   flex: 0 0 auto + sensowny min-width zapobiegają ściśnięciu kolumn do zera
   (co wcześniej powodowało nachodzenie cyfr na siebie). */
.sc-countdown {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: 10px;
	width: 100%;
}

.sc-kolumna {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	min-width: 32px;
	flex: 0 0 auto;
}

.sc-liczba {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: #8a5a2b;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sc-etykieta {
	font-size: 11px;
	margin-top: 4px;
	color: #666666;
	white-space: nowrap;
}

.sc-zakonczono {
	font-size: 16px;
	font-weight: 600;
	color: #8a5a2b;
	padding: 6px 0;
}

.sc-przycisk-wrapper {
	margin-top: 16px;
}

/* Gdy przycisk jest wyłączony, miejsce po nim zostaje zarezerwowane
   (niewidoczne, ale nadal zajmuje wysokość) - żeby timer we wszystkich
   kafelkach obok siebie kończył się na tej samej wysokości. */
.sc-przycisk-niewidoczny {
	visibility: hidden;
	pointer-events: none;
}

.sc-przycisk {
	display: inline-block;
	background-color: #8a5a2b;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 28px;
	border-radius: 4px;
	border: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

.sc-przycisk:hover {
	background-color: #6e4520;
	color: #ffffff;
}