/* Ghan House — restaurant reservations (Lough design)
 *
 * Two surfaces:
 *   1. The small widget forms (.gh-reserve) inside .avail and .book-card.
 *      Reuses the existing .avail-fields / .book-fields / .lab / .val
 *      shells from assets/home.css and assets/single-room.css; only adds
 *      the 3-column grid override and the time <select> tweaks.
 *
 *   2. The full plugin form (.rtb-booking-form) when wrapped by
 *      .gh-reservations on the /reservations/ page. All overrides are
 *      scoped to .gh-reservations so the plugin's own styling on any
 *      other page (admin previews, etc.) is untouched.
 */

/* -------------------------------------------------------------
 * 1. Widget styling (self-contained for .gh-reserve variants)
 *
 * Mirrors the room-widget .avail and .book-card styling from
 * assets/home.css and assets/single-room.css, but scoped to
 * .gh-reserve so it works on any Lough page (dining hero,
 * reservation-card pages) without needing home.css / single-room.css.
 * ------------------------------------------------------------- */

/* ---- .avail.gh-reserve (in-hero widget) ---- */

body.gh-lough .avail.gh-reserve {
	margin-top: clamp(36px, 6vh, 64px);
	width: min(720px, 100%);
	background: var(--cream, #f5f0e8);
	color: var(--navy-deep, #14181f);
	box-shadow: 0 30px 80px -30px rgba(0,0,0,.45);
	padding: 26px 40px 32px;
	text-align: left;
}

body.gh-lough .avail.gh-reserve .avail-head {
	text-align: center;
	font-family: var(--sans);
	font-size: var(--elevenpx, 11px);
	font-weight: 500;
	letter-spacing: .36em;
	text-transform: uppercase;
	color: var(--stone-dark);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 18px;
}

body.gh-lough .avail.gh-reserve .avail-fields {
	display: grid;
	grid-template-columns: 1.4fr .8fr 1fr;
	gap: 20px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 22px;
}

body.gh-lough .avail.gh-reserve .avail-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
}

body.gh-lough .avail.gh-reserve .avail-field .lab {
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--gold);
}

body.gh-lough .avail.gh-reserve .avail-field .val {
	font-family: var(--serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.1;
	color: var(--navy-deep);
	background: transparent;
	border: 0;
	padding: 0;
	width: 100%;
	cursor: pointer;
}

body.gh-lough .avail.gh-reserve .avail-field input.val {
	font-family: var(--sans);
	font-style: normal;
	font-size: 17px;
}

body.gh-lough .avail.gh-reserve .avail-field select.val {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

body.gh-lough .avail.gh-reserve .avail-field .val:focus {
	outline: 2px solid var(--gold);
	outline-offset: 4px;
}

body.gh-lough .avail.gh-reserve .avail-cta {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 54px;
	background: var(--navy-deep);
	color: var(--cream);
	font-family: var(--sans);
	font-size: 12px; font-weight: 600;
	letter-spacing: .32em; text-transform: uppercase;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s;
}

body.gh-lough .avail.gh-reserve .avail-foot {
	margin-top: 14px;
	text-align: center;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--stone-dark);
}

body.gh-lough .avail.gh-reserve .avail-foot a {
	color: var(--navy-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

body.gh-lough .avail.gh-reserve .avail-foot a:hover { color: var(--gold); }

@media (max-width: 720px) {
	body.gh-lough .avail.gh-reserve .avail-fields {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ---- .book-card.gh-reserve (standalone aside) ---- */

body.gh-lough .book-card.gh-reserve {
	background: var(--navy-deep, #14181f);
	color: var(--cream, #f5f0e8);
	padding: 28px 30px 32px;
	max-width: 360px;
	box-shadow: 0 30px 80px -30px rgba(0,0,0,.45);
}

body.gh-lough .book-card.gh-reserve .rate {
	font-family: var(--serif);
	font-style: italic;
	font-size: 28px;
	color: var(--cream);
	margin: 0 0 8px;
}

body.gh-lough .book-card.gh-reserve .rate-note {
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.5;
	color: rgba(245,240,232,.7);
	margin: 0;
}

body.gh-lough .book-card.gh-reserve hr {
	border: 0;
	border-top: 1px solid rgba(245,240,232,.18);
	margin: 22px 0;
}

body.gh-lough .book-card.gh-reserve .book-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.gh-lough .book-card.gh-reserve .book-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
}

body.gh-lough .book-card.gh-reserve .book-field .lab {
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--gold);
}

body.gh-lough .book-card.gh-reserve .book-field .val {
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.2;
	color: var(--cream);
	background: transparent;
	border: 0;
	padding: 0;
	width: 100%;
	cursor: pointer;
}

body.gh-lough .book-card.gh-reserve .book-field input.val {
	font-family: var(--sans);
	font-style: normal;
	font-size: 14px;
	color-scheme: dark;
}

body.gh-lough .book-card.gh-reserve .book-field select.val {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

body.gh-lough .book-card.gh-reserve .book-field .val:focus {
	outline: 2px solid var(--cream);
	outline-offset: 4px;
}

body.gh-lough .book-card.gh-reserve .book-cta {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 50px;
	margin-top: 22px;
	background: var(--cream, #f5f0e8);
	color: var(--navy-deep, #14181f);
	font-family: var(--sans);
	font-size: 12px; font-weight: 600;
	letter-spacing: .32em; text-transform: uppercase;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s;
}

body.gh-lough .book-card.gh-reserve .book-foot {
	margin-top: 16px;
	font-family: var(--sans);
	font-size: 12px;
	line-height: 1.5;
	color: rgba(245,240,232,.7);
	text-align: center;
}

body.gh-lough .book-card.gh-reserve .book-foot a {
	color: var(--cream);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.gh-lough .book-card.gh-reserve .book-foot a:hover { color: var(--gold); }

/* -------------------------------------------------------------
 * 2. Plugin form overrides (only inside .gh-reservations)
 * ------------------------------------------------------------- */

.gh-reservations {
	padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 40px);
	background: var(--cream, #f5efe6);
	color: var(--stone-dark, #2a2622);
}

.gh-reservations-inner {
	max-width: 760px;
	margin: 0 auto;
}

.gh-reservations .kicker {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--gold, #b08a3e);
	margin: 0 0 14px;
}

.gh-reservations h2.display {
	font-family: var(--serif);
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.05;
	color: var(--navy-deep, #0e1d2f);
	margin: 0 0 24px;
}

.gh-reservations .gh-reservations-intro {
	font-size: 17px;
	line-height: 1.55;
	max-width: 56ch;
	margin: 0 0 36px;
}

.gh-reservations .gh-reservations-form {
	margin-top: 16px;
}

/* Reset the plugin's 100%-but-max-15em width and let inputs breathe. */
.gh-reservations .rtb-booking-form input,
.gh-reservations .rtb-booking-form select,
.gh-reservations .rtb-booking-form textarea {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--sans);
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--rule, #d8cfc1);
	background: #fff;
	color: var(--stone-dark);
	border-radius: 0;
}

.gh-reservations .rtb-booking-form input[type="checkbox"],
.gh-reservations .rtb-booking-form input[type="radio"] {
	width: auto;
	padding: 0;
	border: 0;
}

.gh-reservations .rtb-booking-form input:focus,
.gh-reservations .rtb-booking-form select:focus,
.gh-reservations .rtb-booking-form textarea:focus {
	outline: 2px solid var(--gold, #b08a3e);
	outline-offset: 2px;
	border-color: var(--gold, #b08a3e);
}

.gh-reservations .rtb-booking-form label {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gold, #b08a3e);
	margin-bottom: 6px;
}

/* Restore default-block layout for inline checkbox labels (privacy, mailchimp).
   The consent + mailing-list fieldsets wrap their checkbox in a plain
   <label> rather than the .rtb-checkbox markup, so they need naming
   too — otherwise the privacy wording renders as gold uppercase, which
   reads as a section heading instead of the consent line it is. */
.gh-reservations .rtb-booking-form label.rtb-checkbox-label,
.gh-reservations .rtb-booking-form .rtb-checkbox label,
.gh-reservations .rtb-booking-form fieldset.rtb-checkbox label,
.gh-reservations .rtb-booking-form fieldset.consent label,
.gh-reservations .rtb-booking-form fieldset.optin label {
	display: inline-block;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--stone-dark);
}

.gh-reservations .rtb-booking-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 28px;
}

.gh-reservations .rtb-booking-form legend {
	font-family: var(--serif);
	font-size: 22px;
	color: var(--navy-deep);
	padding: 0 0 12px;
	margin: 0;
	border-bottom: 1px solid var(--rule, #d8cfc1);
	margin-bottom: 18px;
	width: 100%;
}

.gh-reservations .rtb-booking-form fieldset > div {
	margin-top: 18px;
}

/* Submit button styled as Lough primary button. */
.gh-reservations .rtb-form-submit {
	margin-top: 12px;
}

.gh-reservations .rtb-booking-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: 54px;
	padding: 0 32px;
	background: var(--navy-deep, #0e1d2f);
	color: var(--cream, #f5efe6);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition: background .2s;
}

.gh-reservations .rtb-booking-form button[type="submit"]:hover {
	background: var(--gold, #b08a3e);
}

.gh-reservations .rtb-booking-form button[type="submit"]:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* Error pill — keep its semantics but match Lough palette. */
.gh-reservations .rtb-booking-form .rtb-error {
	background: #b03a2e;
	color: #fff;
	font-family: var(--sans);
	font-size: 12px;
	padding: 6px 10px;
	margin-top: 6px;
	letter-spacing: .04em;
}

/* View / Cancel toggle — a quiet text link, not a button. The plugin
   ships it as a dark grey pill (float:left, background:#444, padding,
   radius), which swallows the gold underline below and reads as a
   primary action it isn't; reset all four. */
.gh-reservations .rtb-modification-toggle {
	display: inline-block;
	float: none;
	background: none;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gold, #b08a3e);
	cursor: pointer;
	margin-bottom: 24px;
	padding: 0 0 4px;
	border-bottom: 1px solid var(--gold, #b08a3e);
}

.gh-reservations .rtb-modification-toggle:hover {
	color: var(--navy-deep, #0e1d2f);
	border-bottom-color: var(--navy-deep, #0e1d2f);
}

.gh-reservations .rtb-modification-form {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--rule, #d8cfc1);
	margin-bottom: 32px;
}

/* Look-up form layout. The plugin floats label[for="rtb_modification_email"]
   and input[name="rtb_modification_email"] left — but the input sits INSIDE
   that label, so the pair collapses onto itself, the un-floated
   modification-code row below it stretches full width, and the floated
   Find button drops out through the bottom of the panel (nothing clears).
   Take the layout over with a two-column grid instead.

   Scoped :not(.rtb-hidden) on purpose: .rtb-hidden (display:none) is how
   the plugin toggles between this form and the booking form, and a bare
   display:grid here would out-specify it and pin the look-up form open. */
.gh-reservations .rtb-modification-form:not(.rtb-hidden) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	align-items: end;
}

/* Intro line, button row and results span both columns; the two labels
   are the only non-div children, so they fall into the columns. */
.gh-reservations .rtb-modification-form > div {
	grid-column: 1 / -1;
}

.gh-reservations .rtb-modification-form label {
	float: none;
	margin: 0;
}

.gh-reservations .rtb-modification-form input {
	float: none;
	margin-top: 6px;
}

.gh-reservations .rtb-find-reservation-button-div {
	margin-top: 4px;
}

.gh-reservations .rtb-bookings-results {
	float: none;
	width: auto;
}

/* Results land here via AJAX; until then it's an empty div holding open
   a grid row of dead space under the Find button. */
.gh-reservations .rtb-bookings-results:empty {
	display: none;
}

/* Result rows. Cancel stays red — it destroys a booking — but takes the
   same brick the .rtb-error pill above uses rather than the plugin's
   #fe4e4e, which is the one saturated colour in an otherwise very
   restrained palette. */
.gh-reservations .rtb-cancel-booking-div {
	border-color: var(--rule, #d8cfc1);
	display: flex;
	align-items: stretch;
	gap: 0;
}

/* The plugin pins this to 100px via min-width AND max-width, which the
   uppercase tracking below overflows — "CANCEL" breaks to a second line.
   All three have to be released, not just width. */
.gh-reservations .rtb-cancel-booking {
	min-width: 0;
	max-width: none;
	background: #b03a2e;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 12px 20px;
	cursor: pointer;
	width: auto;
	flex: 0 0 auto;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

/* Undo the plugin's -5px nudge, which was compensating for the
   inline-block whitespace gap the flex row no longer has. */
.gh-reservations .rtb-cancel-booking-div > *:not(:first-child) {
	margin-left: 0;
}

.gh-reservations .rtb-booking-information {
	flex: 1 1 auto;
	padding: 12px 16px;
	align-self: center;
}

.gh-reservations .rtb-cancel-booking:hover {
	background: #933025;
}

/* Post-cancellation state. The plugin flips this to #24b124, the one
   pure hue in an otherwise muted palette; a desaturated forest still
   reads as "done" without shouting. Note the details text beside it
   keeps saying "(Confirmed)" — the plugin doesn't re-render the row
   after cancelling, so that's upstream, not ours. */
.gh-reservations .rtb-cancel-booking.cancelled {
	background: #4a7c59;
	cursor: default;
}

.gh-reservations .rtb-cancel-booking.cancelled:hover {
	background: #4a7c59;
}

@media (max-width: 560px) {
	.gh-reservations .rtb-modification-form:not(.rtb-hidden) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gh-reservations .rtb-find-reservation-button {
	display: inline-block;
	float: none;
	margin-top: 0;
	padding: 12px 24px;
	background: var(--navy-deep, #0e1d2f);
	color: var(--cream, #f5efe6);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase;
	cursor: pointer;
}

.gh-reservations .rtb-find-reservation-button:hover {
	background: var(--gold, #b08a3e);
}

.gh-reservations .rtb-message {
	padding: 18px 22px;
	background: #fff;
	border-left: 4px solid var(--gold, #b08a3e);
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 24px;
}

.gh-reservations-foot {
	margin-top: 32px;
}

.gh-reservations-intro a,
.gh-reservations-foot a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--gold, #b08a3e);
	padding-bottom: 1px;
}

.gh-reservations-intro a:hover,
.gh-reservations-foot a:hover {
	color: var(--gold, #b08a3e);
}

/* The plugin always prints a `rtb-contact` fieldset for the logged-in
   contact fields. With no such fields configured it renders as a bare
   "Contact Details" legend with nothing under it. Guarded with :has()
   so it only ever hides the genuinely empty case. */
.gh-reservations .rtb-booking-form fieldset.rtb-contact:not(:has(> div)) {
	display: none;
}

/* The "add-message" reveal link is dead in this configuration: the
   plugin's built-in `message` field is disabled (see the
   cffrtb_modified_fields option) and its JS toggles a `.message`
   element that is therefore never rendered, while the custom dietary
   textarea that replaced it is always visible. Clicking it only makes
   it disappear. Untick it under Reservations → Fields to remove it at
   source; hidden here so it doesn't dangle under the notes box. */
.gh-reservations .rtb-booking-form .add-message {
	display: none;
}

/* -------------------------------------------------------------
 * 3. Wide variant (.is-wide) — the form dropped inline on a
 *    content page (Dine) rather than owning its own page. Spans
 *    the normal --max container and lays the fields out in rows
 *    of three so it reads as a band across the page.
 *
 *    Sits between .sec.intro (cream) above and .rooms-sec
 *    (cream-warm) below on Dine, so it takes cream-warm plus a
 *    hairline rule to keep the two bands distinct.
 * ------------------------------------------------------------- */

.gh-reservations.is-wide {
	background: var(--cream-warm, #efe7db);
	border-bottom: 1px solid var(--rule, #d8cfc1);
	padding: clamp(56px, 7vw, 88px) 32px;
}

.gh-reservations.is-wide .gh-reservations-inner {
	max-width: var(--max, 1240px);
}

/* Header sits centred over a full-width form. */
.gh-reservations.is-wide .kicker,
.gh-reservations.is-wide h2.display,
.gh-reservations.is-wide .gh-reservations-intro,
.gh-reservations.is-wide .gh-reservations-foot {
	text-align: center;
}

/* .kicker is a flex row with a leading rule — centring it needs
   justify-content plus a matching trailing rule, the same treatment
   .kicker.center gets in shared.css. */
.gh-reservations.is-wide .kicker {
	justify-content: center;
}

.gh-reservations.is-wide .kicker::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--stone, #b6ac9c);
}

/* h2.display carries max-width:22ch from shared.css, which reads as
   off-centre once the copy is centred over a full-width form. */
.gh-reservations.is-wide h2.display {
	font-size: clamp(30px, 3.6vw, 44px);
	max-width: 26ch;
	margin-left: auto;
	margin-right: auto;
}

.gh-reservations.is-wide .gh-reservations-intro,
.gh-reservations.is-wide .gh-reservations-foot {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}

/* View/Cancel is secondary here — tuck it to the right of the form,
   above the first legend. Margin-auto rather than float so it doesn't
   drag the "Book a table" legend up alongside it. */
.gh-reservations.is-wide .rtb-modification-toggle {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-bottom: 12px;
}

/* Field rows. `legend` is not a grid item in any current browser — it
   renders above the box — so gridding the fieldset lays out only the
   field divs, which is what we want. */
.gh-reservations.is-wide .rtb-booking-form fieldset.reservation,
.gh-reservations.is-wide .rtb-booking-form fieldset.contact {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px 24px;
	margin-bottom: 24px;
}

.gh-reservations.is-wide .rtb-booking-form fieldset > div {
	margin-top: 0;
}

/* Notes + its reveal link run the full width under the three columns. */
.gh-reservations.is-wide .rtb-booking-form .rtb-textarea,
.gh-reservations.is-wide .rtb-booking-form .add-message {
	grid-column: 1 / -1;
}

.gh-reservations.is-wide .rtb-booking-form textarea {
	min-height: 96px;
}

/* Consent, opt-in and submit stay full width; tighten the stack so the
   band doesn't run too tall. */
.gh-reservations.is-wide .rtb-booking-form fieldset.consent,
.gh-reservations.is-wide .rtb-booking-form fieldset.optin {
	margin-bottom: 12px;
}

.gh-reservations.is-wide .rtb-booking-form fieldset.rtb-form-footer {
	margin-bottom: 0;
	text-align: center;
}

.gh-reservations.is-wide .rtb-form-submit {
	margin-top: 20px;
}

.gh-reservations.is-wide .rtb-booking-form fieldset.consent,
.gh-reservations.is-wide .rtb-booking-form fieldset.optin {
	text-align: center;
}

@media (max-width: 860px) {
	.gh-reservations.is-wide .rtb-booking-form fieldset.reservation,
	.gh-reservations.is-wide .rtb-booking-form fieldset.contact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.gh-reservations.is-wide .rtb-booking-form fieldset.reservation,
	.gh-reservations.is-wide .rtb-booking-form fieldset.contact {
		grid-template-columns: minmax(0, 1fr);
	}
	.gh-reservations.is-wide .rtb-modification-toggle {
		margin-left: 0;
	}
}