/**
 * Oxbow Booking Calendar — front end styles.
 *
 * Everything is scoped under .obc-wrap so the plugin cannot leak styles into
 * the theme. Colours follow the existing site calendar: green available,
 * red booked, with amber added for the pending state.
 */

.obc-wrap {
	--obc-available: #d9f7c4;
	--obc-available-border: #b6e394;
	--obc-pending: #ffe4b0;
	--obc-pending-border: #f0c66b;
	--obc-booked: #ffb3b3;
	--obc-booked-border: #f08a8a;
	--obc-blackout: #d6d1c9;
	--obc-selected: #4a6b3a;
	--obc-range: #e8f5df;
	--obc-border: #d8d2c8;
	--obc-text: #2c2c2c;
	--obc-muted: #8a8378;

	max-width: 40rem;
	color: var(--obc-text);
}

/* ---------- Tabs ---------- */

.obc-tabs {
	display: flex;
	gap: 0.25rem;
	margin: 0 0 1rem;
	border-bottom: 2px solid var(--obc-border);
}

.obc-tab {
	background: #00119c;
	border: 1px solid #00119c;
	border-bottom: 0;
	margin-bottom: -2px;
	padding: 0.55rem 1.1rem;
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	color: #fff;
	opacity: 0.55;
}

.obc-tab:hover {
	opacity: 0.8;
	color: #fff;
}

.obc-tab.is-active {
	background: #00119c;
	border-color: #00119c;
	border-bottom: 2px solid #00119c;
	color: #fff;
	font-weight: 600;
	opacity: 1;
}

.obc-inquiry-intro {
	margin: 0 0 1rem;
	color: var(--obc-text);
}

.obc-inquiry-form {
	max-width: 34rem;
}

/* ---------- Joining question (above the calendar) ---------- */

.obc-joining-ask {
	background: #fff;
	border: 1px solid var(--obc-border);
	padding: 0.9rem 1rem;
	margin: 0 0 1rem;
}

.obc-joining-ask .obc-fieldset {
	margin: 0;
}

.obc-joining-ask legend {
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.obc-joining-ask .obc-joining-name {
	margin: 0.75rem 0 0;
}

/* ---------- Calendar ---------- */

.obc-calendar-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.obc-calendar {
	background: #fff;
	border: 1px solid var(--obc-border);
	padding: 0.75rem;
	flex: 1 1 20rem;
	min-width: 17rem;
}

.obc-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.obc-month-label {
	font-weight: 600;
	font-size: 1.05rem;
	text-align: center;
	flex: 1;
}

.obc-nav {
	background: #00119c;
	border: 1px solid #00119c;
	cursor: pointer;
	padding: 0.25rem 0.7rem;
	line-height: 1.4;
	font-size: 0.85rem;
	color: #fff;
}

.obc-nav:hover,
.obc-nav:focus-visible {
	background: #000d76;
	border-color: #000d76;
}

.obc-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.obc-weekday {
	text-align: center;
	font-weight: 700;
	padding: 0.35rem 0;
	font-size: 0.85rem;
}

/* Days are drawn as two halves. A changeover day belongs to two guests: the
   departing one holds the morning, the arriving one the evening — so shading
   whole days would either hide an arrival or block a bookable date. */
.obc-day {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	background: var(--obc-available);
	border: 1px solid var(--obc-available-border);
	cursor: pointer;
	user-select: none;
	overflow: hidden;
}

/* Split diagonally rather than down the middle: the morning is the upper-left
   triangle, the evening the lower-right, divided corner to corner. */
.obc-day-half {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.obc-day-am { clip-path: polygon(0 0, 100% 0, 0 100%); }
.obc-day-pm { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Above the half shading and the turnover line, so the date stays legible. */
.obc-day-num {
	position: relative;
	z-index: 2;
}

.obc-day.am-pending .obc-day-am,
.obc-day.pm-pending .obc-day-pm {
	background: var(--obc-pending);
}

.obc-day.am-confirmed .obc-day-am,
.obc-day.pm-confirmed .obc-day-pm {
	background: var(--obc-booked);
}

/* Closed by the owner — neutral grey, so it reads as "not offered" rather
   than "someone else got there first". */
.obc-day.am-blackout .obc-day-am,
.obc-day.pm-blackout .obc-day-pm {
	background: var(--obc-blackout);
}

/* A day where one stay ends and another begins. Both halves are occupied, so
   without a line down the split it looks like an ordinary booked day. The
   135deg gradient puts the line corner to corner, matching the clip-path. */
.obc-day.is-turnover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		transparent calc(50% - 1px),
		rgba(0, 0, 0, 0.45) calc(50% - 1px),
		rgba(0, 0, 0, 0.45) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

.obc-day.is-empty {
	background: transparent;
	border-color: transparent;
	cursor: default;
}

.obc-day.is-available:hover {
	filter: brightness(0.95);
}

/* Past days inherit the available background and border from .obc-day, so both
   have to be reset or they read as bookable. */
.obc-day.is-past {
	background: #f0efed;
	border-color: #e2ded7;
	color: #bbb5ac;
}

/* A past day can still carry occupancy from a stay in progress; grey wins. */
.obc-day.is-past .obc-day-half {
	display: none;
}

.obc-day.is-disabled {
	cursor: not-allowed;
}

.obc-day.is-in-range {
	background: var(--obc-range);
	border-color: var(--obc-available-border);
}

.obc-day.is-selected {
	background: var(--obc-selected);
	border-color: var(--obc-selected);
	color: #fff;
	font-weight: 700;
}

/* A chosen day reads as one solid block, so the half shading and the turnover
   line both step aside. */
.obc-day.is-selected .obc-day-half,
.obc-day.is-in-range .obc-day-half {
	display: none;
}

.obc-day.is-selected::after,
.obc-day.is-in-range::after,
.obc-day.is-past::after {
	display: none;
}

.obc-day:focus-visible {
	outline: 2px solid var(--obc-selected);
	outline-offset: -2px;
}

.obc-cal-loading {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--obc-muted);
}

/* ---------- Legend ---------- */

/* No panel — the legend sits directly on the page background, so it needs no
   fill, border or inset padding of its own.

   Two columns, filling by row: Available | Pending, then Booked | Changeover.
   It takes the full width beneath the calendar rather than sitting alongside
   it, because the changeover label needs the room to stay on one or two lines. */
.obc-legend {
	list-style: none;
	margin: 0;
	padding: 0.25rem 0 0;
	background: transparent;
	border: 0;
	flex: 1 1 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem 1.5rem;
	align-items: start;
}

/* Top-aligned, so the swatch lines up with the first line of a label that
   wraps onto two lines rather than floating in the middle of it. */
.obc-legend li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.35;
}

.obc-swatch {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.08rem;
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex: none;
}

.obc-swatch-available { background: var(--obc-available); }
.obc-swatch-pending   { background: var(--obc-pending); }
.obc-swatch-booked    { background: var(--obc-booked); }
.obc-swatch-blackout  { background: var(--obc-blackout); }
.obc-swatch-turnover  {
	background: linear-gradient(
		135deg,
		var(--obc-booked) calc(50% - 1px),
		rgba(0, 0, 0, 0.45) calc(50% - 1px),
		rgba(0, 0, 0, 0.45) calc(50% + 1px),
		var(--obc-booked) calc(50% + 1px)
	);
}
/* 135deg puts the split corner-to-corner, matching the day cells. */
.obc-swatch-half      { background: linear-gradient(135deg, var(--obc-booked) 50%, var(--obc-available) 50%); }

/* ---------- Selection summary ---------- */

.obc-selection {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--obc-border);
	padding: 0.5rem 0.8rem;
	margin: 0 0 1rem;
	font-size: 0.9rem;
}

.obc-selection-empty {
	color: var(--obc-muted);
}

.obc-selection-value {
	font-weight: 600;
}

.obc-clear {
	background: #00119c;
	border: 0;
	padding: 0.3rem 0.7rem;
	cursor: pointer;
	color: #fff;
	font-size: 0.85rem;
	margin-left: auto;
}

.obc-clear:hover {
	background: #000d76;
}

/* ---------- Form ---------- */

/* Names the cottage being requested. The page heading says it too, but someone
   arriving mid-page or returning to a tab has no other confirmation. */
.obc-form-intro {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--obc-border);
	font-size: 1rem;
}

/* Two columns: the short fields pair up instead of each taking a full row,
   which roughly halves the height of the form. */
.obc-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem 1rem;
	align-items: start;
}

/* Fields that need the full width: free-text answers, the checkbox group,
   messages and the submit row. */
.obc-field--full,
.obc-fieldset,
.obc-message,
.obc-submit-row {
	grid-column: 1 / -1;
}

.obc-field {
	margin: 0;
}

/* The honeypot. Positioned off-screen rather than display:none or hidden,
   because a bot that can tell a field is hidden will leave it alone — and an
   empty decoy catches nothing. Absolute, so it takes no grid cell. */
.obc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.obc-field label,
.obc-fieldset legend {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.88rem;
}

.obc-required {
	color: #b13c3c;
	text-decoration: none;
	border: 0;
	vertical-align: super;
	font-size: 0.75em;
	margin-left: 0.15rem;
}

.obc-field input[type="text"],
.obc-field input[type="email"],
.obc-field input[type="tel"],
.obc-field select,
.obc-field textarea {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid #c9c3b8;
	background: #fff;
	font: inherit;
	font-size: 0.95rem;
	color: inherit;
	box-sizing: border-box;
}

.obc-field input:focus,
.obc-field select:focus,
.obc-field textarea:focus {
	outline: 2px solid var(--obc-selected);
	outline-offset: -1px;
}

.obc-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.obc-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-right: 1.25rem;
	font-size: 0.9rem;
}

.obc-inline input {
	margin: 0;
}

.obc-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.3rem 0.75rem;
}

.obc-checkbox-grid .obc-inline {
	margin-right: 0;
}

.obc-hint {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.82rem;
	color: var(--obc-muted);
}

/* ---------- Messages & submit ---------- */

.obc-message {
	padding: 0.6rem 0.8rem;
	margin: 0;
	border-left: 4px solid;
	font-size: 0.9rem;
}

.obc-message.is-error {
	background: #fdecec;
	border-color: #c34b4b;
	color: #7d2020;
}

.obc-message.is-success {
	background: #edf7e6;
	border-color: #5a8f3c;
	color: #2f5220;
}

.obc-submit-row {
	margin: 0.2rem 0 0;
}

.obc-submit {
	background: #00119c;
	color: #fff;
	border: 0;
	padding: 0.7rem 1.6rem;
	font: inherit;
	cursor: pointer;
}

.obc-submit:hover:not(:disabled) {
	background: #000d76;
}

.obc-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.obc-error {
	background: #fdecec;
	border-left: 4px solid #c34b4b;
	padding: 0.75rem 1rem;
	color: #7d2020;
}

@media (max-width: 480px) {
	.obc-calendar-panel {
		gap: 1rem;
	}

	/* Two columns leave too little room for the labels on a phone. */
	.obc-legend,
	.obc-form {
		grid-template-columns: 1fr;
	}

	.obc-legend {
		gap: 0.4rem;
	}

	.obc-legend li {
		font-size: 0.8rem;
	}
}