body {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: #f7f7f8;
	margin: 0;
}
.wrap {
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.card {
	width: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	padding: 22px;
}
h1 {
	font-size: 22px;
	margin: 0 0 12px;
}
.row {
	margin-bottom: 12px;
}
label {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
}
input, select, button, textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 10px;
	font-size: 15px;
}
button {
	cursor: pointer;
	border: none;
	background: #111;
	color: #fff;
}
.slots {
	margin-top: 8px;
	color: #000;
}
.slot {
	display: block;
	width: 100%;
	text-align: left;
	color: #000;
	padding: 10px 12px;
	margin: 6px 0;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fafafa;
	cursor: pointer;
}
.slot[disabled] {
	opacity: .4;
	cursor: not-allowed;
}
.msg {
	margin-top: 10px;
	font-size: 14px;
}
.slot-btn.disabled {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}
.slot {
	width: 100%;
	text-align: left;
	padding: .9rem 1rem;
	border: 1.5px solid #ddd;
	border-radius: .75rem;
	background: #fff;
	color: #111;
	font-weight: 500;
	transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
/* Disabled/neklickací (probíhá, minulo, obsazeno) */
.slot.disabled {
	opacity: .7;
	cursor: not-allowed;
	pointer-events: none;
}
/* Focus ring (klávesnice) */
.slot:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}
/* ---------- Stavy ---------- */
/* VOLNÉ – future */
.slot--future {
	background: #E8F5E9;
/* světle zelená */
	border-color: #A5D6A7;
	color: #1B5E20;
}
.slot--future:hover {
	background: #DCF1DF;
/* o chlup tmavší */
	border-color: #7FC997;
}
/* PROBÍHÁ – ongoing */
.slot--ongoing {
	background: #FFF4E5;
/* světle oranžová */
	border-color: #FFD699;
	color: #8B5E00;
}
/* OBSAZENO – booked */
.slot--booked {
	background: #FDE7E9;
/* světle červená */
	border-color: #F5C2C7;
	color: #B3261E;
}
/* MINULO – past */
.slot--past {
	background: #F4F4F5;
/* šedá mlha */
	border-color: #E5E7EB;
	color: #6B7280;
}
.slot--selected {
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.15);
	background: #a2efad;
/* jemně odliší pozadí */
	font-weight: 600;
}
/* Toast (spodní „hlášení“) */
#toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9999;
	pointer-events: none;
}
.toast-item {
	background: #111;
	color: #fff;
	padding: .75rem 1rem;
	border-radius: .75rem;
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
	margin-top: .5rem;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .18s ease, transform .18s ease;
}
.toast-item.show {
	opacity: 1;
	transform: translateY(0);
}
.toast-item--ok {
	background: #16a34a;
}
/* zelený */
.toast-item--warn {
	background: #d97706;
}
/* oranžový */
.toast-item--err {
	background: #b91c1c;
}
/* červený */
.center-text {
	text-align: center;
}
#slots.error {
	outline: 2px solid #ef4444;
	outline-offset: 4px;
}
.slot.selected {
	box-shadow: 0 0 0 2px #111;
}
p a {
	text-decoration: underline;
	color: #111;
}
p a:hover {
	text-decoration: none;
}
textarea,
input[type="text"],
input[type="email"],
input[type="phone"],
input[type="file"],
input[type="date"] {
  display: block;
  width: 100%;
  padding: .9rem 1rem;
  border: 1.5px solid #ddd;
  border-radius: .75rem;
  font-size: 15px;
  box-sizing: border-box;
}