/*
	Custom CSS – Live sessions
	1) Obrázok nad popisom (zmeň URL v --live-image)
	2) Pod obrázkom text "Live sessions"
	3) Upravený kalendár a časová os
*/

#events, #eventForm {
	--live-image: url("https://TVOJA-STRANKA.sk/obrazok.jpg"); /* <- sem daj svoj obrázok */
	--accent: #2f6f5e;
	--accent-light: #e3efeb;
	--text: #1f2a28;
	--muted: #6b7774;
	--border: #d9e2df;
	font-family: "Helvetica Neue", Arial, sans-serif;
	color: var(--text);
}

/* ---------- Názov služby -> obrázok + "Live sessions" ---------- */
#events h3 {
	font-size: 0 !important;          /* skryje pôvodný názov */
	margin: 0 0 16px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
}

#events h3::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--live-image) center / cover no-repeat, var(--accent-light);
	border-radius: 10px;
	margin-bottom: 14px;
}

#events h3::after {
	content: "Live sessions";
	display: block;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
}

/* ---------- Popis pod obrázkom ---------- */
#events p.description, #events div.description {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--muted) !important;
	margin: 0 0 20px !important;
	max-width: 60ch;
}

/* Skryje trvanie a zbytočné tlačidlá */
#events p.duration, #events div.duration,
#events input.select_another_btn {
	display: none !important;
}

#events .selectedEvent {
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

#events input.reserve_time_btn,
#eventForm #save_button {
	background: var(--accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 24px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer;
	background-image: none !important;
}

#events input.reserve_time_btn:hover,
#eventForm #save_button:hover {
	filter: brightness(1.1);
}

#events input.reserve_time_btn:focus-visible,
#eventForm #save_button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ---------- Nadpisy nad kalendárom ---------- */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--text) !important;
	margin: 20px 0 10px !important;
	background: none !important;
	border: none !important;
}

/* ---------- Kalendár ---------- */
div.ui-widget-content {
	background: #fff !important;
	border: 1px solid var(--border) !important;
	border-radius: 10px !important;
	padding: 10px !important;
	color: var(--text) !important;
}

div.ui-widget-header {
	background: var(--accent) !important;
	border: none !important;
	border-radius: 6px !important;
	color: #fff !important;
	font-weight: 600 !important;
}

div.ui-widget-header a span {
	filter: invert(1);
}

.ui-datepicker td a,
.ui-datepicker td span {
	text-align: center !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	padding: 6px 0 !important;
}

.ui-datepicker td a:hover {
	background: var(--accent-light) !important;
}

.ui-datepicker td a.ui-state-highlight {
	color: var(--accent) !important;
	font-weight: 700 !important;
}

.ui-datepicker td a.ui-state-active {
	background: var(--accent) !important;
	color: #fff !important;
}

/* ---------- Časová os (výber času) ---------- */
#timeline-container table.timeline {
	border-collapse: separate !important;
	border-spacing: 4px !important;
	width: 100%;
}

.timeline td {
	border-radius: 6px !important;
	border: none !important;
}

.timeline td.not_worked_time {
	background: #f1f3f2 !important;
	color: #b5bdba !important;
}

.timeline td.free_time {
	background: var(--accent-light) !important;
	color: var(--accent) !important;
	cursor: pointer;
}

.timeline td.selected_time {
	background: var(--accent) !important;
	color: #fff !important;
}

.timeline td.reserved_time {
	background: #f6e3e1 !important;
	color: #a5524a !important;
}

/* ---------- Načítavanie ---------- */
div#loading {
	background: rgba(255, 255, 255, 0.85) !important;
	color: var(--accent) !important;
	border-radius: 10px !important;
}

/* ---------- Formulár dátumu ---------- */
#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {
	font-size: 14px !important;
	color: var(--muted) !important;
	font-weight: 500 !important;
}

@media (max-width: 600px) {
	#events h3::after { font-size: 20px; }
}