/* Roboamo Booking modál. Všechny hodnoty z Automatic CSS (barvy, mezery, typografie, radius, border, stín, transition, focus).
   Tlačítka používají přímo ACSS třídy .btn--primary / .btn--outline / .btn--secondary. */

.rb-dialog {
	/* téma webu resetuje margin všech prvků, dialog by jinak nebyl na středu */
	position: fixed;
	inset: 0;
	margin: auto;
	block-size: fit-content;
	inline-size: min(var(--width-70), calc(100% - var(--space-l) * 2));
	max-block-size: calc(100dvh - var(--space-l) * 2);
	padding: 0;
	border: 0;
	border-radius: var(--radius-l);
	background: var(--white);
	color: var(--text-dark);
	box-shadow: var(--box-shadow-2);
	overflow: hidden;
}
.rb-dialog::backdrop {
	background: color-mix(in oklch, var(--secondary-ultra-dark) 60%, transparent);
	backdrop-filter: blur(3px);
}
.rb-dialog[open] { animation: rb-in var(--transition-duration) var(--ease-smooth); }
@keyframes rb-in { from { opacity: 0; transform: translateY(var(--space-s)) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .rb-dialog[open] { animation: none; } }
html.rb-lock { overflow: hidden; }

.rb-panel:focus { outline: none; }
.rb-panel {
	--rb-line: color-mix(in oklch, var(--secondary) 14%, transparent);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, var(--width-20)) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	max-block-size: calc(100dvh - var(--space-l) * 2);
}

/* levý panel s informacemi o hovoru */
.rb-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-l) var(--space-m);
	border-inline-end: var(--border-size) var(--border-style) var(--rb-line);
	overflow-y: auto;
}
/* fotka: modrý kruh, hlava přesahuje nad něj (stejný efekt jako tlačítko v Procesu) */
.rb-info__face {
	--rb-face: calc(var(--icon-size-m) * 1.5);
	position: relative;
	inline-size: var(--rb-face);
	aspect-ratio: 1;
	margin-block: calc(var(--rb-face) * 0.4) var(--space-xs);
	border-radius: var(--radius-circle);
	background: var(--secondary);
}
.rb-info__face img {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	inline-size: 100%;
	block-size: 140%;
	object-fit: cover;
	object-position: bottom;
	clip-path: inset(0 0 0 0 round 0 0 calc(var(--rb-face) / 2) calc(var(--rb-face) / 2));
}
.rb-info__host {
	margin: 0;
	font-size: var(--text-s);
	color: var(--text-dark-muted);
}
.rb-info__title {
	margin: 0;
	font-family: var(--heading-font-family);
	font-weight: var(--heading-font-weight);
	font-size: var(--text-xl);
	line-height: var(--heading-line-height);
	color: var(--secondary-ultra-dark);
}
.rb-info__desc {
	margin: 0;
	font-size: var(--text-s);
	line-height: var(--text-line-height);
	color: var(--text-dark-muted);
}
.rb-info__meta {
	display: grid;
	gap: calc(var(--space-xs) * 0.6);
	margin: var(--space-s) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-s);
	font-weight: var(--heading-font-weight);
	color: var(--secondary-dark);
}
.rb-info__meta li {
	display: flex;
	align-items: center;
	gap: calc(var(--space-xs) / 2);
	margin: 0;
	line-height: 1.3;
}
.rb-info__meta li[hidden] { display: none; }
.rb-info__chosen {
	margin-block-start: var(--space-xs) !important;
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius-s);
	background: var(--primary-ultra-light);
	color: var(--primary-ultra-dark);
}
.rb-icon {
	flex: none;
	inline-size: 1.1em;
	block-size: 1.1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--text-dark-muted);
}
.rb-info__chosen .rb-icon { color: inherit; }

.rb-close {
	position: absolute;
	inset-block-start: var(--space-xs);
	inset-inline-end: var(--space-xs);
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: var(--space-l);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: var(--radius-circle);
	background: none;
	color: var(--text-dark-muted);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.rb-close:hover { background: var(--secondary-ultra-light); color: var(--secondary-ultra-dark); }

.rb-body {
	min-block-size: 0;
	padding: var(--space-l);
	overflow-y: auto;
	overscroll-behavior: contain;
}

:is(.rb-close, .rb-cal__arrow, .rb-cal__day, .rb-time, .rb-back):focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* výběr dne a času */
.rb-pick {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--width-10));
	gap: var(--space-l);
}
.rb-cal { inline-size: 100%; }
.rb-cal__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-block-size: var(--space-l);
	margin-block-end: var(--space-s);
	padding-inline-end: var(--space-l);
}
.rb-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.rb-cal__month {
	margin: 0;
	font-family: var(--text-font-family);
	font-weight: var(--text-font-weight);
	line-height: 1.2;
	font-size: var(--text-l);
	color: var(--text-dark-muted);
}
.rb-cal__month strong {
	color: var(--secondary-ultra-dark);
	font-weight: var(--heading-font-weight);
	text-transform: capitalize;
}
.rb-cal__arrows { display: flex; gap: calc(var(--space-xs) / 2); }
.rb-cal__arrow {
	display: grid;
	place-items: center;
	inline-size: calc(var(--space-l) * 0.85);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: var(--radius-s);
	background: none;
	color: var(--secondary-dark);
	cursor: pointer;
	transition: background var(--transition);
}
.rb-cal__arrow:hover:not(:disabled) { background: var(--secondary-ultra-light); }
.rb-cal__arrow .rb-icon {
	inline-size: 55%;
	block-size: 55%;
	margin: 0;
	stroke-width: 2.25;
	stroke-linecap: square;
	stroke-linejoin: miter;
	color: inherit;
}
.rb-cal__arrow:disabled { opacity: 0.25; cursor: default; }
.rb-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: calc(var(--space-xs) / 2);
	text-align: center;
}
.rb-cal__dow {
	padding-block: var(--space-xs);
	font-size: var(--text-xs);
	font-weight: var(--heading-font-weight);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--secondary-dark);
}
.rb-cal__day {
	position: relative;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	font-size: var(--text-m);
}
.rb-cal__day.is-off { color: var(--neutral-light); }
.rb-cal__day.is-today::after {
	content: "";
	position: absolute;
	inset-block-end: 18%;
	inline-size: 0.3em;
	aspect-ratio: 1;
	border-radius: var(--radius-circle);
	background: currentColor;
}
button.rb-cal__day {
	padding: 0;
	border: var(--border-size) var(--border-style) transparent;
	background: var(--secondary-ultra-light);
	color: var(--secondary-ultra-dark);
	font-weight: var(--heading-font-weight);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
button.rb-cal__day:hover { border-color: var(--primary); background: var(--primary-ultra-light); }
button.rb-cal__day.is-selected { border-color: var(--primary); background: var(--primary); color: var(--white); }

.rb-times { display: flex; flex-direction: column; min-block-size: 0; }
.rb-times__title {
	display: flex;
	align-items: center;
	min-block-size: var(--space-l);
	margin: 0 0 var(--space-s);
	font-size: var(--text-m);
	font-weight: var(--heading-font-weight);
	color: var(--secondary-ultra-dark);
}
.rb-times__list {
	display: grid;
	align-content: start;
	gap: var(--space-xs);
}
.rb-time {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-xs);
	border: var(--border-size) var(--border-style) var(--rb-line);
	border-radius: var(--radius-s);
	background: var(--white);
	color: var(--secondary-ultra-dark);
	font: inherit;
	font-weight: var(--heading-font-weight);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.rb-time:hover { border-color: var(--primary); background: var(--primary-ultra-light); }
.rb-time.is-selected { border-color: var(--primary); background: var(--primary); color: var(--white); }
.rb-time__local { font-size: var(--text-xs); font-weight: var(--text-font-weight); opacity: 0.75; }
.rb-step-title {
	margin: 0 0 var(--space-m);
	font-size: var(--text-l);
	color: var(--secondary-ultra-dark);
}

.rb-note { margin: var(--space-s) 0 0; font-size: var(--text-xs); color: var(--text-dark-muted); }
.rb-lead { margin: 0 0 var(--space-m); font-size: var(--text-m); }

/* formulář */
.rb-back {
	margin: 0 0 var(--space-s);
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-dark);
	font: inherit;
	font-weight: var(--heading-font-weight);
	cursor: pointer;
}
.rb-back:hover { color: var(--primary-hover); }
.rb-form {
	display: grid;
	gap: var(--content-gap);
	max-inline-size: var(--width-40);
}
.rb-field {
	display: grid;
	gap: var(--space-xs);
	font-size: var(--text-s);
	font-weight: var(--heading-font-weight);
	color: var(--secondary);
}
.rb-field input, .rb-field textarea {
	inline-size: 100%;
	padding: var(--space-xs) var(--space-s);
	border: var(--border-size) var(--border-style) var(--border-color-dark);
	border-radius: var(--radius-s);
	background: var(--white);
	color: var(--text-dark);
	font: inherit;
	font-size: var(--text-m);
	font-weight: var(--text-font-weight);
	transition: border-color var(--transition);
}
.rb-field input:focus-visible, .rb-field textarea:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
	border-color: var(--primary);
}
.rb-check {
	display: flex;
	gap: var(--space-xs);
	align-items: flex-start;
	font-size: var(--text-s);
	line-height: var(--text-line-height);
}
.rb-check input {
	flex: none;
	margin-block-start: 0.2em;
	inline-size: 1.1em;
	block-size: 1.1em;
	accent-color: var(--primary);
}
.rb-check a { color: var(--secondary); }
.rb-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.rb-error {
	padding: var(--space-xs) var(--space-s);
	border: var(--border-size) var(--border-style) var(--primary-semi-light);
	border-radius: var(--radius-s);
	background: var(--primary-ultra-light);
	color: var(--primary-ultra-dark);
	font-size: var(--text-s);
}
.rb-error[hidden] { display: none; }

/* tlačítka: vzhled dává ACSS .btn--*, tady jen rozložení */
.rb-btn--block { inline-size: 100%; }
.rb-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* stavy */
.rb-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-s);
	padding-block: var(--space-xl);
	color: var(--text-dark-muted);
}
.rb-spinner {
	inline-size: var(--icon-size-s);
	aspect-ratio: 1;
	border: 2px solid var(--secondary-ultra-light);
	border-top-color: var(--primary);
	border-radius: var(--radius-circle);
	animation: rb-spin 0.8s linear infinite;
}
@keyframes rb-spin { to { transform: rotate(1turn); } }
.rb-message {
	display: grid;
	gap: var(--content-gap);
	justify-items: start;
	padding: var(--space-m);
	border-radius: var(--radius-m);
	background: var(--secondary-ultra-light);
}
.rb-message p { margin: 0; }
.rb-message--warn {
	border: var(--border-size) var(--border-style) var(--primary-semi-light);
	background: var(--primary-ultra-light);
}
.rb-message--inline { margin-block-end: var(--space-m); padding: var(--space-s) var(--space-m); }
.rb-done {
	display: grid;
	gap: var(--space-xs);
	justify-items: center;
	padding-block: var(--space-m);
	text-align: center;
}
.rb-done h3 { margin: var(--space-xs) 0 0; font-size: var(--text-xl); color: var(--secondary); }
.rb-done p { margin: 0; max-inline-size: var(--width-40); }
.rb-done [class*="btn--"] { margin-block-start: var(--space-s); }
.rb-done__icon {
	display: grid;
	place-items: center;
	inline-size: var(--space-xxl);
	aspect-ratio: 1;
	border-radius: var(--radius-circle);
	background: var(--primary);
	color: var(--white);
}
.rb-manage p { margin: 0 0 var(--space-s); }

/* tablet: časy pod kalendářem */
@media (max-width: 63.99rem) {
	.rb-pick { grid-template-columns: 1fr; }
	.rb-cal__nav { padding-inline-end: 0; }
	.rb-times__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5em), 1fr)); }
}

/* mobil: přes celou obrazovku, info nahoře */
@media (max-width: 47.99rem) {
	.rb-dialog {
		inline-size: 100%;
		max-inline-size: 100%;
		block-size: 100dvh;
		max-block-size: 100dvh;
		margin: 0;
		border-radius: var(--radius-none);
	}
	.rb-panel {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		block-size: 100%;
		max-block-size: 100dvh;
	}
	.rb-info {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--space-s);
		row-gap: 0;
		align-items: center;
		padding: var(--space-s) var(--space-l) var(--space-s) var(--space-s);
		border-inline-end: 0;
		border-block-end: var(--border-size) var(--border-style) var(--rb-line);
	}
	.rb-info__face { --rb-face: calc(var(--icon-size-m) * 1.25); grid-row: span 2; margin: calc(var(--rb-face) * 0.4) 0 0; }
	.rb-info__title { font-size: var(--text-m); }
	.rb-info__desc { display: none; }
	.rb-info__meta {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		gap: calc(var(--space-xs) / 2) var(--space-xs);
		margin-block-start: var(--space-xs);
		font-size: var(--text-xs);
	}
	.rb-info__chosen { flex-basis: 100%; }
	.rb-body { padding: var(--space-m) var(--space-s); }
	.rb-times__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rb-form { max-inline-size: none; }
}