/* Consultation format in the booking calendar. */

/* Badge for a slot available in a single format. */
.positum-slot-format {
	display: inline-block;
	margin-left: .45em;
	padding: .1em .5em;
	border-radius: 3px;
	font-size: .75em;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	vertical-align: middle;
}

.positum-slot-format--office {
	background: #f2e2c2;
	color: #6a4b0d;
}

.positum-slot-format--online {
	background: #d7e5f4;
	color: #17456f;
}

/*
 * Switch for a slot available in both formats.
 * Colors are explicit rather than currentColor: a selected slot repaints
 * its text white, and the switch would blend into the background.
 */
.positum-format-switch {
	display: inline-flex;
	margin-left: .5em;
	vertical-align: middle;
	border: 1px solid #c6cbd3;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	line-height: 0;
}

.positum-format-switch__option {
	appearance: none;
	margin: 0;
	border: 0;
	background: #fff;
	color: #4a505a;
	padding: .25em .7em;
	font: inherit;
	font-size: .75em;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}

.positum-format-switch__option + .positum-format-switch__option {
	border-left: 1px solid #c6cbd3;
}

.positum-format-switch__option:hover {
	background: #eef1f5;
	color: #1f242b;
}

.positum-format-switch__option:focus-visible {
	outline: 2px solid #2a6fb0;
	outline-offset: -2px;
}

.positum-format-switch__option.is-chosen {
	color: #fff;
}

.positum-format-switch__option[data-format="office"].is-chosen {
	background: #9c6f18;
}

.positum-format-switch__option[data-format="online"].is-chosen {
	background: #1c5b96;
}

/* Slot picked but format not chosen yet — gently hint that a choice is due. */
.jet-apb-slot--selected .positum-format-switch:not(.is-resolved) {
	box-shadow: 0 0 0 2px #e0b93c;
}

/* Format line inside the selected booking details block. */
.positum-item-format {
	/* The details block is laid out with flex — without this the line sticks to its neighbour. */
	flex-basis: 100%;
	width: 100%;
	margin-top: .2em;
	font-weight: 600;
}

.positum-item-format[data-format="office"] {
	color: #9c6f18;
}

.positum-item-format[data-format="online"] {
	color: #1c5b96;
}

/* Booking summary on the contact details step. */
.positum-booking-summary {
	margin: 0 0 1.4em;
	padding: .9em 1.1em;
	border: 1px solid #dfe3e8;
	border-left: 3px solid #1c5b96;
	border-radius: 4px;
	background: #f7f9fb;
	/* The form centers text, while the fields below the summary are left aligned. */
	text-align: left;
}

.positum-booking-summary__title {
	margin-bottom: .35em;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #5a6472;
}

.positum-booking-summary__body {
	white-space: pre-line;
	line-height: 1.55;
	color: #1f242b;
}

/* Placeholder for the lower block: shows the choice before a time is picked. */
.positum-choice {
	/* The top margin mirrors the real booking block: otherwise the content
	   времени содержимое подпрыгивает. */
	margin: 1.6em 0 1em;
	text-align: left;
	line-height: 1.5;
}

.positum-choice__title {
	font-weight: 600;
	color: #2b3240;
}

.positum-choice__date {
	color: #5a6472;
}

/* Slot grid: one column, two columns on wide screens.
   Плагин выкладывает их флексом в строку, и при длинных подписях
   формата список расползается. */
.jet-apb-calendar-slots-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	align-content: start;
}

@media (min-width: 760px) {
	.jet-apb-calendar-slots-container {
		grid-template-columns: 1fr 1fr;
		gap: 8px 16px;
	}
}

.jet-apb-calendar-slots-container .jet-apb-slot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 10px;
	border: 1px solid #e2e5ea;
	border-radius: 4px;
}

.jet-apb-calendar-slots-container .jet-apb-slot .positum-slot-format,
.jet-apb-calendar-slots-container .jet-apb-slot .positum-format-switch {
	margin-left: 0;
	flex: 0 0 auto;
}