/* Howff availability listing — replicates the live site design (v2.8.0) */
.ha-availability { max-width: 800px; margin: 0 auto; scroll-behavior: smooth; }

.ha-next { text-align: center; margin: 8px 0 28px; color: #f5f0e8; }
.ha-next p { margin: 0 0 12px; font-size: 16px; }
.ha-next__btn {
	display: inline-block; background: #fff; color: #111;
	border-radius: 20px; padding: 8px 22px; font-size: 14px; font-weight: 600;
	text-decoration: none;
}
.ha-next__btn:hover { background: #e8e8e8; color: #111; }
.ha-next__updated { margin-top: 12px !important; font-size: 12px; opacity: .55; }

.ha-month { color: #f5f0e8; font-size: 24px; font-weight: 600; margin: 34px 0 14px; }

.ha-events { display: flex; flex-direction: column; gap: 14px; }
.ha-event {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	background: #3a3a3a; border-radius: 8px; padding: 16px 22px;
	scroll-margin-top: 90px;
}
.ha-event__special {
	color: #ffe600; font-size: 13px; font-weight: 600;
	letter-spacing: .02em; margin-bottom: 4px;
}
.ha-event__dayname { color: #f5f0e8; font-size: 14px; }
.ha-event__date { color: #fff; font-size: 26px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; }
.ha-event__action { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ha-event__spaces { color: #52d6a4; font-size: 14px; }
.ha-event__full { color: #ff6b6b; font-size: 15px; font-weight: 600; }
.ha-btn-enquire {
	background: #fff; color: #111; border: none; border-radius: 18px;
	padding: 7px 26px; font-size: 14px; font-weight: 600; cursor: pointer;
}
/* Hover, focus and active all restate the text colour. Without it the base
   rule (.ha-btn-enquire, 0,1,0) is the only thing holding the colour, and any
   theme `button:hover { color: #fff }` (0,1,1) outranks it the moment the
   pointer lands — white text on a near-white background. Note that a theme's
   own `:hover` counts toward its specificity too, so `.entry-content
   .wp-block-group button:hover` scores 0,3,1; pairing our two classes alone
   (0,3,0) would still lose. Scoping to the container clears it: the listing
   wrapper takes these to 0,4,0, and the modal rules below are anchored to
   #ha-modal-root, which no class-based theme rule can outrank.

   Focus and active restate the colour only, never the background: matching the
   hover background here would leave the button stuck looking hovered after a
   click. */
.ha-availability .ha-btn-enquire.ha-book-btn:hover { background: #e8e8e8; color: #111; }
.ha-availability .ha-btn-enquire.ha-book-btn:focus,
.ha-availability .ha-btn-enquire.ha-book-btn:focus-visible,
.ha-availability .ha-btn-enquire.ha-book-btn:active { color: #111; }
.ha-empty { text-align: center; opacity: .7; color: #f5f0e8; }

@media (max-width: 560px) {
	/* Vertical stack: nothing shares a horizontal row, so a long special
	   title can't collide with the date and there are no large side gaps. */
	.ha-event {
		flex-direction: column; align-items: stretch; gap: 10px;
		padding: 16px 18px;
	}
	.ha-event__special { margin-bottom: 0; word-break: break-word; }
	.ha-event__date { font-size: 24px; }
	.ha-event__action {
		flex-direction: row; align-items: center; justify-content: space-between;
		text-align: left; width: 100%; gap: 12px;
		border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px;
	}
	.ha-event__action .ha-btn-enquire { flex: 0 0 auto; padding: 8px 22px; }
	.ha-event__spaces, .ha-event__full { flex: 1 1 auto; }
}

/* Buttons */
.ha-btn {
	display: inline-block; border: none; border-radius: 8px;
	padding: 14px 26px; font-weight: 600; font-size: 17px;
	cursor: pointer; text-decoration: none; text-align: center;
}
.ha-btn--primary { background: #5ec1f7; color: #111; }
#ha-modal-root .ha-btn--primary:hover { background: #74cbf9; color: #111; }
#ha-modal-root .ha-btn--primary:focus,
#ha-modal-root .ha-btn--primary:focus-visible,
#ha-modal-root .ha-btn--primary:active { color: #111; }
.ha-btn--outline { background: #fff; color: #111; border: 1px solid #444; }
#ha-modal-root .ha-btn--outline:hover { background: #f2f2f2; color: #111; }
#ha-modal-root .ha-btn--outline:focus,
#ha-modal-root .ha-btn--outline:focus-visible,
#ha-modal-root .ha-btn--outline:active { color: #111; }
.ha-btn--full { display: block; width: 100%; margin-top: 12px; box-sizing: border-box; }
.ha-btn--disabled { background: #e0e0e0; color: #5a5a5a; cursor: default; }
.ha-btn:disabled { background: #e0e0e0; color: #5a5a5a; border-color: #cfcfcf; cursor: default; }
/* A disabled button still receives :hover, so it needs the colour defended too
   — otherwise it greys out and then goes white-on-grey under the pointer. */
#ha-modal-root .ha-btn:disabled:hover,
#ha-modal-root .ha-btn:disabled:focus,
#ha-modal-root .ha-btn:disabled:active,
#ha-modal-root .ha-btn--disabled:hover,
#ha-modal-root .ha-btn--disabled:focus,
#ha-modal-root .ha-btn--disabled:active { background: #e0e0e0; color: #5a5a5a; }
.ha-event .ha-btn { background: #5ec1f7; color: #111; padding: 10px 22px; font-size: 15px; }

/* Modal */
.ha-overlay { position: fixed; inset: 0; background: rgba(5,5,8,.78); z-index: 9998; }
.ha-modal {
	position: fixed; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%, -50%);
	background: #fff; color: #1c1c1c; border-radius: 18px;
	box-shadow: 0 18px 60px rgba(0,0,0,.5);
	font-size: 17px; line-height: 1.55;

	/* Padding lives on the three children so the body can scroll under the
	   head and footer; the media query below only has to change these. */
	--ha-pad-x: 32px;
	--ha-pad-y: 34px;
	padding: 0;

	/* `100%` on a fixed element resolves against the viewport excluding the
	   scrollbar, which `100vw` does not — no more horizontal overflow. */
	width: min(620px, calc(100% - 32px));

	/* `100vh` is the LARGE viewport: the height with mobile browser chrome
	   retracted. Since the modal locks body scroll, the chrome never retracts
	   while it is open, so sizing against it pushes the header under the
	   address bar and the footer under the toolbar. `svh` assumes chrome is
	   present, which is exactly the state the modal opens in. The plain `vh`
	   line stays first as the fallback for pre-2022 browsers. */
	max-height: calc(100vh - 48px);
	max-height: calc(100svh - 48px);

	display: flex; flex-direction: column;
	overflow: hidden; /* clip the scrolling body to the rounded corners */
}
.ha-modal__body {
	flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: 0 var(--ha-pad-x);
	overscroll-behavior: contain;
}
.ha-modal__footer {
	flex: 0 0 auto; background: #fff;
	padding: 14px var(--ha-pad-x) var(--ha-pad-y);
	border-top: 1px solid #e6e6e6;
}
.ha-modal__footer .ha-btn--full:first-child { margin-top: 0; }
.ha-heading { margin: 0 0 4px; font-size: 24px; }
.ha-sub { margin: 0 0 18px; font-size: 15px; opacity: .7; }

/* Terms step */

/* Terms: flush-left lists and a smaller size that reads well on a phone.
   A small padding is kept so the bullet markers aren't clipped. */
.ha-terms { font-size: 14px; line-height: 1.5; }
.ha-terms ul { margin-left: 0; padding-left: 1.1em; }
.ha-terms li { margin-bottom: 10px; }
.ha-terms p { font-size: 14px; }

/* Pink notice boxes (terms + dietary warning) */
.ha-notice {
	background: #fdeaee; border-left: 4px solid #f2334f; border-radius: 6px;
	padding: 10px 14px; margin: 12px 0; font-size: 14px; line-height: 1.45;
}
/* Kept a step below the notice body so the hierarchy survives the smaller
   base size. Both the step 2 dietary warning and any ha-notice the owner has
   used inside the saved terms take these. */
.ha-notice--deposit small { display: block; margin-top: 5px; opacity: .8; font-size: 12px; }

/* Form fields */
.ha-row { display: flex; gap: 18px; }
.ha-row .ha-field { flex: 1; }
.ha-field { margin-bottom: 16px; }
.ha-label {
	display: block; font-weight: 700; font-size: 15px;
	letter-spacing: normal; text-transform: none; margin-bottom: 8px;
}
.ha-modal input[type=text],
.ha-modal input[type=email],
.ha-modal input[type=tel],
.ha-modal select,
.ha-modal textarea {
	width: 100%; padding: 9px 14px; box-sizing: border-box;
	border: 1px solid #333; border-radius: 8px;
	font-size: 16px; background: #fafafa; color: #1c1c1c;
}
.ha-modal textarea::placeholder,
.ha-modal input::placeholder,
.ha-modal textarea::placeholder { color: #6b6b6b; }

/* Dietary radios */
.ha-radios { display: flex; gap: 26px; align-items: center; }
.ha-radios label { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 15px;
	cursor: pointer; min-height: 44px; }
.ha-radios input[type=radio] { width: 24px; height: 24px; accent-color: #2f7ff7; flex: 0 0 auto; }

.ha-hidden { display: none; }

.ha-card-field {
	padding: 14px 16px; background: #fafafa;
	border: 1px solid #333; border-radius: 8px;
}
.ha-error { color: #c0392b; font-size: 14px; min-height: 20px; margin: 8px 0; }

.ha-done { text-align: center; padding: 8px 0; }
.ha-done__ref { font-size: 16px; }

@media (max-width: 560px) {
	.ha-terms, .ha-terms p { font-size: 13px; }
	.ha-event { flex-wrap: wrap; }
	.ha-event__action { width: 100%; }
	.ha-event__action .ha-btn { width: 100%; }
	.ha-row { flex-direction: column; gap: 0; }
	.ha-modal { --ha-pad-x: 20px; --ha-pad-y: 22px; }
}

/* Express checkout (wallet buttons) */
#ha-express { margin: 6px 0 2px; }
.ha-divider {
	display: flex; align-items: center; gap: 12px;
	margin: 16px 0; color: #5f5f5f; font-size: 13px;
	text-transform: uppercase; letter-spacing: .05em;
}
.ha-divider::before, .ha-divider::after {
	content: ""; flex: 1; height: 1px; background: #ddd;
}
#ha-payment { margin-bottom: 8px; }

/* Voucher rows */
.ha-voucher-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ha-voucher-row .ha-voucher-code { flex: 1; }
.ha-voucher-status { font-size: 13px; min-width: 70px; white-space: nowrap; }
.ha-voucher-status--ok { color: #1e7a4a; font-weight: 700; }
.ha-voucher-status--bad { color: #c0392b; }
.ha-voucher-remove {
	background: none; border: none; font-size: 22px; line-height: 1;
	color: #5f5f5f; cursor: pointer;
}
.ha-voucher-remove:hover { color: #c0392b; }
#ha-voucher-wrap { margin-bottom: 16px; }
#ha-add-voucher { padding: 8px 16px; font-size: 14px; margin-top: 2px; }

/* Itemised bill (Option 3, v2.6.0) */
.ha-bill { margin: 4px 0 12px; }
.ha-bill-section {
	background: #faf7f2; border: 1px solid #e6ddcc;
	border-radius: 8px; padding: 12px 16px; margin-bottom: 10px;
}
.ha-bill-head {
	font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; color: #8b6914; margin-bottom: 8px;
}
.ha-bill-when { font-weight: 400; text-transform: none; letter-spacing: 0; color: #5f5f5f; font-size: 12px; }
.ha-bill-row {
	display: flex; justify-content: space-between; gap: 14px;
	font-size: 15px; padding: 5px 0; line-height: 1.4;
}
.ha-bill-row span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ha-bill-row--strong { font-weight: 700; border-top: 1px solid #e6ddcc; margin-top: 4px; padding-top: 8px; }
.ha-bill-row--credit { color: #1e7a4a; }
.ha-bill-row--credit span:last-child { font-weight: 700; }
.ha-bill-row--note { color: #555; font-style: italic; }
.ha-sum-fine { font-size: 13px; line-height: 1.5; color: #5f5f5f; margin: 0 0 4px; }

@media (max-width: 560px) {
	.ha-bill-row { font-size: 14px; }
}


/* ── v2.16.0: dialog header, accessible form furniture, bill layout ── */

body.ha-modal-open { overflow: hidden; }

.ha-modal__head { flex: 0 0 auto; padding: var(--ha-pad-y) var(--ha-pad-x) 16px; }
.ha-modal__step {
	margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: #5f5f5f;
}
/* Scoped to #ha-modal-root rather than the class alone. The modal is rendered
   inside page content, so theme rules such as `.entry-content .wp-block-group h2`
   would otherwise win on specificity — which is why this h2 previously took the
   theme's colour instead of having one of its own. The ID is our own markup and
   a genuine singleton, so it settles the cascade without !important. */
#ha-modal-root .ha-modal__title { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 700; color: #1c1c1c; }
.ha-modal__event { margin: 4px 0 0; color: #8b6914; font-weight: 700; font-size: 15px; }
.ha-modal:focus { outline: none; }
.ha-modal :focus-visible { outline: 3px solid #2f7ff7; outline-offset: 2px; border-radius: 4px; }

/* Terms acceptance */
.ha-accept {
	display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
	min-height: 44px; padding: 12px 0; font-size: 15px; line-height: 1.4;
}
.ha-accept input[type=checkbox] {
	width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: #2f7ff7;
}

/* Radio groups as fieldsets */
.ha-fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.ha-fieldset legend { padding: 0; margin-bottom: 8px; }

/* Required markers, hints and per-field errors */
.ha-req { color: #b3261e; font-weight: 700; }
.ha-req-note { margin: 0 0 16px; font-size: 13px; color: #5f5f5f; }
.ha-hint { margin: 6px 0 0; font-size: 13px; color: #5f5f5f; }
.ha-field-error { margin: 6px 0 0; font-size: 13px; color: #b3261e; font-weight: 600; }
.ha-field-error:empty { display: none; }
.ha-modal .ha-invalid { border-color: #b3261e; border-width: 2px; }

/* Bill rows: label and working on the left, amount held right */
.ha-bill-label { display: block; }
.ha-bill-amount { white-space: nowrap; padding-left: 12px; }
.ha-bill-calc {
	display: block; margin-top: 3px; font-weight: 400; font-size: 12px;
	line-height: 1.4; color: #5f5f5f;
}

/* "No money is taken today" — the reassurance that matters most */
.ha-reassure {
	margin: 0 0 18px; padding: 12px 14px; border-radius: 8px;
	background: #eef7ee; border-left: 4px solid #2e7d32;
	font-size: 14px; line-height: 1.5; color: #1c1c1c;
}

@media (max-width: 560px) {

	#ha-modal-root .ha-modal__title { font-size: 19px; }
}


/* ── v2.17.0: terms subheadings, contact fallback, discard confirmation ── */

/* Terms grouped under short subheadings so eight dense clauses become
   scannable. The owner's saved terms supply the <h4> elements; wp_kses_post
   already permits them. */
.ha-terms h4 {
	margin: 20px 0 6px; font-size: 15px; font-weight: 700;
	color: #1c1c1c; line-height: 1.3;
}
.ha-terms > *:first-child { margin-top: 0; }
.ha-terms h4 + ul { margin-top: 0; }

/* Contact route when card payments are unavailable. */
.ha-contact {
	margin: 4px 0 12px; padding: 14px 16px; border-radius: 8px;
	background: #f4f1ea; border-left: 4px solid #6b5210;
	font-size: 15px; line-height: 1.5; color: #1c1c1c;
}
.ha-contact p { margin: 0 0 10px; }
.ha-contact ul { margin: 0; padding-left: 0; list-style: none; }
.ha-contact li { margin-bottom: 6px; }
.ha-contact li:last-child { margin-bottom: 0; }
.ha-contact a { color: #5c4708; font-weight: 700; }

/* Discard confirmation — an in-page dialog rather than window.confirm(), so
   it stays visible to automated browser agents (see 2.13.2). */
.ha-confirm {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(5,5,8,.6);
}
.ha-confirm__box {
	background: #fff; color: #1c1c1c; border-radius: 14px;
	width: min(420px, 100%); padding: 24px 22px;
	box-shadow: 0 18px 60px rgba(0,0,0,.5);
	font-size: 16px; line-height: 1.5;
}
.ha-confirm__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.ha-confirm__text { margin: 0 0 18px; font-size: 15px; color: #3a3a3a; }
.ha-confirm__actions { display: flex; flex-direction: column; gap: 10px; }
.ha-confirm .ha-btn--full { margin-top: 0; }
.ha-confirm :focus-visible { outline: 3px solid #2f7ff7; outline-offset: 2px; border-radius: 4px; }
.ha-btn--danger { background: #a3201a; color: #fff; }
#ha-modal-root .ha-btn--danger:hover { background: #8c1b16; color: #fff; }
#ha-modal-root .ha-btn--danger:focus,
#ha-modal-root .ha-btn--danger:focus-visible,
#ha-modal-root .ha-btn--danger:active { color: #fff; }

/* ── Payment confirmation page ([howff_payment_confirmation]) ──────────
   The block previously shipped with no styles at all and simply inherited
   the theme. Everything is centred here, heading included, and the heading
   is forced to #ffffff for a dark page background.

   The class is doubled in the selectors below (.ha-confirmation.ha-confirmation)
   purely to raise specificity above typical theme rules such as
   `.entry-content h2`, which would otherwise win on source order. It is a
   deliberate trick, not a typo, and it avoids needing !important. */
.ha-confirmation {
	text-align: center;
}
.ha-confirmation.ha-confirmation h2 {
	color: #ffffff;
	text-align: center;
}
.ha-confirmation.ha-confirmation p {
	text-align: center;
}

/* dd carries a browser-default margin-left, which would sit the reference and
   amount off-centre even with text-align applied. */
.ha-confirmation__details {
	text-align: center;
	margin: 1.5em 0 0;
	padding: 0;
}
.ha-confirmation.ha-confirmation .ha-confirmation__details dt {
	margin: 1em 0 .15em;
	padding: 0;
	font-weight: 700;
	text-align: center;
}
.ha-confirmation.ha-confirmation .ha-confirmation__details dd {
	margin: 0;
	padding: 0;
	text-align: center;
}