.booking-cycle-popup {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.booking-cycle-popup-header {
	margin-bottom: var(--ui-space-stack-xs2);
}

.booking-cycle-popup-title {
	margin-bottom: var(--ui-space-stack-2xs2);
	color: var(--ui-color-base-2);
	font-size: var(--ui-font-size-md);
	font-weight: var(--ui-font-weight-bold);
}

.booking-cycle-popup-description {
	margin-bottom: var(--ui-space-stack-md);
	color: var(--ui-color-palette-gray-60);
	font-size: var(--ui-font-size-xs);
	line-height: var(--ui-font-line-height-md);
}

.booking-cycle-popup-main {
	position: relative;
	overflow: scroll;
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-stack-3xl);

	--scrollbar-width: 5px;
	padding-right: var(--scrollbar-width);
	margin-right: calc(-1 * var(--scrollbar-width));
}

@supports not selector(::-webkit-scrollbar) {
	.booking-cycle-popup-main {
		scrollbar-color: rgba(0, 0, 0, 0.11) transparent;
		scrollbar-width: thin;
	}
}

.booking-cycle-popup-main::-webkit-scrollbar {
	background-color: rgba(0, 0, 0, 0);
	width: var(--scrollbar-width);
}

.booking-cycle-popup-main::-webkit-scrollbar-track {
	background: transparent;
}

.booking-cycle-popup-main::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.11);
	border-radius: 5px;
	cursor: pointer;
	transition: .2s;
}

.booking-cycle-popup-step {
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-stack-sm);
}

.booking-cycle-popup-step-header {
	display: flex;
	align-items: center;
}

.booking-cycle-popup-step-number {
	margin-right: var(--ui-space-inline-xs2);
	--size: 20px;
	width: var(--size);
	height: var(--size);
	line-height: var(--size);
	text-align: center;
	border-radius: var(--ui-border-radius-pill);
	background: var(--ui-color-palette-blue-20);
	color: var(--ui-color-accent-light-blue);
	font-size: var(--ui-font-size-xs);
}

.booking-cycle-popup-step-title {
	font-size: var(--ui-font-size-md);
	font-weight: var(--ui-font-weight-medium);
}

.booking-cycle-popup-card {
	overflow: hidden;
	display: flex;
	border-radius: var(--ui-border-radius-lg);
	box-shadow: inset 0 0 0 var(--ui-border-width-thin) rgba(var(--ui-color-palette-black-solid-rgb), 0.05);
}

.booking-cycle-popup-card-main {
	padding: 16px;
}

.booking-cycle-popup-card-title {
	margin-bottom: 4px;
	font-size: var(--ui-font-size-md);
}

.booking-cycle-popup-choose-preview {
	margin-top: auto;
}

.booking-cycle-popup-see-how {
	margin-bottom: 6px;
	color: var(--ui-color-palette-gray-60);
	font-size: var(--ui-font-size-4xs);
}

.booking-cycle-popup-segment-button {
	display: flex;
	gap: 4px;
	width: -webkit-max-content;
	width: max-content;
	padding: 2px;
	border-radius: var(--ui-border-radius-xs);
	background: rgba(var(--ui-color-palette-gray-90-rgb), 0.05);
	-webkit-user-select: none;
	        user-select: none;
}

.booking-cycle-popup-segment {
	padding: 2px 8px;
	border-radius: var(--ui-border-radius-2xs);
	color: var(--ui-color-palette-gray-50);
}

.booking-cycle-popup-segment.--selected {
	background: var(--ui-color-palette-white-base);
	color: var(--ui-color-palette-gray-90);
	cursor: default;
}

.booking-cycle-popup-segment:not(.--selected):hover {
	box-shadow: inset 0 0 0 999px rgba(var(--ui-color-palette-white-base-rgb), 0.7);
	cursor: pointer;
}

.booking-cycle-popup-card-preview {
	z-index: -1;
	position: relative;
	min-width: 169px;
	background: var(--ui-color-palette-blue-15);
	pointer-events: none;
	-webkit-user-select: none;
	        user-select: none;
}

.booking-cycle-popup-preview-booking {
	--booking-background: var(--ui-color-palette-blue-50);
}

.booking-cycle-popup-preview-booking.--confirmed {
	--booking-background: var(--ui-color-palette-green-50);
}

.booking-cycle-popup-preview-booking.--late {
	--light-lines-color: var(--ui-color-palette-orange-50);
	--dark-lines-color: #F6A300;
	--booking-background: repeating-linear-gradient(-50deg, var(--light-lines-color) 0 3px, var(--dark-lines-color) 3px 9px);
}

.booking-cycle-popup-preview-booking.--waitlist {
	--booking-background: #87BACA;
}


.booking-cycle-popup-preview-booking {
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 122px;
	padding: 6px;
	background: var(--booking-background);
	border-radius: var(--ui-border-radius-xs);
	box-shadow: 0 7px 14px rgba(var(--ui-color-palette-black-solid-rgb), 0.11);
}


.booking-cycle-popup-preview-booking.--left,
.booking-cycle-popup-preview-booking.--right {
	display: flex;
	align-items: center;
	height: 35px;
	width: 54px;
	background: #CFAC00;
}

.booking-cycle-popup-preview-booking.--left {
	transform: translate(-110%, -50%);
}

.booking-cycle-popup-preview-booking.--right {
	transform: translate(10%, -50%);
}


.booking-cycle-popup-preview-booking-title {
	color: var(--ui-color-palette-white-base);
	font-size: var(--ui-font-size-5xs);
}

.booking-cycle-popup-preview-booking-row {
	display: flex;
	align-items: center;
	margin-top: var(--ui-space-stack-2xs);
}

.booking-cycle-popup-preview-booking-row-line {
	margin-right: auto;
	width: 45px;
	height: 6px;
	background: rgba(var(--ui-color-palette-white-base-rgb), 0.16);
	border-radius: var(--ui-border-radius-pill);
}

.booking-cycle-popup-preview-booking-icons {
	display: flex;
	gap: 1px;
}

.booking-cycle-popup-preview-booking-icons .ui-icon-set {
	--ui-icon-set__icon-color: rgba(var(--ui-color-palette-white-base-rgb), 0.48);
	--ui-icon-set__icon-size: 9px;
}

.booking-cycle-popup-preview-counter {
	position: absolute;
	top: var(--ui-space-stack-xs-neg);
	right: var(--ui-space-inline-xs-neg);
}

.booking-cycle-popup-preview-counter-icon {
	display: flex;
	border-radius: var(--ui-border-radius-pill);
	border: var(--ui-border-width-thick) solid var(--ui-color-base-8);
	background: var(--ui-color-palette-green-60);
}

.booking-cycle-popup-preview-counter-icon .ui-icon-set {
	--ui-icon-set__icon-size: 13px;
	--ui-icon-set__icon-color: var(--ui-color-base-8);
	transform: scale(0.9);
}

.booking-cycle-popup-preview-line {
	position: absolute;
	left: -1px;
	top: 2px;
	height: 1px;
	width: 100%;
	background: var(--ui-color-accent-main-alert);
}

.booking-cycle-popup-preview-line:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-100%, -50%);
	width: 6px;
	height: 6px;
	border-radius: var(--ui-border-radius-pill);
	background: var(--ui-color-accent-main-alert);
}

.booking-cycle-popup-preview-crm {
	--calendar-background: var(--ui-color-palette-blue-20);
	--calendar-color: var(--ui-color-accent-brand-blue);
	--title-font-size: var(--ui-font-size-4xs);
}

.booking-cycle-popup-preview-crm.--unconfirmed {
	--pill-background: #F2E41C6B;
	--pill-color: #9D7E2B;
}

.booking-cycle-popup-preview-crm.--confirmed {
	--calendar-background: var(--ui-color-palette-green-20);
	--calendar-color: var(--ui-color-palette-green-50);
}

.booking-cycle-popup-preview-crm.--late {
	--light-lines-color: rgb(255, 231, 184);
	--dark-lines-color: rgb(255, 221, 153);
	--calendar-background: repeating-linear-gradient(-50deg, var(--light-lines-color) 0 2px, var(--dark-lines-color) 2px 6px);
	--calendar-color: var(--ui-color-palette-orange-50);
	--pill-background: #EAD3D5;
	--pill-color: #CF1515;
}

.booking-cycle-popup-preview-crm.--waitlist {
	--calendar-background: #87BACA4D;
	--calendar-color: #87BACA;
	--title-font-size: var(--ui-font-size-7xs);
}

.booking-cycle-popup-preview-crm.--overbooking {
	--calendar-background: #CFAC0166;
	--calendar-color: var(--ui-color-palette-orange-70);
	--title-font-size: var(--ui-font-size-7xs);
}



.booking-cycle-popup-preview-crm {
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 152px;
	padding: var(--ui-space-inset-md) 0 var(--ui-space-inset-md) var(--ui-space-inset-md);
	background: #FFFEEF;
	border-radius: var(--ui-border-radius-lg) 0 0 var(--ui-border-radius-lg);
	box-shadow: 0 7px 14px rgba(var(--ui-color-palette-black-solid-rgb), 0.11);
}

.booking-cycle-popup-preview-crm-header {
	display: flex;
	align-items: center;
	margin-bottom: var(--ui-space-stack-xs2);
}

.booking-cycle-popup-preview-crm-checkbox {
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	margin-right: var(--ui-space-inline-2xs2);
	border-radius: 3px;
	border: var(--ui-border-width-thick) solid var(--ui-color-base-7);
	background: var(--ui-color-base-8);
}

.booking-cycle-popup-preview-crm-title {
	font-size: var(--title-font-size);
	font-weight: var(--ui-font-weight-medium);
}

.booking-cycle-popup-preview-crm-pill {
	flex: 1;
	position: relative;
	margin-left: var(--ui-space-inline-xs);
	height: 12px;
	border-radius: var(--ui-border-radius-md) 0 0 var(--ui-border-radius-md);
	background: var(--pill-background);
}

.booking-cycle-popup-preview-crm-pill:after {
	content: '';
	position: absolute;
	height: 4px;
	left: 4px;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: var(--pill-color);
	opacity: var(--ui-opacity-30);
	border-radius: var(--ui-border-radius-pill) 0 0 var(--ui-border-radius-pill);
}

.booking-cycle-popup-preview-crm-main {
	display: flex;
	align-items: center;
}

.booking-cycle-popup-preview-calendar-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--ui-space-inline-xs2);
	padding: var(--ui-space-inset-xs);
	background: var(--calendar-background);
	border-radius: var(--ui-border-radius-sm);
}

.booking-cycle-popup-preview-calendar {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 28px;
	height: 28px;
	background: var(--ui-color-base-8);
	border-radius: var(--ui-border-radius-2xs);
	border: var(--ui-border-width-thin) solid var(--calendar-color);
}

.booking-cycle-popup-preview-calendar-header {
	position: relative;
	height: 5px;
	border-bottom: var(--ui-border-width-thin) solid var(--ui-color-base-7);
	background: var(--calendar-color);
}

.booking-cycle-popup-preview-calendar-header:before,
.booking-cycle-popup-preview-calendar-header:after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	top: 50%;
	transform: translateY(-50%);
	opacity: var(--ui-opacity-50);
	background: var(--ui-color-base-8);
	border-radius: var(--ui-border-radius-pill);
}

.booking-cycle-popup-preview-calendar-header:before {
	left: 7px;
}

.booking-cycle-popup-preview-calendar-header:after {
	right: 7px;
}

.booking-cycle-popup-preview-calendar-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.booking-cycle-popup-preview-calendar-day {
	color: var(--ui-color-base-2);
	font-size: var(--ui-font-size-4xs);
	font-weight: var(--ui-font-weight-bold);
}

.booking-cycle-popup-preview-calendar-line {
	width: 19px;
	height: 5px;
	border-radius: var(--ui-border-radius-pill);
	background: var(--ui-color-base-7);
}

.booking-cycle-popup-preview-calendar-days {
	width: 19px;
	margin-top: var(--ui-space-stack-3xs);
}

.booking-cycle-popup-preview-calendar-days:before {
	content: '';
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 1px;
	--day-color: #87BACA99;
	--day-off-color: #DFE0E3;
	background: var(--day-color);
	box-shadow: 5px 0 var(--day-color), 10px 0 var(--day-color), 15px 0 var(--day-off-color),
		0 5px var(--day-color), 5px 5px var(--day-color), 10px 5px var(--day-color), 15px 5px var(--day-off-color),
		0 10px var(--day-color), 5px 10px var(--day-color)
	;
}

.booking-cycle-popup-preview-crm-fields {
	flex: 1;
	display: grid;
	grid-template-columns: -webkit-max-content auto;
	grid-template-columns: max-content auto;
	grid-auto-rows: -webkit-max-content;
	grid-auto-rows: max-content;
	align-items: center;
	gap: var(--ui-space-stack-2xs2) 0;
}

.booking-cycle-popup-preview-crm-field-title {
	color: var(--ui-color-base-3);
	font-size: var(--ui-font-size-6xs);
}

.booking-cycle-popup-preview-crm-field-value {
	margin-left: var(--ui-space-inline-sm);
	height: 9px;
	border-radius: 10px 0 0 10px;
	background: var(--ui-color-base-7);
}