/* The booking calendar. Every color is a custom property the Elementor widget's panel sets.
   Buttons are named with their element so a theme's site-wide button style cannot outrank them. */
.rcm-sched {
	--rcm-sched-ink: #1c2a42;
	--rcm-sched-muted: #6b7385;
	--rcm-sched-number: #9e3b36;
	--rcm-sched-surface: #f8f5ee;
	--rcm-sched-line: #d6cfc1;
	--rcm-sched-hover: #e9e4da;
	--rcm-sched-date: #1c2a42;
	--rcm-sched-date-ink: #f2ede3;
	--rcm-sched-time: #9e3b36;
	--rcm-sched-time-ink: #f2ede3;
	--rcm-sched-dot: #7c9a78;
	--rcm-sched-gap: 32px;
	color: var(--rcm-sched-ink);
}

.rcm-sched__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--rcm-sched-gap); }
.rcm-sched__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.rcm-sched__num { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--rcm-sched-number); }
.rcm-sched__title { font-size: 26px; font-weight: 800; line-height: 1; text-transform: uppercase; }

.rcm-sched__cal { border: 1px solid var(--rcm-sched-line); border-radius: 4px; padding: 16px; background: var(--rcm-sched-surface); }
.rcm-sched__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.rcm-sched__month { font-size: 22px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.rcm-sched button.rcm-sched__nav {
	all: unset; box-sizing: border-box; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center;
	border: 1px solid var(--rcm-sched-line); border-radius: 2px; font-size: 18px; line-height: 1; color: var(--rcm-sched-ink); transition: background-color .15s;
}
.rcm-sched button.rcm-sched__nav:hover:not(:disabled) { background: var(--rcm-sched-hover); }
.rcm-sched button.rcm-sched__nav:disabled { cursor: default; opacity: .3; }
.rcm-sched button.rcm-sched__nav:focus-visible, .rcm-sched button.rcm-sched__day:focus-visible, .rcm-sched button.rcm-sched__time:focus-visible { outline: 2px solid var(--rcm-sched-date); outline-offset: 2px; }

.rcm-sched__dow, .rcm-sched__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rcm-sched__dow { margin-bottom: 6px; }
.rcm-sched__dow span { text-align: center; padding: 6px 0; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; color: var(--rcm-sched-muted); }
.rcm-sched__days { min-height: 180px; align-content: start; }
.rcm-sched button.rcm-sched__day {
	all: unset; box-sizing: border-box; aspect-ratio: 1; display: grid; place-items: center; border-radius: 2px; cursor: pointer;
	font-size: 14px; font-weight: 600; line-height: 1; color: var(--rcm-sched-ink); transition: background-color .15s, color .15s;
}
.rcm-sched button.rcm-sched__day:hover:not(:disabled) { background: var(--rcm-sched-hover); }
.rcm-sched button.rcm-sched__day:disabled { cursor: default; opacity: .32; }
.rcm-sched button.rcm-sched__day.is-today { box-shadow: inset 0 0 0 1px var(--rcm-sched-line); }
.rcm-sched button.rcm-sched__day.is-on, .rcm-sched button.rcm-sched__day.is-on:hover { background: var(--rcm-sched-date); color: var(--rcm-sched-date-ink); }

.rcm-sched__when { margin-bottom: 14px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--rcm-sched-muted); }
.rcm-sched__zone { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.rcm-sched__sep { margin: 0 4px; }
.rcm-sched__times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 48px; }
.rcm-sched button.rcm-sched__time {
	all: unset; box-sizing: border-box; cursor: pointer; padding: 15px 12px; text-align: center; border: 1px solid var(--rcm-sched-line);
	border-radius: 2px; background: var(--rcm-sched-surface); font-size: 14px; font-weight: 700; line-height: 1; color: var(--rcm-sched-ink);
	transition: background-color .15s, border-color .15s, color .15s;
}
.rcm-sched button.rcm-sched__time:hover { border-color: var(--rcm-sched-ink); }
.rcm-sched button.rcm-sched__time.is-on { background: var(--rcm-sched-time); border-color: var(--rcm-sched-time); color: var(--rcm-sched-time-ink); }
.rcm-sched__empty { grid-column: 1 / -1; margin: 0; padding: 14px 0; font-size: 14px; line-height: 1.5; color: var(--rcm-sched-muted); }
.rcm-sched__note { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--rcm-sched-muted); }
.rcm-sched__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rcm-sched-dot); }
.rcm-sched__chosen:not(:empty) { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--rcm-sched-time); background: var(--rcm-sched-surface); font-size: 14px; font-weight: 600; line-height: 1.45; }
.rcm-sched.is-booked .rcm-sched__chosen { border-left-color: var(--rcm-sched-dot); }

@media (prefers-reduced-motion: reduce) {
	.rcm-sched button.rcm-sched__nav, .rcm-sched button.rcm-sched__day, .rcm-sched button.rcm-sched__time { transition: none; }
}
