/* =============================================================================
   vessels-calendar.css  — per-vessel scheduler (date picker + time slot picker)
   Loaded only when the vessels_scheduling_enabled setting is on.
   All selectors live under .vbf-sched-* so they don't bleed into the rest of
   the booking form's vbf- namespace.
   ============================================================================= */

.vbf-scheduler {
	margin-top: 14px;
	padding: 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fafbfd;
}

.vbf-scheduler__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--vbf-primary);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 8px;
}

/* ── CALENDAR ─────────────────────────────────────────────────────────────── */
.vbf-cal {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
}

.vbf-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.vbf-cal-nav__btn {
	background: none;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	width: 30px;
	height: 30px;
	font-size: 16px;
	color: var(--vbf-primary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}

.vbf-cal-nav__btn:hover { background: #f0f4f8; }
.vbf-cal-nav__btn:disabled,
.vbf-cal-nav__btn--disabled {
	opacity: .35;
	cursor: not-allowed;
}

.vbf-cal-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--vbf-primary);
}

.vbf-cal-dows {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 4px;
}

.vbf-cal-dow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #94a3b8;
	text-align: center;
	padding: 4px 0;
}

.vbf-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	min-height: 240px;
}

.vbf-cal-day {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	border-radius: 6px;
	border: 1px solid transparent;
	background: #fff;
	color: var(--vbf-text);
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.vbf-cal-day--empty   { visibility: hidden; }
.vbf-cal-day--past,
.vbf-cal-day--closed,
.vbf-cal-day--blocked,
.vbf-cal-day--booked  {
	background: #f1f5f9;
	color: #cbd5e1;
	cursor: not-allowed;
}

.vbf-cal-day--available,
.vbf-cal-day--partial {
	background: #f0f9f4;
	color: #0f5132;
	border-color: #cce5d3;
	cursor: pointer;
}

.vbf-cal-day--partial {
	background: #fff8e6;
	color: #856404;
	border-color: #ffe69c;
}

@media (hover: hover) {
	.vbf-cal-day--available:hover,
	.vbf-cal-day--partial:hover {
		background: var(--vbf-primary);
		color: #fff;
		border-color: var(--vbf-primary);
	}
}

.vbf-cal-day--selected,
.vbf-cal-day--selected:hover {
	background: var(--vbf-primary) !important;
	color: #fff !important;
	border-color: var(--vbf-primary) !important;
}

.vbf-cal-day--today {
	box-shadow: inset 0 0 0 2px var(--vbf-primary);
}

.vbf-cal-loading,
.vbf-cal-error,
.vbf-cal-empty {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 12px;
	color: #64748b;
	padding: 24px 8px;
}

.vbf-cal-error { color: #b91c1c; }

/* ── TIME SLOT PICKER ──────────────────────────────────────────────────────── */
.vbf-time {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed #e2e8f0;
}

.vbf-time__heading {
	font-size: 13px;
	font-weight: 700;
	color: var(--vbf-primary);
	margin-bottom: 8px;
}

.vbf-time__hint {
	font-size: 12px;
	color: #94a3b8;
	margin-bottom: 8px;
}

.vbf-time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
	gap: 6px;
}

.vbf-time-slot {
	padding: 8px 6px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: var(--vbf-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s, background .15s, color .15s;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
	.vbf-time-slot:hover {
		border-color: var(--vbf-primary);
		background: #f0f4f8;
		color:var(--vbf-primary);
	}
}

.vbf-time-slot.vbf-time-slot--selected {
	background: var(--vbf-primary);
	color: #fff;
	border-color: var(--vbf-primary);
}

.vbf-time-slot--disabled,
.vbf-time-slot--disabled:hover {
	cursor: not-allowed;
	pointer-events: none;
}

/* "Time conflict" / generic unavailable — booking would directly overlap
   an existing reservation. Plain grey, no ornament: just "this isn't an
   option". */
.vbf-time-slot--unavailable,
.vbf-time-slot--unavailable:hover {
	background: #f1f5f9;
	color: #cbd5e1;
	border-color: #f1f5f9;
}

/* "Already booked" — the slot's start time falls inside an existing
   reservation or operator block. Customer can never push a booking
   through here. Visually the strongest "no" cue. */
.vbf-time-slot--booked,
.vbf-time-slot--booked:hover {
	background: #fde2e2;
	color: #b91c1c;
	border-color: #fbbcbc;
	text-decoration: line-through;
	text-decoration-color: rgba(185, 28, 28, .55);
}

/* "Buffer time required" — the booking itself wouldn't overlap, only
   the buffer time around it does. Amber stripe pattern signals "almost
   works — try a shorter duration or a different time". */
.vbf-time-slot--buffered,
.vbf-time-slot--buffered:hover {
	background: repeating-linear-gradient(
		135deg,
		#fff7ed 0,
		#fff7ed 6px,
		#fde7c5 6px,
		#fde7c5 12px
	);
	color: #92400e;
	border-color: #fbcd8a;
}

/* ── Slot legend ────────────────────────────────────────────────────────────
   Sits under the time grid when at least one disabled state is shown.
   Each swatch matches the corresponding slot style above so the colors
   in the grid have an obvious key. */
.vbf-time-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 10px;
	padding: 8px 10px;
	border-top: 1px dashed #e2e8f0;
	font-size: 12px;
	color: var(--vbf-text-soft);
	grid-column: 1 / -1;
}
.vbf-time-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.vbf-time-legend__sw {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid #cbd5e1;
}
.vbf-time-legend__sw--free {
	background: #fff;
	border-color: #cbd5e1;
}
.vbf-time-legend__sw--unavailable {
	background: #f1f5f9;
	border-color: #e2e8f0;
}
.vbf-time-legend__sw--buffered {
	background: repeating-linear-gradient(
		135deg,
		#fff7ed 0,
		#fff7ed 3px,
		#fde7c5 3px,
		#fde7c5 6px
	);
	border-color: #fbcd8a;
}
.vbf-time-legend__sw--booked {
	background: #fde2e2;
	border-color: #fbbcbc;
}

.vbf-time-empty {
	font-size: 13px;
	color: #94a3b8;
	padding: 10px 0;
}

/* ── Duration buttons (Step 2 — between calendar and time slots) ───────────
   These are the radio-style choice buttons (3, 4, 5, 6, 7, 8 hours) with
   the price stamp underneath each duration. Layout matches the time-slot
   grid so the whole picker reads as a coherent three-step ladder. */
.vbf-duration {
	margin-top: 18px;
	padding: 14px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #f9fafb;
}
.vbf-duration__heading {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vbf-text);
}
.vbf-duration-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
}
.vbf-duration-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 8px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: var(--vbf-text);
	font: inherit;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
	.vbf-duration-btn:hover {
		border-color: var(--vbf-primary);
		background: #eef2ff;
		color:var(--vbf-primary);
	}
}
.vbf-duration-btn.vbf-duration-btn--selected {
	border-color: var(--vbf-primary);
	background: var(--vbf-primary);
	color: #fff;
	box-shadow: 0 0 0 2px rgba(30, 58, 138, .15);
}
.vbf-duration-btn__hours {
	font-weight: 600;
	font-size: 14px;
}
.vbf-duration-btn__price {
	font-size: 12px;
	opacity: .85;
}