/* Zakazivanje. Vrednosti iz design/Kontakt.dc.html. */

.tg-bk {
	border: 2px solid var(--tg-rule);
	background: var(--tg-surface);
}

.tg-bk__steps {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 2px solid var(--tg-rule);
	background: var(--tg-bg);
}

.tg-bk__steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-right: 2px solid var(--tg-rule);
	color: var(--tg-mute2);
	font-size: 15px;
	font-weight: 700;
}

.tg-bk__steps li.is-now {
	background: var(--tg-ink);
	color: var(--tg-bg);
}

.tg-bk__steps li.is-done {
	color: var(--tg-ink);
}

.tg-bk__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--tg-sunk);
	color: var(--tg-ink);
	font-size: 13px;
	font-weight: 900;
}

.tg-bk__steps li.is-now .tg-bk__num {
	background: var(--tg-orange);
}

.tg-bk__pane {
	padding: clamp(20px, 3vw, 32px);
}

.tg-bk__pane[hidden] {
	display: none;
}

.tg-bk__h {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.015em;
}

/* Tip razgovora */
.tg-bk__types {
	display: grid;
	gap: 2px;
	margin-bottom: 28px;
	background: var(--tg-rule);
	border: 2px solid var(--tg-rule);
}

.tg-bk .tg-bk__type {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	border: 0;
	background: var(--tg-bg);
	color: var(--tg-ink);
	font-family: var(--tg-font);
	text-align: left;
	cursor: pointer;
}

.tg-bk .tg-bk__type[aria-pressed="true"] {
	background: var(--tg-tint);
}

.tg-bk__radio {
	width: 22px;
	height: 22px;
	border: 2px solid var(--tg-ink);
	border-radius: 50%;
}

.tg-bk__type[aria-pressed="true"] .tg-bk__radio {
	background: var(--tg-orange);
}

.tg-bk__tname {
	display: block;
	font-size: 17px;
	font-weight: 800;
}

.tg-bk__tdesc {
	display: block;
	color: var(--tg-mute);
	font-size: 14px;
}

.tg-bk__tmin {
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
}

/* Kalendar i termini */
.tg-bk__pick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(20px, 3vw, 40px);
}

.tg-bk__calhead,
.tg-bk__slotshead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	min-height: 42px;
}

.tg-bk__month,
.tg-bk__day {
	font-size: 18px;
	font-weight: 800;
	text-transform: capitalize;
}

.tg-bk__nav {
	display: flex;
	gap: 6px;
}

.tg-bk .tg-bk__nav button,
.tg-bk .tg-bk__tz button {
	padding: 8px 12px;
	border: 2px solid var(--tg-rule);
	background: transparent;
	color: var(--tg-ink);
	font: 800 14px var(--tg-font);
	cursor: pointer;
}

.tg-bk .tg-bk__nav button:disabled {
	color: var(--tg-dim);
	border-color: var(--tg-line);
	cursor: not-allowed;
}

.tg-bk__tz {
	display: flex;
	border: 2px solid var(--tg-rule);
}

.tg-bk .tg-bk__tz button {
	border: 0;
	border-right: 2px solid var(--tg-rule);
}

.tg-bk .tg-bk__tz button:last-child {
	border-right: 0;
}

.tg-bk .tg-bk__tz button[aria-pressed="true"] {
	background: var(--tg-ink);
	color: var(--tg-bg);
}

.tg-bk__dow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 6px;
	color: var(--tg-mute2);
	font-size: 12px;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
}

.tg-bk__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

/* Opseg je .tg-bk__days namerno: natpis iznad termina nosi istu klasu
   `tg-bk__day`, pa je bez ovoga dobijao kvadratni okvir kalendarskog
   dugmeta i stajao kao prazna kutija. */
.tg-bk .tg-bk__days .tg-bk__day {
	aspect-ratio: 1;
	padding: 0;
	border: 2px solid var(--tg-rule);
	background: transparent;
	color: var(--tg-ink);
	font: 700 15px var(--tg-font);
	cursor: pointer;
}

.tg-bk .tg-bk__days .tg-bk__day:hover:not(:disabled) {
	background: var(--tg-tint);
}

.tg-bk .tg-bk__days .tg-bk__day:disabled {
	border-color: var(--tg-line);
	color: var(--tg-dim);
	cursor: not-allowed;
}

.tg-bk .tg-bk__days .tg-bk__day.is-picked {
	background: var(--tg-ink);
	color: var(--tg-bg);
}

.tg-bk__slotgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 6px;
}

.tg-bk .tg-bk__slot {
	padding: 12px 8px;
	border: 2px solid var(--tg-rule);
	background: transparent;
	color: var(--tg-ink);
	font: 700 15px var(--tg-font);
	cursor: pointer;
}

.tg-bk .tg-bk__slot:hover {
	background: var(--tg-tint);
}

.tg-bk .tg-bk__slot[aria-pressed="true"] {
	background: var(--tg-orange);
}

.tg-bk__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 24px;
	border: 2px dashed var(--tg-line);
	color: var(--tg-mute2);
	font-size: 15px;
	text-align: center;
}

/* Donja traka */
.tg-bk__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 2px solid var(--tg-rule);
}

.tg-bk__note {
	font-size: 15px;
	font-weight: 700;
}

.tg-bk .tg-bk__next {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 54px;
	padding: 0 20px;
	border: 0;
	background: var(--tg-orange);
	color: var(--tg-ink);
	font: 800 16px var(--tg-font);
	cursor: pointer;
}

.tg-bk .tg-bk__next:hover:not(:disabled) {
	background: var(--tg-ink);
	color: var(--tg-orange);
}

.tg-bk .tg-bk__next:disabled {
	background: var(--tg-sunk);
	color: var(--tg-dim);
	cursor: not-allowed;
}

.tg-bk .tg-bk__back {
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: var(--tg-ink);
	font: 700 15px var(--tg-font);
	cursor: pointer;
}

/* Forma */
.tg-bk__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}

.tg-bk__form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14.5px;
	font-weight: 700;
}

.tg-bk__form .tg-bk__wide {
	grid-column: 1 / -1;
}

.tg-bk .tg-bk__form input,
.tg-bk .tg-bk__form textarea {
	padding: 12px 14px;
	border: 2px solid var(--tg-rule);
	background: var(--tg-bg);
	color: var(--tg-ink);
	font: 500 16px var(--tg-font);
	outline: none;
}

.tg-bk .tg-bk__form input:focus,
.tg-bk .tg-bk__form textarea:focus {
	border-color: var(--tg-orange);
}

.tg-bk__form .tg-bk__bar {
	grid-column: 1 / -1;
}

/* Potvrda */
.tg-bk__confirm {
	margin: 0;
	padding: 18px;
	background: var(--tg-tint);
	font-size: 18px;
	font-weight: 800;
}

.tg-bk__small {
	margin: 14px 0 0;
	color: var(--tg-mute);
	font-size: 15px;
}

/* Cal.com umesto simuliranog kalendara. Okvir je isti kao kod ostatka
   zakazivanja, da se ne vidi da je sadržaj sa strane. */
.tg-bk--cal {
	padding: 0;
	border: 2px solid var(--tg-rule);
	background: var(--tg-bg);
}

.tg-bk__embed {
	width: 100%;
	min-height: 640px;
	overflow: auto;
}

@media (max-width: 599px) {
	.tg-bk__embed {
		min-height: 560px;
	}
}

/* Oznaka vremenske zone. Nije prekidač otkad je ostala jedna zona, pa nosi
   okvir kao i ostale sitne oznake, bez izgleda dugmeta. */
.tg-bk__tz--static {
	padding: 8px 12px;
	font: 800 14px var(--tg-font);
	color: var(--tg-mute);
	white-space: nowrap;
}