:root {
    --cl_timePopover-bg: #ffffff;
    --cl_timePopover-panel: #ffffff;
    --cl_timePopover-text: #14171f;
    --cl_timePopover-muted: #6b7280;
    --cl_timePopover-border: #e5e7eb;
    --cl_timePopover-soft: #f3f4f6;
    --cl_timePopover-accent: #2563eb;
    --cl_timePopover-accent-soft: #dbeafe;
    --cl_timePopover-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
    --cl_timePopover-radius: 18px;
    --cl_timePopover-font: system-ui;
}

.cl_timePopover,
.cl_timePopover * {
    box-sizing: border-box;
    font-family: var(--cl_timePopover-font);
}

.cl_timePopover {
    z-index: 9999;
    max-width: 340px;
}

.cl_timePopover_panel {
    border-radius: var(--cl_timePopover-radius);
    background: var(--cl_timePopover-panel);
    box-shadow: var(--cl_timePopover-shadow);
    padding: 0;
    color: var(--cl_timePopover-text);
}

.cl_timePopover_header {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #e7e7e7;
}

.cl_timePopover_title {
    text-align: center;
    font-weight: 700;
    font-size: 0.98rem;
}

.cl_timePopover_times {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    padding: 12px;

    scrollbar-width: none;
}


.cl_timePopover_time {
	border: 0;
	background: transparent;
	border: 1px solid #dfdfdf;
	color: #353535;
	cursor: pointer;
	font: inherit;
	font-size: 0.92rem;
	min-height: 42px;
	border-radius: 14px;
	padding: 0 14px;
	transition: background .15s ease;
}

.cl_timePopover_time:hover:not(:disabled) {
    background: var(--cl_timePopover-soft);
}

.cl_timePopover_time.is-selected {
    background: var(--cl_timePopover-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.cl_timePopover_time.is-blocked {
    color: #de9f9f;
    cursor: not-allowed;
    opacity: 1;
}

.cl_timePopover_panel {
    position: relative;
}

.cl_timePopover_panel::before,
.cl_timePopover_panel::after {
    content: "";
    position: absolute;
	left: 0;
	right: 0;
    height: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 5;
}

.cl_timePopover_panel::before {
    top: 44px;
    background: linear-gradient(to bottom, #00000026, transparent);
}

.cl_timePopover_panel::after {
    bottom: 0;
    background: linear-gradient(to top, #00000026, transparent);
    border-bottom-left-radius: 18px;
	border-bottom-right-radius: 18px;
}

.cl_timePopover_panel.has-top-shadow::before {
    opacity: 1;
}

.cl_timePopover_panel.has-bottom-shadow::after {
    opacity: 1;
}

@media (max-width: 640px) {
    .cl_timePopover_panel {
        border-radius: 20px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
    }

    .cl_timePopover_times {
        max-height: min(55vh, 420px);
    }

    .cl_timePopover_time {
        min-height: 46px;
    }

    .cl_timePopover {
        width: 100% !important;
		left: 0 !important;
		bottom: 0 !important;
    }

    .cl_timePopover_panel::after {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

}