/**
 * Newbook Online plugin style overrides.
 *
 * Loaded only when the Newbook Online plugin is active AND the active page is
 * the booking template (Bayfield or Yosemite — Yosemite delegates to Bayfield).
 *
 * Two purposes:
 *   1. Reset Tailwind preflight that breaks the plugin's table-based markup.
 *   2. Polish accommodation list items to match the theme's design tokens.
 *
 * NOTE: Accommodation-item selectors below are best-effort guesses based on
 * common Newbook plugin DOM patterns. Verify on dev (Bayfield + Yosemite once
 * plugin is configured) and adjust selectors as needed.
 */

/* ── Plugin table reset — counter Tailwind preflight ─────────────────────── */

.newbook-plugin-container table,
#newbook_online_main_form table,
.ui-datepicker-calendar {
	display: table !important;
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 0 !important;
}

.newbook-plugin-container tr,
#newbook_online_main_form tr,
.ui-datepicker-calendar tr {
	display: table-row !important;
	width: auto !important;
	padding: 0 !important;
}

.newbook-plugin-container th,
.newbook-plugin-container td,
#newbook_online_main_form th,
#newbook_online_main_form td,
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
	display: table-cell !important;
	width: auto !important;
	padding: 6px 10px !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
	vertical-align: middle !important;
	text-align: center !important;
}

.ui-datepicker-header {
	display: block !important;
}

.ui-datepicker-calendar th {
	font-size: 11px !important;
	font-weight: bold !important;
	color: #666 !important;
}

/* ── Accommodation list items inside plugin form ─────────────────────────── *
 * Targets the cards/rows the plugin renders for each accommodation. Selector
 * scoping uses .newbook-plugin-container so rules can't leak to the custom
 * (non-plugin) booking widget. Tune selectors after inspecting the plugin's
 * actual rendered DOM on /book/ once configured.
 */

.newbook-plugin-container .accommodation,
.newbook-plugin-container .accommodation_item,
.newbook-plugin-container .nbol-accommodation-item,
.newbook-plugin-container [class*="accommodation-item"],
.newbook-plugin-container [class*="category-item"] {
	background: #ffffff;
	padding: 16px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	margin-bottom: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.newbook-plugin-container .accommodation:hover,
.newbook-plugin-container .accommodation_item:hover,
.newbook-plugin-container .nbol-accommodation-item:hover,
.newbook-plugin-container [class*="accommodation-item"]:hover,
.newbook-plugin-container [class*="category-item"]:hover {
	border-color: var(--wp--preset--color--accent, #ffb703);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Accommodation thumbnail — preserve aspect ratio, prevent stretch */
.newbook-plugin-container .accommodation img,
.newbook-plugin-container .accommodation_item img,
.newbook-plugin-container .nbol-accommodation-item img,
.newbook-plugin-container [class*="accommodation-item"] img,
.newbook-plugin-container [class*="category"] img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	max-width: 320px;
	border-radius: 8px;
	display: block;
}

/* Accommodation name */
.newbook-plugin-container .accommodation h2,
.newbook-plugin-container .accommodation h3,
.newbook-plugin-container .accommodation_item h2,
.newbook-plugin-container .accommodation_item h3,
.newbook-plugin-container [class*="accommodation"] .name,
.newbook-plugin-container [class*="accommodation"] .title {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1.25rem;
	color: var(--wp--preset--color--dark, #0d1411);
	margin: 0 0 4px;
	line-height: 1.2;
}

/* Capacity / max-guests label */
.newbook-plugin-container [class*="capacity"],
.newbook-plugin-container [class*="max_adults"],
.newbook-plugin-container [class*="guest"] {
	font-size: 0.75rem;
	color: rgba(0, 0, 0, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

/* Price emphasis */
.newbook-plugin-container [class*="price"],
.newbook-plugin-container .accommodation .total,
.newbook-plugin-container .accommodation_item .total {
	color: var(--wp--preset--color--accent, #ffb703);
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* "Book" / "Select" buttons inside list items — match theme button style */
.newbook-plugin-container .accommodation a.button,
.newbook-plugin-container .accommodation_item a.button,
.newbook-plugin-container [class*="accommodation"] button[type="submit"],
.newbook-plugin-container [class*="accommodation"] input[type="submit"] {
	background: var(--wp--preset--color--accent, #ffb703);
	color: var(--wp--preset--color--dark, #0d1411);
	border: 0;
	border-radius: 9999px;
	padding: 10px 20px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: filter 150ms ease;
}

.newbook-plugin-container .accommodation a.button:hover,
.newbook-plugin-container .accommodation_item a.button:hover,
.newbook-plugin-container [class*="accommodation"] button[type="submit"]:hover,
.newbook-plugin-container [class*="accommodation"] input[type="submit"]:hover {
	filter: brightness(1.1);
}

/* ============================================================
   Urgency panes + slide-in popups (e.g. #last_bookers_location)
   Newbook plugin renders viewport-anchored `position: fixed`
   panes (left:0; bottom:0). Theme wraps every page in
   `.site-wrapper.overflow-x-clip` (header.php:13) and theme.json
   sets `overflow-x: clip` on body — which establishes a clipping
   context that confines the fixed panes in some browsers and
   visually clips them at the wrapper edge. Relax overflow on
   the booking page only so the slide-ins render fully; every
   other page keeps the global clip behavior.
   ============================================================ */
body.booking-page,
body.booking-page .site-wrapper,
body.booking-page .wp-site-blocks,
body.booking-page .newbook-plugin-container {
	overflow-x: visible;
	overflow-y: visible;
}