/*
 * Reserve popup.
 *
 * Uses the site's own tokens so the dialog reads as part of White Hall
 * rather than a bolted-on widget. Nothing here is loaded on a page that
 * cannot open it — see wmr_assets().
 */

.wmr[hidden] { display: none; }

.wmr {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.wmr__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

.wmr__dialog {
	position: relative;
	background: #fff;
	border-radius: var(--whs-radius, 4px);
	width: min(440px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 30px 28px 26px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
	animation: wmr-in .18s ease-out;
}

@keyframes wmr-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* Respect a stated preference for less motion. */
@media (prefers-reduced-motion: reduce) {
	.wmr__dialog { animation: none; }
}

.wmr__x {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: var(--whs-grey-mid, #6c757d);
	cursor: pointer;
	padding: 4px 8px;
}
.wmr__x:hover { color: var(--whs-ink, #212529); }

.wmr h2 {
	margin: 0 0 6px;
	font-size: 22px;
	color: var(--whs-green, #0d6237);
}

.wmr__sub {
	margin: 0 0 18px;
	font-size: 14.5px;
	color: var(--whs-grey-mid, #6c757d);
	line-height: 1.5;
}

.wmr label {
	display: block;
	margin-bottom: 13px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--whs-ink, #212529);
}

.wmr input {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 11px 12px;
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	border: 1px solid var(--whs-grey, #e6e6e6);
	border-radius: var(--whs-radius, 4px);
	box-sizing: border-box;
}
.wmr input:focus {
	outline: 2px solid var(--whs-green, #0d6237);
	outline-offset: 1px;
	border-color: var(--whs-green, #0d6237);
}

/* Where the customer is in the rental: one bar per stage, filled up to here.
   Borrowed from the shape Pineview uses -- a strip reads at a glance where a
   "Step 2 of 4" has to be parsed. Decorative and aria-hidden; each step still
   announces itself with its own heading. */
.wmr__stepbar {
	display: flex;
	/* The theme sets flex-wrap:wrap broadly; without this the last bar drops
	   onto a row of its own and reads as a stray rule under the strip. */
	flex-wrap: nowrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 18px;
	/* Clear the close button, which is absolutely positioned over this corner. */
	padding: 0 34px 0 0;
}
.wmr__stepbar li {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: var(--whs-grey, #e6e6e6);
	transition: background-color .18s ease;
}
.wmr__stepbar li.is-on { background: var(--whs-green, #0d6237); }
/* An author `display` beats the UA rule behind the `hidden` attribute, so
   without this the strip and the Back button render on steps that hid them.
   Attribute selector, so it outranks the class rule above. */
.wmr__stepbar[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.wmr__stepbar li { transition: none; }
}

/*
 * One box for the size, sized to match the buttons it replaced (Brandon,
 * 4 Sept). Same padding, border and radius as the option cards were, and a
 * min-height so it holds the same space in the dialog rather than collapsing
 * to a thin field. The native arrow stays: a select that does not look like
 * one is a select people do not open.
 */
.wmr__picklabel { display: block; margin-bottom: 14px; }
.wmr__pickselect {
	display: block;
	width: 100%;
	min-height: 56px;
	margin-top: 6px;
	padding: 13px 15px;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: var(--whs-ink, #212529);
	background: #fff;
	border: 1px solid var(--whs-grey, #e6e6e6);
	border-radius: var(--whs-radius, 4px);
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.wmr__pickselect:hover { border-color: var(--whs-green, #0d6237); }
.wmr__pickselect:focus {
	outline: 2px solid var(--whs-green, #0d6237);
	outline-offset: 1px;
	border-color: var(--whs-green, #0d6237);
}

/* Back to the sizes. Quiet, and above the heading rather than below the form:
   it is a way out, not the thing to do next. Deliberately not .wmr__back --
   that class and its data-wmr-back hook belong to "Use a different email" on
   the code step, and this sits in a different place. */
.wmr__backsize {
	display: inline-block;
	margin: 0 0 10px;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--whs-green, #0d6237);
	background: none;
	border: 0;
	cursor: pointer;
}
.wmr__backsize:hover { text-decoration: underline; }
.wmr__backsize[hidden] { display: none; }

/* The size dropdown on step 0, for a "Rent Now" that named no size. Matches
   the text inputs above rather than inventing a second field style; the
   native arrow is kept, because a select that does not look like one is a
   select people do not open. */
.wmr select {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 11px 12px;
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--whs-ink, #212529);
	background: #fff;
	border: 1px solid var(--whs-grey, #e6e6e6);
	border-radius: var(--whs-radius, 4px);
	box-sizing: border-box;
}
.wmr select:focus {
	outline: 2px solid var(--whs-green, #0d6237);
	outline-offset: 1px;
	border-color: var(--whs-green, #0d6237);
}

/* The code field is six characters and deserves to look like it. */
.wmr [name="code"] {
	font-size: 26px;
	letter-spacing: .35em;
	text-align: center;
	padding: 14px 12px;
}

.wmr__hint {
	margin: -4px 0 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--whs-grey-mid, #6c757d);
	background: var(--whs-bg-soft, #f8f9fa);
	border-left: 3px solid var(--whs-green, #0d6237);
	padding: 10px 12px;
}
.wmr__hint[hidden] { display: none; }

/* Off-screen rather than display:none — some bots skip hidden fields. */
.wmr__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wmr__turnstile { margin: 4px 0 14px; min-height: 65px; }

.wmr__error {
	margin: 0 0 14px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.45;
	color: #7a1c1c;
	background: #fdf0f0;
	border-left: 3px solid #b02a2a;
}
.wmr__error[hidden] { display: none; }

.wmr__go {
	display: block;
	width: 100%;
	background: var(--whs-green, #0d6237);
	color: #fff;
	border: 2px solid var(--whs-green, #0d6237);
	padding: 13px 26px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	border-radius: var(--whs-btn-radius, 999px);
	cursor: pointer;
	transition: background .18s ease;
}
/* The continue control is a link styled as the button; the theme's link
   colour must not win over the white text, hovered or not. */
.whs a.wmr__go, a.wmr__go, a.wmr__go:visited { color: #fff; text-decoration: none; text-align: center; box-sizing: border-box; }
.whs a.wmr__go:hover, .whs a.wmr__go:focus { color: #fff; }
.wmr__go:hover:not(:disabled) { background: var(--whs-green-dark, #094428); border-color: var(--whs-green-dark, #094428); }
.wmr__go:disabled { opacity: .6; cursor: default; }

.wmr__back {
	display: block;
	width: 100%;
	margin-top: 10px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13.5px;
	color: var(--whs-grey-mid, #6c757d);
	text-decoration: underline;
	cursor: pointer;
	padding: 8px;
}

.wmr__ref {
	margin: 16px 0 18px;
	font-size: 13px;
	color: var(--whs-grey-mid, #6c757d);
}
.wmr__ref strong { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.wmr__step[hidden] { display: none; }

/* Move-in cost, on the confirmation step ---------------------------------- */

.wmr__quote {
	margin: 18px 0;
	padding: 16px 16px 12px;
	background: var(--whs-bg-soft, #f8f9fa);
	border-radius: var(--whs-radius, 4px);
}
.wmr__quote[hidden] { display: none; }

.wmr__quote h3 {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--whs-grey-mid, #6c757d);
}

.wmr__quote ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
}
.wmr__quote li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
}

.wmr__quote-total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--whs-grey, #e6e6e6);
	font-size: 16px;
}
.wmr__quote-total strong { color: var(--whs-green, #0d6237); }

.wmr__quote-note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--whs-grey-mid, #6c757d);
}

/* Straight on to signing ---------------------------------------------------
   The confirmation is not an end state: if they sign and pay there is
   nothing for anyone at the office to confirm, so the next step gets the
   weight and Close becomes the quiet option. */

.wmr__next { margin: 4px 0 16px; }
.wmr__next[hidden] { display: none; }

.wmr__next-note {
	margin: 9px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--whs-grey-mid, #6c757d);
	text-align: center;
}

.wmr__go--quiet {
	background: transparent;
	color: var(--whs-grey-mid, #6c757d);
	border-color: transparent;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	font-size: 14px;
	padding: 8px;
}
.wmr__go--quiet:hover:not(:disabled) {
	background: transparent;
	border-color: transparent;
	color: var(--whs-ink, #212529);
	text-decoration: underline;
}

/* The three steps to a working gate code ---------------------------------- */

.wmr__steps {
	list-style: none;
	margin: 16px 0;
	padding: 0;
	counter-reset: none;
}
.wmr__steps[hidden] { display: none; }

.wmr__steps li {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 4px 11px;
	align-items: start;
	padding: 9px 0;
	border-bottom: 1px solid var(--whs-grey, #e6e6e6);
}
.wmr__steps li:last-child { border-bottom: 0; }

.wmr__steps span {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--whs-green, #0d6237);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.wmr__steps strong { font-size: 15px; }
.wmr__steps em {
	font-style: normal;
	font-size: 13px;
	color: var(--whs-grey-mid, #6c757d);
}
.wmr__steps em:empty { display: none; }

/* Warning carried in from the size calculator ------------------------------ */
.wmr__warn {
	margin: -8px 0 14px;
	padding: 9px 12px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #7a1c1c;
	background: #fdf0f0;
	border-left: 3px solid #b02a2a;
}
.wmr__warn[hidden] { display: none; }

/* Move-in pages (/?wmr_movein=…) -------------------------------------- */
.wmr-movein .wmr__error { margin-bottom: 18px; }
.wmr__progress {
	display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 26px; padding: 0;
	counter-reset: none;
}
.wmr__progress li { flex: 1 1 120px; }
.wmr__progress li > a, .wmr__progress li > span {
	display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--whs-btn-radius, 16px);
	border: 1px solid var(--whs-grey, #e6e6e6); background: #fff; color: var(--whs-grey-mid, #6c757d);
	font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.wmr__progress li > a:hover { border-color: var(--whs-green, #0d6237); }
.wmr__progress i {
	display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
	background: var(--whs-grey, #e6e6e6); color: var(--whs-ink, #212529); font-style: normal; font-size: 12px; flex: none;
}
.wmr__progress .is-done > a, .wmr__progress .is-done > span { color: var(--whs-ink, #212529); }
.wmr__progress .is-done i { background: var(--whs-green, #0d6237); color: #fff; }
.wmr__progress .is-current > span { background: var(--whs-green, #0d6237); border-color: var(--whs-green, #0d6237); color: #fff; }
.wmr__progress .is-current i { background: rgba(255,255,255,.25); color: #fff; }

.wmr__checkout h2 { margin-top: 6px; }
.wmr__checkout h3 { margin: 22px 0 6px; font-size: 17px; }
.wmr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.wmr__grid label { display: block; font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.wmr__grid input, .wmr__grid select {
	display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--whs-grey, #e6e6e6);
	border-radius: var(--whs-radius, 4px); font: inherit; font-weight: 400; background: #fff;
}
.wmr__grid input:focus, .wmr__grid select:focus { outline: none; border-color: var(--whs-green, #0d6237); box-shadow: 0 0 0 3px rgba(13,98,55,.15); }
.wmr__grid .wmr__span { grid-column: 1 / -1; }
.wmr__opt--check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 10px 0 14px; }
.wmr__opt--check input { margin-top: 4px; accent-color: var(--whs-green, #0d6237); }
.wmr__checkout .whs-btn { margin-top: 12px; }
.wmr__checkout .whs-btn + .whs-btn { margin-left: 10px; }
@media (max-width: 560px) {
	.wmr__grid { grid-template-columns: 1fr; }
	.wmr__progress li > a, .wmr__progress li > span { font-size: 12.5px; padding: 8px 10px; }
}

/* The move-in framed inside the popup ---------------------------------- */
.wmr__dialog--wide { width: min(780px, 100%); padding: 0; }
.wmr__dialog--wide .wmr__x { z-index: 2; background: #fff; border-radius: 50%; }
.wmr__step--embed { padding: 0; }
.wmr__frame { display: block; width: 100%; height: min(82vh, 920px); border: 0; border-radius: var(--whs-radius, 4px); background: #fff; }
/* Inside the frame: the page without the site's header and footer. */
body.wmr-embed { background: #fff; }
/*
 * Chrome that belongs to a page, not to a dialog. Inside the frame the parent
 * theme's scroll-to-top and any skip link are furniture for a window the
 * customer is not looking at, and the scroll-to-top in particular rendered as
 * a stray chevron under the pay form.
 */
body.wmr-embed .ast-scroll-top-icon,
body.wmr-embed #ast-scroll-top,
body.wmr-embed .ast-scroll-to-top-wrap,
body.wmr-embed .skip-link { display: none !important; }
/* The strip sits above the heading in the framed pages, with the same rhythm
   as the popup's own. */
body.wmr-embed .wmr__stepbar { margin-bottom: 20px; }
body.wmr-embed .whs-section { padding: 22px 0 28px; }
body.wmr-embed .wrap { padding-inline: 24px; }
body.wmr-embed .whs-section__head { text-align: left; margin-bottom: 14px; }
body.wmr-embed .whs-section__head h1 { font-size: 24px; }
@media (max-width: 640px) {
	.wmr__frame { height: calc(100vh - 40px); }
}

/* My account (mu-plugin's built-in markup): a notice, and payment rows. */
.wmr__notice { background: #eef7ee; border: 1px solid #b7dcb7; color: #1e5a1e; padding: 10px 12px; border-radius: var(--whs-radius, 4px); margin-bottom: 14px; }
.wmr__ledger { margin-bottom: 18px; }
.wmr__ledger h4 { margin: 12px 0 6px; font-size: 14px; }
.wmr__payments li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.wmr__account-pay, .wmr__account-signout { margin-top: 12px; }

/* Sign-in, pay-online and code forms (mu-plugin markup) ------------------
   One column, label above field, field full width, the button on its own
   line — the same rhythm as the resume page and the popup. */
.wmr__account, .wmr__payonline:not(.wmr__checkout), .wmr__account-password { max-width: 460px; }
.wmr__account label, .wmr__payonline:not(.wmr__checkout) label {
	display: block; margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--whs-ink, #212529);
}
.wmr__account input, .wmr__payonline:not(.wmr__checkout) input {
	display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; font-weight: 400;
	border: 1px solid var(--whs-grey, #e6e6e6); border-radius: var(--whs-radius, 4px); background: #fff; box-sizing: border-box;
}
.wmr__account input:focus, .wmr__payonline:not(.wmr__checkout) input:focus {
	outline: none; border-color: var(--whs-green, #0d6237); box-shadow: 0 0 0 3px rgba(13, 98, 55, .15);
}
.wmr__payonline [name="code"] { font-size: 26px; letter-spacing: .35em; text-align: center; padding: 14px 12px; max-width: 260px; }
.wmr__account .whs-btn, .wmr__payonline .whs-btn, .wmr__account-password .whs-btn, .wmr__account-pay .whs-btn, .wmr__account-signout .whs-btn {
	display: block; width: 100%; max-width: 460px; margin-top: 6px; text-align: center; box-sizing: border-box;
}
.wmr__account .whs-note, .wmr__payonline .whs-note { margin: 14px 0 0; }
.wmr__account .whs-note + .whs-note { margin-top: 8px; }
.wmr-account .wmr__quote h3, .wmr-payonline .wmr__quote h3 { font-size: 12px; }

/* Buttons that follow a form never sit beside a field: each on its own line. */
.wmr__checkout .whs-btn { display: block; width: 100%; max-width: 460px; text-align: center; box-sizing: border-box; }
.wmr__checkout .whs-btn + .whs-btn { margin-left: 0; margin-top: 10px; }
.wmr__checkout .whs-btn + .whs-note, .wmr__checkout .whs-btn + p { margin-top: 12px; }

/* The text-message opt-in belongs under its number, not boxed beside it. */
.wmr__grid .wmr__opt--check { grid-column: 1 / -1; margin: 0 0 14px; }
.wmr__grid .wmr__opt--check { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.wmr__grid .wmr__opt--check input { display: inline-block; width: auto; margin: 4px 0 0; }