/**
 * Keral Suite — Booking Bar Styles (overrideable)
 *
 * STRUCTURE-ONLY CSS. No colors, no fonts, no opinions on layout of the
 * booking bar itself — that's up to your theme.
 *
 * What this file styles:
 *   - The popup (positioning, shadow)
 *   - The overlay
 *   - The calendar grid (structure)
 *   - The guests picker (structure)
 *   - Mobile behavior (bottom sheet)
 *
 * To customize colors/fonts, override these CSS variables in your theme:
 *   --keral-color-primary       (default: #1a1a1a)
 *   --keral-color-primary-text  (default: #ffffff)
 *   --keral-color-text          (default: #1a1a1a)
 *   --keral-color-muted         (default: #6b7280)
 *   --keral-color-border        (default: #e5e7eb)
 *   --keral-color-bg            (default: #ffffff)
 *   --keral-color-bg-hover      (default: #f3f4f6)
 *   --keral-radius              (default: 8px)
 *   --keral-radius-day          (default: 100px)
 *   --keral-font                (default: inherit)
 */

/* ----- TOKENS (overrideable) ----- */
:root {
	--keral-color-primary: #1a1a1a;
	--keral-color-primary-text: #ffffff;
	--keral-color-text: #1a1a1a;
	--keral-color-muted: #6b7280;
	--keral-color-border: #e5e7eb;
	--keral-color-bg: #ffffff;
	--keral-color-bg-hover: #f3f4f6;
	--keral-radius: 8px;
	--keral-radius-day: 100px;
	--keral-font: inherit;
}

/* ----- POPUP (positioning + shadow) ----- */
[data-keral-popup] {
	background: var(--keral-color-bg);
	color: var(--keral-color-text);
	font-family: var(--keral-font);
	border-radius: var(--keral-radius);
	min-width: 320px;
	max-width: calc(100vw - 32px);
	padding: 16px;
	box-sizing: border-box;
}

/* ----- HIDE BUTTON IF NO DESTINATION ----- */
[data-keral-no-destination] {
	display: none !important;
}

/* ----- LOADING STATE ----- */
[data-keral-loading="1"] {
	opacity: 0.6;
	pointer-events: none;
	cursor: wait;
}

/* ================================================================== *
 * CALENDAR
 * ================================================================== */

.keral-cal {
	font-family: var(--keral-font);
}

.keral-cal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	gap: 8px;
}

.keral-cal__nav {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 22px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--keral-color-text);
	padding: 0;
	line-height: 1;
}

.keral-cal__nav:hover {
	background: var(--keral-color-bg-hover);
}

.keral-cal__title-wrap {
	flex: 1;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 0 12px;
}

.keral-cal__title {
	font-weight: 600;
	font-size: 15px;
	flex: 1;
	text-align: center;
}

.keral-cal__title--right {
	display: none;
}

@media (min-width: 720px) {
	.keral-cal__title--right {
		display: block;
	}
}

.keral-cal__months {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 720px) {
	.keral-cal__months {
		grid-template-columns: 1fr 1fr;
	}
}

.keral-cal__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 8px;
}

.keral-cal__wd {
	text-align: center;
	font-size: 11px;
	color: var(--keral-color-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.keral-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
}

.keral-cal__pad {
	height: 40px;
}

.keral-cal__day {
	position: relative;
	background: none;
	border: 0;
	height: 40px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	color: var(--keral-color-text);
	z-index: 1;
	padding: 0;
}

.keral-cal__day::before {
	content: '';
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	right: 0;
	z-index: -1;
	background: transparent;
	transition: background 0.15s;
}

.keral-cal__day:hover:not(.is-disabled):not(.is-start):not(.is-end)::before {
	background: var(--keral-color-bg-hover);
	border-radius: var(--keral-radius-day);
	left: 4px;
	right: 4px;
}

.keral-cal__day.is-disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.keral-cal__day.is-in-range::before {
	background: var(--keral-color-bg-hover);
}

.keral-cal__day.is-start::before,
.keral-cal__day.is-end::before {
	background: var(--keral-color-primary);
	border-radius: var(--keral-radius-day);
	left: 4px;
	right: 4px;
}

.keral-cal__day.is-start {
	color: var(--keral-color-primary-text);
}

.keral-cal__day.is-start.is-end::before {
	left: 4px;
	right: 4px;
}

/* Range edges connect smoothly */
.keral-cal__day.is-start:not(.is-end)::before {
	border-radius: var(--keral-radius-day) 0 0 var(--keral-radius-day);
	left: 4px;
	right: 0;
}

.keral-cal__day.is-end:not(.is-start)::before {
	border-radius: 0 var(--keral-radius-day) var(--keral-radius-day) 0;
	left: 0;
	right: 4px;
}

.keral-cal__day.is-end {
	color: var(--keral-color-primary-text);
}

.keral-cal__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--keral-color-border);
	gap: 12px;
}

.keral-cal__hint {
	color: var(--keral-color-muted);
	font-size: 13px;
}

.keral-cal__done,
.keral-guests__done {
	background: var(--keral-color-primary);
	color: var(--keral-color-primary-text);
	border: 0;
	padding: 10px 20px;
	border-radius: var(--keral-radius);
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
}

.keral-cal__done:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ================================================================== *
 * GUESTS PICKER
 * ================================================================== */

.keral-guests {
	min-width: 280px;
}

.keral-guests__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--keral-color-border);
}

.keral-guests__row:last-of-type {
	border-bottom: 0;
}

.keral-guests__label {
	font-size: 15px;
	font-weight: 500;
}

.keral-guests__ctrl {
	display: flex;
	align-items: center;
	gap: 16px;
}

.keral-guests__btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--keral-color-border);
	background: var(--keral-color-bg);
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--keral-color-text);
	padding: 0;
	transition: background 0.15s;
}

.keral-guests__btn:hover {
	background: var(--keral-color-bg-hover);
}

.keral-guests__val {
	min-width: 24px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
}

.keral-guests__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--keral-color-border);
}

/* ================================================================== *
 * MOBILE BOTTOM SHEET
 * ================================================================== */

@media (max-width: 768px) {
	[data-keral-popup] {
		min-width: 0;
		max-width: 100%;
		max-height: 90vh;
		overflow-y: auto;
		padding: 20px 16px 24px;
		border-radius: 16px 16px 0 0;
	}

	[data-keral-popup]::before {
		content: '';
		display: block;
		width: 36px;
		height: 4px;
		background: var(--keral-color-border);
		border-radius: 2px;
		margin: 0 auto 16px;
	}

	.keral-cal__title-wrap {
		justify-content: center;
	}

	.keral-cal__day {
		height: 44px;
	}
}