.duration-\[1s\] {
	--tw-duration: 1s;
	transition-duration: 1s;
}

#admin-panel {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	z-index: 1000;
}

.admin-panel-menu {
	background-color: white;
	padding: 1rem;
	border-radius: 8px 0 0 8px;
	box-shadow: -2px 0px 15px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	height: 175px;
}

.admin-panel-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

.admin-panel-menu a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: #333;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.2s, color 0.2s;
}

.admin-panel-menu a:hover {
	background-color: #f0e9f2;
	color: #672B7B;
}

#admin-panel-toggle {
	background-color: #672B7B;
	color: white;
	border: none;
	padding: 1.5rem 0.75rem;
	cursor: pointer;
	border-radius: 8px 0 0 8px;
	font-size: 1.2rem;
	line-height: 1;
	box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease-in-out;
}

#admin-panel.is-open .admin-panel-menu {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}

#admin-panel.is-open #admin-panel-toggle {
	transform: rotate(180deg);
	height: 175px;
	transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	justify-content: center;
	align-items: center;
	z-index: 10002;

	/* --- ZMĚNA ZDE --- */
	/* 1. Ve výchozím stavu je modal kompletně odstraněn ze stránky */
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.modal-overlay.is-visible {
	/* 2. Po přidání třídy .is-visible se zobrazí jako flex kontejner */
	display: flex;
	opacity: 1;
}

.modal-content {
	background: white;
	border-radius: 8px;
	box-shadow: 0 5px 25px rgba(0,0,0,0.2);
	width: 95%;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	transform: translateY(-20px);
	transition: transform 0.3s ease-out;
}

.modal-overlay.is-visible .modal-content {
	transform: translateY(0);
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding: 1.5rem 2rem;
	flex-shrink: 0; /* Zabrání zmenšení hlavičky */
}

.modal-body {
	/* 3. Tělo modalu se bude roztahovat a scrollovat podle potřeby */
	flex-grow: 1; /* Řekne tělu, aby zabralo všechno volné místo */
	overflow-y: auto; /* Přidá svislý scrollbar, POKUD je obsah delší */
}

.modal-header h2 {
	margin: 0;
	font-size: 1.5rem;
}

.close-modal-btn {
	background: none;
	border: none;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	color: #aaa;
	padding: 0;
}
.close-modal-btn:hover {
	color: #333;
}

pre {
	margin: 0; /* Odstraníme výchozí odsazení */
}


#code-editor {
	/* Můžeme odebrat min-height, protože výšku teď řídí .modal-body */
	display: block;
	height: auto;
	padding: 1rem;
	outline: none;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.modal-footer {
	text-align: right;
	margin-top: 1.5rem;
	padding: 0 2rem 1.5rem; /* Upravíme padding */
	flex-shrink: 0; /* Zabrání zmenšení patičky */
}

.modal-save-btn {
	background-color: #672B7B;
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.2s;
}

.modal-save-btn:hover {
	background-color: #532262;
}

.logo-class-desktop {
	width: 12%;
}

@media (max-width: 488px) {
	.logo-class {
		width: 40%;
	}
}

@media (min-width: 488px) {
	.logo-class {
		width: 15%;
	}
}

@media (min-width: 1023px) {
	.contact-us {
		position: absolute;
		top: 120px;
	}
}

.margin-top-25 {
	margin-top: 25px;
}

.padding-left-7 {
	padding-left: 7px;
}

/* The mouse-following circle had filter: blur(300px), which the GPU recomputed on every frame.
   fluid-mouse.webp is that blurred 1200 px circle rendered once: a 3000 px square around it. */
.id-fluid-bg-mouse {
	width: 3000px !important;
	height: 3000px !important;
	margin: -900px;
	border-radius: 0 !important;
	background: url('../images/fluid-mouse.webp') center / 100% 100% no-repeat !important;
	filter: none !important;
	will-change: transform;
}

/* Motion. Only transform and opacity are animated, except the FAQ height and the header height.
   main.js adds the motion-* classes on the front end only (never in the page editor, which saves the DOM). */

/* Hero photo of the subpages settles from a slight zoom. The photo stays visible, so LCP is not delayed. */
main figure[class~="lg:h-[425px]"] {
	overflow: hidden;
}

main figure[class~="lg:h-[425px]"] > img {
	animation: motion-hero 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes motion-hero {
	from { transform: scale(1.08); }
	to { transform: none; }
}

/* Reveal, parallax and reading progress are scroll-driven: they follow the scroll position on the compositor.
   main.js marks the elements only where animation-timeline is supported. */
body:not([data-page="homepage"]) main {
	overflow-x: clip;
}

.motion-progress {
	display: none;
}

@supports (animation-timeline: view()) {
	.motion-reveal {
		animation: motion-reveal-up cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-timeline: view();
		animation-range: entry 0% entry 280px;
	}

	.motion-reveal.motion-zoom {
		animation-name: motion-reveal-zoom;
	}

	.motion-reveal.motion-pop {
		animation-name: motion-reveal-pop;
	}

	.motion-story-text {
		view-timeline-name: --motion-story;
	}

	@media (min-width: 1024px) {
		.motion-reveal.motion-zoom.motion-from-left {
			animation-name: motion-reveal-left;
		}

		.motion-reveal.motion-zoom.motion-from-right {
			animation-name: motion-reveal-right;
		}

		.motion-parallax {
			animation: none linear both;
			animation-timeline: view();
		}

		.motion-parallax-1 { animation-name: motion-parallax-1; }
		.motion-parallax-2 { animation-name: motion-parallax-2; }
		.motion-parallax-3 { animation-name: motion-parallax-3; }

		/* Reading progress of a patient story, just under the compact header. The negative margin takes back
		   its height and the gap-5 of the text column, so the text does not move. */
		.motion-progress {
			display: block;
			position: sticky;
			top: 112px;
			z-index: 1;
			align-self: flex-start;
			width: 160px;
			height: 3px;
			margin-bottom: calc(-3px - 1.25rem);
			border-radius: 3px;
			overflow: hidden;
			background: rgba(103, 43, 123, 0.15);
		}

		.motion-progress > span {
			display: block;
			height: 100%;
			background: var(--color-orange);
			transform-origin: left;
			animation: motion-progress linear both;
			animation-timeline: --motion-story;
			animation-range: exit 0% exit 90%;
		}
	}
}

@keyframes motion-reveal-up {
	from { opacity: 0; transform: translateY(48px); }
}

@keyframes motion-reveal-zoom {
	from { opacity: 0; transform: scale(0.85); }
}

@keyframes motion-reveal-left {
	from { opacity: 0; transform: translateX(-96px) scale(0.85); }
}

@keyframes motion-reveal-right {
	from { opacity: 0; transform: translateX(96px) scale(0.85); }
}

@keyframes motion-reveal-pop {
	from { opacity: 0; transform: scale(0.5); }
	70% { opacity: 1; transform: scale(1.06); }
}

@keyframes motion-parallax-1 {
	from { translate: 0 30px; }
	to { translate: 0 -30px; }
}

@keyframes motion-parallax-2 {
	from { translate: 0 70px; }
	to { translate: 0 -70px; }
}

@keyframes motion-parallax-3 {
	from { translate: 0 110px; }
	to { translate: 0 -110px; }
}

@keyframes motion-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media print {
	.motion-reveal,
	.motion-parallax {
		animation: none;
	}
}

/* FAQ: main.js animates the height of the answer, these follow along. */
li[id^="id-about-item-"] {
	transition: padding-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

div[id^="id-about-item-"][id$="-box"] {
	transition: row-gap 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

div[id^="id-about-item-"][id$="-box"]:not(.gap-5) {
	gap: 0;
}

/* Phone sign next to a clinic number rings once on a phone. */
.motion-ring {
	display: inline-block;
	animation: motion-ring 1.2s ease-in-out 0.3s 1;
}

@keyframes motion-ring {
	0%, 60%, 100% { transform: none; }
	10%, 30% { transform: rotate(-14deg) scale(1.2); }
	20%, 40% { transform: rotate(14deg) scale(1.2); }
	50% { transform: scale(1.1); }
}

/* Header gets lower once the page is scrolled. */
#id-header-menu {
	transition: height 0.3s ease, box-shadow 0.3s ease;
}

#id-header-menu.is-compact {
	box-shadow: 0 2px 20px rgba(103, 43, 123, 0.08);
}

@media (min-width: 1024px) {
	#id-header-menu.is-compact {
		height: 96px;
	}
}

/* Mobile menu fades in, its items follow one after another. */
#id-burger-modal {
	opacity: 0;
	transform: translateY(-16px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#id-burger-modal.is-open {
	opacity: 1;
	transform: none;
}

#id-burger-modal > div > ul > li {
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#id-burger-modal.is-open > div > ul > li {
	opacity: 1;
	transform: none;
}

#id-burger-modal.is-open > div > ul > li:nth-child(2) { transition-delay: 50ms; }
#id-burger-modal.is-open > div > ul > li:nth-child(3) { transition-delay: 100ms; }
#id-burger-modal.is-open > div > ul > li:nth-child(4) { transition-delay: 150ms; }
#id-burger-modal.is-open > div > ul > li:nth-child(5) { transition-delay: 200ms; }
#id-burger-modal.is-open > div > ul > li:nth-child(6) { transition-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}