/**
 * Booking Cal — core design system.
 * Everything is scoped to .bookcal-booking-system and driven by CSS custom
 * properties, so the calendar cannot break the site theme and vice versa.
 */

.bookcal-booking-system {
	--bookcal-primary: #4f46e5;
	--bookcal-bg: #ffffff;
	--bookcal-surface: #f9fafb;
	--bookcal-text: #1f2937;
	--bookcal-muted: #6b7280;
	--bookcal-border: #e5e7eb;
	--bookcal-radius: 10px;
	--bookcal-event-radius: 8px;
	--bookcal-font-size: 14px;
	--bookcal-event-text: #ffffff;
	--bookcal-shadow: 0 1px 3px rgba(0,0,0,.08);
	--bookcal-today-bg: rgba(79,70,229,.06);

	box-sizing: border-box;
	font-size: var(--bookcal-font-size);
	color: var(--bookcal-text);
	background: var(--bookcal-bg);
	border: 1px solid var(--bookcal-border);
	border-radius: var(--bookcal-radius);
	box-shadow: var(--bookcal-shadow);
	padding: 16px;
	max-width: 100%;
}
.bookcal-booking-system *,
.bookcal-booking-system *::before,
.bookcal-booking-system *::after { box-sizing: inherit; }

/* ── Theme-conflict hardening ────────────────────────────────────────
   Page-builder themes (Divi etc.) style table/th/td globally. FullCalendar
   renders the weekday header and the date grid as separate tables, so any
   extra padding/border/spacing applied to one of them skews the column
   widths and the day names stop lining up with the dates. Pin the table
   layout back to what FullCalendar expects, scoped to our container. */
.bookcal-booking-system .fc table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin: 0;
	font-size: 1em;
}
.bookcal-booking-system .fc th,
.bookcal-booking-system .fc td {
	padding: 0;
	min-width: 0;
	background: transparent;
}
.bookcal-booking-system .fc th { text-align: center; }

/* ── Map our vars onto FullCalendar v6 vars, scoped ─────────────────── */
.bookcal-booking-system .bookcal-calendar {
	--fc-border-color: var(--bookcal-border);
	--fc-page-bg-color: transparent;
	--fc-neutral-bg-color: var(--bookcal-surface);
	--fc-today-bg-color: var(--bookcal-today-bg);
	--fc-button-bg-color: var(--bookcal-primary);
	--fc-button-border-color: var(--bookcal-primary);
	--fc-button-hover-bg-color: color-mix(in srgb, var(--bookcal-primary) 85%, black);
	--fc-button-hover-border-color: color-mix(in srgb, var(--bookcal-primary) 85%, black);
	--fc-button-active-bg-color: color-mix(in srgb, var(--bookcal-primary) 75%, black);
	--fc-button-active-border-color: color-mix(in srgb, var(--bookcal-primary) 75%, black);
	--fc-button-text-color: #ffffff;
	--fc-event-text-color: var(--bookcal-event-text);
	--fc-list-event-hover-bg-color: var(--bookcal-surface);
	font-size: var(--bookcal-font-size);
}
.bookcal-booking-system .fc { color: var(--bookcal-text); }
.bookcal-booking-system .fc a { color: inherit; text-decoration: none; box-shadow: none; }
.bookcal-booking-system .fc .fc-toolbar-title { font-size: 1.25em; font-weight: 600; color: var(--bookcal-text); margin: 0; }
.bookcal-booking-system .fc .fc-button {
	border-radius: calc(var(--bookcal-radius) * .7);
	padding: .45em .9em;
	font-size: .92em;
	font-weight: 500;
	text-transform: none;
	box-shadow: none !important;
	transition: background .15s ease;
}
.bookcal-booking-system .fc .fc-col-header-cell-cushion { padding: 8px 4px; font-weight: 600; color: var(--bookcal-muted); font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.bookcal-booking-system .fc .fc-daygrid-day-number { padding: 6px 8px; color: var(--bookcal-text); font-weight: 500; }
.bookcal-booking-system .fc .fc-day-other .fc-daygrid-day-number { color: var(--bookcal-muted); opacity: .55; }
.bookcal-booking-system .fc .fc-scrollgrid { border-radius: calc(var(--bookcal-radius) * .7); overflow: hidden; }
.bookcal-booking-system .fc .fc-timegrid-slot-label-cushion,
.bookcal-booking-system .fc .fc-list-day-text,
.bookcal-booking-system .fc .fc-list-day-side-text { color: var(--bookcal-muted); }
.bookcal-booking-system .fc .fc-list-event-title { color: var(--bookcal-text); }
.bookcal-booking-system .fc .fc-list-table td { border-color: var(--bookcal-border); }

/* ── Events ─────────────────────────────────────────────────────────── */
.bookcal-booking-system .fc .fc-event {
	border: none;
	border-radius: var(--bookcal-event-radius);
	padding: 2px 6px;
	font-size: .92em;
	line-height: 1.3;
	cursor: pointer;
	transition: filter .12s ease, transform .12s ease;
}
.bookcal-booking-system .fc .fc-event:hover { filter: brightness(1.08); }
/* Keep events contained in their day cell: clip + ellipsis, never spill */
.bookcal-booking-system .fc .fc-daygrid-event {
	overflow: hidden;
	white-space: nowrap;
	max-width: 100%;
}
.bookcal-booking-system .fc .fc-daygrid-event .bookcal-event-time,
.bookcal-booking-system .fc .fc-daygrid-event .bookcal-event-title {
	display: inline;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* The availability/price line is too long for month cells — show it in
   week/day/list views only; the picked-event summary always shows it */
.bookcal-booking-system .fc-daygrid .bookcal-event-meta { display: none; }
.bookcal-booking-system .fc .fc-timegrid-event { overflow: hidden; }
.bookcal-booking-system .fc .fc-daygrid-more-link { color: var(--bookcal-primary); font-weight: 600; }
.bookcal-booking-system .fc .fc-event.bookcal-selected {
	outline: 2px solid var(--bookcal-primary);
	outline-offset: 1px;
	transform: scale(1.02);
}
.bookcal-booking-system .fc .fc-event.bookcal-not-bookable { opacity: .45; cursor: not-allowed; }
/* Fully booked: red dot (list view paints it inline -> !important) + struck-through text.
   Less dimming than other not-bookable events so the red stays readable. */
.bookcal-booking-system .fc .fc-event.bookcal-full { opacity: .7; }
.bookcal-booking-system .fc .bookcal-full .fc-list-event-dot { border-color: var(--bookcal-full-color, #dc2626) !important; }
.bookcal-booking-system .fc .bookcal-full .bookcal-event-time,
.bookcal-booking-system .fc .bookcal-full .bookcal-event-title,
.bookcal-booking-system .fc .bookcal-full .fc-list-event-title { text-decoration: line-through; }
/* inline-block escapes the inherited line-through: keep the "Full" label legible */
.bookcal-booking-system .fc .bookcal-full .bookcal-event-meta { text-decoration: none; display: inline-block; margin-left: 6px; }
.bookcal-booking-system .bookcal-day-event-slot.bookcal-full > span:first-child { text-decoration: line-through; }
.bookcal-booking-system .bookcal-event-meta { display: block; font-size: .85em; opacity: .9; }

/* ── Form fields ────────────────────────────────────────────────────── */
.bookcal-booking-system .bookcal-form { margin-top: 14px; }
.bookcal-booking-system .bookcal-fields-row { display: flex; flex-wrap: wrap; gap: 12px; }
.bookcal-booking-system .bookcal-field { flex: 1 1 180px; margin: 0 0 12px; }
.bookcal-booking-system .bookcal-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .92em; }
.bookcal-booking-system .bookcal-field input[type="text"],
.bookcal-booking-system .bookcal-field input[type="email"],
.bookcal-booking-system .bookcal-field input[type="tel"],
.bookcal-booking-system .bookcal-field input[type="number"] {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--bookcal-border);
	border-radius: calc(var(--bookcal-radius) * .7);
	background: var(--bookcal-bg);
	color: var(--bookcal-text);
	font-size: 1em;
	line-height: 1.4;
}
.bookcal-booking-system .bookcal-field input:focus {
	outline: none;
	border-color: var(--bookcal-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bookcal-primary) 20%, transparent);
}
.bookcal-booking-system .bookcal-field-quantity { flex: 0 1 120px; }
.bookcal-booking-system .bookcal-required { color: #ef4444; }
.bookcal-booking-system .bookcal-field-terms label { font-weight: 400; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.bookcal-booking-system .bookcal-submit,
.bookcal-booking-system .bookcal-btn {
	display: inline-block;
	background: var(--bookcal-primary);
	color: #fff;
	border: none;
	border-radius: calc(var(--bookcal-radius) * .7);
	padding: 10px 24px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s ease;
}
.bookcal-booking-system .bookcal-submit:hover:not(:disabled),
.bookcal-booking-system .bookcal-btn:hover { filter: brightness(1.1); }
.bookcal-booking-system .bookcal-submit:disabled { opacity: .5; cursor: not-allowed; }
.bookcal-booking-system .bookcal-btn-small { padding: 5px 12px; font-size: .85em; }
.bookcal-booking-system .bookcal-btn-danger { background: #ef4444; }

/* ── Picked event summary ───────────────────────────────────────────── */
.bookcal-booking-system .bookcal-picked-summary {
	margin-top: 12px;
	padding: 12px 16px;
	background: var(--bookcal-surface);
	border: 1px solid var(--bookcal-border);
	border-left: 4px solid var(--bookcal-primary);
	border-radius: calc(var(--bookcal-radius) * .7);
}
.bookcal-booking-system .bookcal-picked-event { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.bookcal-booking-system .bookcal-picked-title { font-weight: 700; }
.bookcal-booking-system .bookcal-picked-date { color: var(--bookcal-muted); }
.bookcal-booking-system .bookcal-picked-price { font-weight: 600; color: var(--bookcal-primary); }
.bookcal-booking-system .bookcal-picked-availability { font-size: .88em; color: var(--bookcal-muted); }

/* ── Notices & messages ─────────────────────────────────────────────── */
.bookcal-booking-system .bookcal-notice,
.bookcal-booking-system .bookcal-message {
	padding: 10px 14px;
	border-radius: calc(var(--bookcal-radius) * .7);
	margin: 10px 0;
	font-size: .95em;
}
.bookcal-booking-system .bookcal-notice-info { background: color-mix(in srgb, var(--bookcal-primary) 10%, transparent); color: var(--bookcal-text); }
.bookcal-booking-system .bookcal-message-success { background: #d1fae5; color: #065f46; }
.bookcal-booking-system .bookcal-message-error { background: #fee2e2; color: #991b1b; }

/* ── Loading spinner ────────────────────────────────────────────────── */
.bookcal-calendar-wrap { position: relative; }
.bookcal-booking-system .bookcal-loading {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--bookcal-bg) 65%, transparent);
	z-index: 5;
	border-radius: var(--bookcal-radius);
}
.bookcal-booking-system .bookcal-loading[hidden] { display: none; }
.bookcal-booking-system .bookcal-spinner {
	width: 28px; height: 28px;
	border: 3px solid var(--bookcal-border);
	border-top-color: var(--bookcal-primary);
	border-radius: 50%;
	animation: bookcal-spin .7s linear infinite;
}
@keyframes bookcal-spin { to { transform: rotate(360deg); } }

/* ── Date picker mode ───────────────────────────────────────────────── */
.bookcal-booking-system .bookcal-datepicker-layout { display: flex; gap: 16px; flex-wrap: wrap; }
.bookcal-booking-system .bookcal-datepicker-layout .bookcal-calendar { flex: 1 1 320px; min-width: 280px; }
.bookcal-booking-system .bookcal-day-events { flex: 1 1 240px; min-width: 220px; border-left: 1px solid var(--bookcal-border); padding-left: 16px; }
.bookcal-booking-system .bookcal-day-events-title { font-weight: 600; margin-bottom: 10px; color: var(--bookcal-muted); }
.bookcal-booking-system .bookcal-day-event-slot {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	width: 100%;
	padding: 10px 12px; margin-bottom: 8px;
	background: var(--bookcal-surface);
	border: 1px solid var(--bookcal-border);
	border-radius: calc(var(--bookcal-radius) * .7);
	cursor: pointer;
	font: inherit; color: inherit;
	text-align: left;
	transition: border-color .12s ease;
}
.bookcal-booking-system .bookcal-day-event-slot:hover { border-color: var(--bookcal-primary); }
.bookcal-booking-system .bookcal-day-event-slot.selected { border-color: var(--bookcal-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bookcal-primary) 25%, transparent); }
.bookcal-booking-system .bookcal-day-event-slot .slot-remaining { font-size: .85em; color: var(--bookcal-muted); }
.bookcal-booking-system .bookcal-day-event-slot:disabled { opacity: .45; cursor: not-allowed; }

.bookcal-booking-system .fc .fc-daygrid-day.bookcal-has-events { cursor: pointer; }
.bookcal-booking-system .fc .fc-daygrid-day.bookcal-has-events .fc-daygrid-day-number {
	background: var(--bookcal-primary);
	color: #fff;
	border-radius: 99px;
	min-width: 1.9em;
	text-align: center;
	margin: 3px;
}
.bookcal-booking-system .fc .fc-daygrid-day.bookcal-dp-selected {
	box-shadow: inset 0 0 0 2px var(--bookcal-primary);
}

/* ── Customer bookings table ────────────────────────────────────────── */
.bookcal-booking-system .bookcal-table { width: 100%; border-collapse: collapse; }
.bookcal-booking-system .bookcal-table th,
.bookcal-booking-system .bookcal-table td { padding: 10px 12px; border-bottom: 1px solid var(--bookcal-border); text-align: left; }
.bookcal-booking-system .bookcal-table th { font-size: .85em; text-transform: uppercase; letter-spacing: .04em; color: var(--bookcal-muted); }
.bookcal-status-pill {
	display: inline-block;
	padding: 2px 12px;
	border-radius: 99px;
	color: #fff;
	font-size: .82em;
	font-weight: 600;
}
.bookcal-booking-system .bookcal-actions-cell { white-space: nowrap; }
.bookcal-booking-system .bookcal-reschedule-options { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bookcal-booking-system .bookcal-refund-note { display: block; margin-top: 4px; color: var(--bookcal-muted); font-size: .82em; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.bookcal-booking-system { padding: 10px; }
	.bookcal-booking-system .fc .fc-toolbar { flex-direction: column; gap: 8px; }
	.bookcal-booking-system .bookcal-table thead { display: none; }
	.bookcal-booking-system .bookcal-table tr { display: block; border-bottom: 2px solid var(--bookcal-border); padding: 8px 0; }
	.bookcal-booking-system .bookcal-table td { display: flex; justify-content: space-between; border: none; padding: 4px 8px; }
	.bookcal-booking-system .bookcal-table td::before { content: attr(data-label); font-weight: 600; }
}