/* Frontend datepicker + breakdown */
.mshb-booking-box {
	margin: 1em 0 1.5em;
	padding: 1em;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fafafa;
}
.mshb-booking-box .mshb-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
}
.mshb-booking-box .mshb-date-range {
	width: 100%;
	font-size: 1em;
	padding: 0.6em 0.75em;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
}
.mshb-halfdays {
	margin-top: 0.75em;
	display: grid;
	gap: 0.4em;
	font-size: 0.95em;
}
.mshb-halfdays label {
	display: flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
}
.mshb-price-breakdown {
	margin-top: 1em;
	padding-top: 0.75em;
	border-top: 1px dashed #ccc;
	min-height: 2em;
}
.mshb-price-breakdown.is-loading {
	opacity: 0.6;
}
.mshb-breakdown-table {
	width: 100%;
	border-collapse: collapse;
}
.mshb-breakdown-table th,
.mshb-breakdown-table td {
	padding: 0.3em 0;
	text-align: left;
	border: 0;
	font-weight: normal;
}
.mshb-breakdown-table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.mshb-breakdown-table tr.mshb-grand th,
.mshb-breakdown-table tr.mshb-grand td {
	font-size: 1.1em;
	font-weight: 700;
	border-top: 1px solid #ccc;
	padding-top: 0.5em;
}
.mshb-empty,
.mshb-error {
	margin: 0;
	font-size: 0.95em;
}
.mshb-error {
	color: #b00020;
}
@media (max-width: 480px) {
	.mshb-booking-box { padding: 0.75em; }
}
/* ── Fully booked / admin-blocked dates ────────────────────────────────────
   Red tint — universally understood as "unavailable / taken".
   Flatpickr still handles the disabled state; we layer colour on top.        */
.flatpickr-day.mshb-booked-day,
.flatpickr-day.mshb-booked-day.flatpickr-disabled {
	background: #fee2e2 !important;
	border-color: #fca5a5 !important;
	color: #b91c1c !important;
	cursor: not-allowed !important;
	text-decoration: none !important;
	opacity: 1 !important;
}
/* Keep the red tint when the cell falls inside a selected range */
.flatpickr-day.mshb-booked-day.inRange {
	background: #fecaca !important;
	box-shadow: -5px 0 0 #fecaca, 5px 0 0 #fecaca !important;
}

/* ── Restricted start/end days (e.g. weekends) ─────────────────────────────
   Amber/gold tint — "caution, limited" without the alarm of red.
   These days can still appear inside a valid range.                          */
.flatpickr-day.mshb-restricted-day {
	background: #fef9c3 !important;
	border-color: #fde68a !important;
	color: #92400e !important;
	font-style: italic;
}
/* Amber tint when the cell falls inside a selected range */
.flatpickr-day.mshb-restricted-day.inRange {
	background: #fef08a !important;
	box-shadow: -5px 0 0 #fef08a, 5px 0 0 #fef08a !important;
}
/* If JS somehow lets one through as an endpoint, show it as an error */
.flatpickr-day.mshb-restricted-day.startRange,
.flatpickr-day.mshb-restricted-day.endRange {
	background: #fee2e2 !important;
	border-color: #ef4444 !important;
	color: #b91c1c !important;
}

/* ── Calendar legend ───────────────────────────────────────────────────── */
.mshb-calendar-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.2em;
	list-style: none;
	margin: 0.75em 0 0;
	padding: 0;
	font-size: 0.82em;
	color: #555;
}
.mshb-calendar-legend li {
	display: flex;
	align-items: center;
	gap: 0.4em;
}
.mshb-legend-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid transparent;
	flex-shrink: 0;
}
.mshb-legend-available  { background: #fff; border-color: #d1d5db; }
.mshb-legend-booked     { background: #fee2e2; border-color: #fca5a5; }
.mshb-legend-restricted { background: #fef9c3; border-color: #fde68a; }

.mshb-price-from {
	display: inline-block;
}
.mshb-tier-hint {
	display: block;
	font-size: 0.8em;
	color: #666;
	font-weight: normal;
	margin-top: 2px;
}
.mshb-cart-dates {
	display: block;
	color: #666;
	font-size: 0.85em;
	margin-top: 0.2em;
}