/*
 * Category date bar with Sales Igniter's calendar and time slots (date-bar-calendar.js).
 * The calendar is Sales Igniter's skin (.sib-fp) and the slots its .sib-cal .sib-slot
 * buttons (sibooking-calendar-ui.css); this styles the bar's boxes, the time popover
 * and a few fixes to the popup calendar.
 */

/* ------------------------------------------------------------- the boxes */
.crc-datebar .crc-field input.crc-date-input,
.crc-datebar .crc-time-btn {
	cursor: pointer;
	padding-right: 2.4rem;
	background: #fff no-repeat right .75rem center;
}
.crc-datebar .crc-field input.crc-date-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23013F63' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.crc-datebar .crc-time-btn {
	display: block;
	width: 100%;
	height: 42px;
	box-sizing: border-box;
	border: 1px solid var(--crc-line);
	border-radius: 6px;
	padding-left: .6rem;
	color: var(--crc-ink);
	font-family: var(--crc-font-body);
	font-size: 14.5px;
	text-align: left;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23013F63' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.crc-datebar .crc-time-btn:focus { outline: 2px solid var(--crc-navy); outline-offset: -1px; }
.crc-datebar .crc-native { display: none !important; }

/* -------------------------------------------------------- the time popover */
.sib-cal.crc-time-pop {
	position: absolute;
	z-index: 99999;
	box-sizing: border-box;
	padding: 14px;
	background: var(--sib-card);
	border: 1px solid var(--sib-line);
	border-radius: calc(var(--sib-radius) + 4px);
	box-shadow: 0 12px 32px rgba(16, 36, 61, .12);
}
.sib-cal.crc-time-pop[hidden] { display: none; }
.sib-cal .crc-time-pop__h { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--sib-navy); }
.sib-cal.crc-time-pop .sib-slot-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------- the popup calendar */
/* flatpickr writes a measured width onto the calendar; use the skin's size instead */
.sib-fp.sib-fp--popup.crc-fp { width: 336px !important; }

/* Month arrows inside the card's padding, not on its edge */
.sib-fp.crc-fp .flatpickr-months .flatpickr-prev-month { top: 12px; left: 12px; }
.sib-fp.crc-fp .flatpickr-months .flatpickr-next-month { top: 12px; right: 12px; }
.sib-fp.crc-fp .flatpickr-months .flatpickr-month { height: 34px; }

/* Month and year on one line (the year is an input the site's input styles pad) */
.sib-fp.crc-fp .flatpickr-current-month { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0; gap: 6px; line-height: 1; }
.sib-fp.crc-fp .flatpickr-current-month .cur-month { margin: 0; line-height: 1; }
.sib-fp.crc-fp .flatpickr-current-month .numInputWrapper { display: inline-flex; align-items: center; width: auto; height: auto; }
.sib-fp.crc-fp .flatpickr-current-month input.cur-year {
	width: 4.2ch; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent;
	font: inherit; font-size: 15px; font-weight: 700; line-height: 1; color: var(--sib-navy);
}

/* The pickup day, shown in the return calendar */
.sib-fp.crc-fp .flatpickr-day.crc-pickup-day:not(.selected) { box-shadow: inset 0 0 0 2px var(--sib-accent); }