/**
 * machuca-auth.css — the three steps inside the existing dialog.
 *
 * The shell (backdrop, panel, close, title) is still login-modal.css: this only
 * dresses what goes inside it, so the dialog keeps looking like the dialog the
 * site already had rather than becoming a second one.
 *
 * Colours are the theme's own palette values rather than new ones — primary
 * #013b28, background #faf7f1, border #e6e0d6 — so a change to the palette is
 * not silently contradicted here.
 */

.machuca-auth__lede {
	margin: 0 0 18px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #6b6b6b;
}

.machuca-auth__lede strong {
	color: #1f1f1f;
	font-weight: 600;
}

.machuca-auth__field {
	display: block;
	margin: 0 0 16px;
}

/* `hidden` is a UA rule, and any author rule that sets `display` beats it.
   Giving a field `display: block` therefore un-hides it, which is how the phone
   number appeared on the guest tab: the attribute was set and ignored. Every
   step here is shown and hidden by that attribute, so the exception has to be
   stated once rather than remembered at each call site. */
.machuca-auth [hidden] {
	display: none !important;
}

.machuca-auth__field > span {
	display: block;
	margin: 0 0 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #1f1f1f;
}

/* The boxes of this form, and only them.
 *
 * Written as `.machuca-auth__field input` at first, which is every input inside
 * the label — and once the country library wraps the phone field, that includes
 * the search box inside its dropdown, where our padding beat the library's own
 * and pushed the word "Search" under the magnifying glass. The same mistake was
 * made and fixed on the listing gate's copy of this control; two selectors
 * instead of one, so the field is styled as it ships and after it is wrapped. */
.machuca-auth__field > input,
.machuca-auth__field .iti > input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #e6e0d6;
	border-radius: 10px;
	background: #fff;
	font-size: 1rem;
	color: #1f1f1f;
}

.machuca-auth__field > input:focus,
.machuca-auth__field .iti > input[type="tel"]:focus {
	outline: 2px solid #013b28;
	outline-offset: 1px;
	border-color: #013b28;
}

/* ── The country selector ───────────────────────────────────────────────────
 *
 * The library draws its own control inside the field. Its own stylesheet is
 * fetched beside it, so nothing here restates what that already says: this only
 * stops it fighting the box around it, and answers the theme.
 *
 * The flag button and the little clear cross are real `<button>`s, so the
 * site-wide rule that paints every button green on hover reached them — a green
 * block with white text, inside the field. The library means them to be
 * transparent, so that intent is restated here at a specificity the bare
 * element selector cannot beat, disabled pair included. */
.machuca-auth__field .iti {
	display: block;
	width: 100%;
}

.machuca-auth__field .iti__country-list {
	border-radius: 10px;
	font-size: 0.9rem;
	text-align: left;
}

.machuca-auth__field .iti__selected-country,
.machuca-auth__field .iti__selected-country:hover,
.machuca-auth__field .iti__selected-country:focus-visible,
.machuca-auth__field .iti__selected-country:disabled,
.machuca-auth__field .iti__selected-country:disabled:hover {
	background: none;
	color: inherit;
}

.machuca-auth__field .iti__search-clear,
.machuca-auth__field .iti__search-clear:disabled,
.machuca-auth__field .iti__search-clear:disabled:hover {
	background: transparent;
	color: inherit;
}

.machuca-auth__field .iti__search-clear:hover,
.machuca-auth__field .iti__search-clear:focus-visible {
	background: var(--iti-hover-color, rgba(0, 0, 0, 0.05));
	color: inherit;
}

.machuca-auth__field input.is-invalid {
	border-color: #b9663d;
}

/* The code is read off a screen and typed back, often on a phone. Wide
   tracking and a monospaced face make a six-digit string checkable at a
   glance, which is the difference between one attempt and three. */
.machuca-auth__code input {
	font: 600 1.45rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.4em;
	text-align: center;
	padding-left: 0.4em;
}

.machuca-auth__submit {
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-radius: 999px;
	background: #013b28;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.machuca-auth__submit:hover:not(:disabled) {
	background: #1d5a44;
}

.machuca-auth__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.machuca-auth__quiet {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #6b6b6b;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

/* ── The two links that are buttons ─────────────────────────────────────────
 *
 * "Send another code" and "Forgot it?" are buttons because they do something
 * rather than go somewhere, and the theme paints every button: green with white
 * text on hover, a grey box when disabled. Both are the right answer for a
 * control that looks like a button and the wrong one for these, which are text.
 *
 * Stated here rather than by narrowing the theme rule, which is correct for the
 * hundreds of buttons it was written for. A class beats a bare element
 * selector, so the cascade settles this without `!important`.
 */
.machuca-auth__quiet:hover:not(:disabled),
.machuca-auth__quiet:focus-visible {
	background: none;
	color: #013b28;
	text-decoration: underline;
}

.machuca-auth__quiet:disabled,
.machuca-auth__quiet:disabled:hover {
	opacity: 0.5;
	background: none;
	color: #6b6b6b;
	cursor: default;
	text-decoration: none;
}

.machuca-auth__note {
	margin: 12px 0 0;
	font-size: 0.85rem;
	color: #013b28;
}

/* The two lines of fine print: why the address is being asked for, and what
   pressing the last button agrees to. Quiet by design — they are there to be
   found and read, not to be the loudest thing on a three-field form — but
   deliberately not smaller than the site's smallest readable size, because
   print nobody can read is not disclosure. */
.machuca-auth__fineprint {
	margin: 14px 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: #6b6b6b;
	text-align: center;
}

.machuca-auth__fineprint a {
	color: #013b28;
	text-decoration: underline;
}

/* Centred, like the fine print above it: this box spans the whole dialog and
   holds one short sentence, and a short sentence pinned to the left edge of a
   wide box reads as the start of a paragraph that never comes. */
.machuca-auth__error {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: #f5e8dd;
	color: #8a4527;
	font-size: 0.88rem;
	line-height: 1.45;
	text-align: center;
}

/* ── The Terms, when one is owed ────────────────────────────────────────────
 *
 * The same shape the booking forms use for exactly this question: a bordered
 * box you can click anywhere on, with the tick and the sentence inside it. It
 * is the one consent control on the site, so it looks like itself everywhere.
 */
.machuca-auth__consent {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 16px;
	padding: 14px;
	border: 1px solid #e6e0d6;
	border-radius: 8px;
	background: #fff;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #1f1f1f;
	cursor: pointer;
	transition: border-color 180ms ease-out, background-color 180ms ease-out;
}

.machuca-auth__consent:hover,
.machuca-auth__consent:focus-within {
	border-color: #cfc7b8;
	background: #faf7f1;
}

.machuca-auth__consent input {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #013b28;
	cursor: pointer;
}

.machuca-auth__consent span {
	flex: 1 1 auto;
	min-width: 0;
}

.machuca-auth__consent a {
	color: #013b28;
	text-decoration: underline;
}

/* ── The two sides ──────────────────────────────────────────────────────────
 *
 * The same split pill the header uses for Short stay / Long stay, in the beige
 * rather than the green: it is a choice between two things of equal standing,
 * not a primary action. Guest sits first and starts selected — most people are
 * guests and should not have to touch it — but host is the same size, because
 * on this site a host is not a guest who happens to own a house.
 */

.machuca-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin: 0 0 18px;
	padding: 4px;
	border-radius: 999px;
	background: #faf7f1;
	border: 1px solid #e6e0d6;
}

.machuca-auth__tab {
	padding: 10px 12px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #6b6b6b;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
}

.machuca-auth__tab.is-active {
	background: #fff;
	color: #013b28;
	box-shadow: 0 1px 3px rgba(1, 59, 40, 0.12);
}

/* Same reason as the quiet links: without this the theme's button hover fills
   a tab solid green, which on a two-sided pill reads as the choice having been
   made. The side not chosen lightens towards the one that is; the side already
   chosen does not move, because there is nothing to announce. */
.machuca-auth__tab:hover:not(.is-active),
.machuca-auth__tab:focus-visible:not(.is-active) {
	background: rgba(255, 255, 255, 0.65);
	color: #013b28;
}

.machuca-auth__tab.is-active:hover,
.machuca-auth__tab.is-active:focus-visible {
	background: #fff;
	color: #013b28;
}

/* Under the button now, so the margin is on the other side, and centred: it is
   one short line about the button above it rather than a paragraph to read. */
.machuca-auth__hostnote {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: #e8efeb;
	color: #013b28;
	font-size: 0.86rem;
	line-height: 1.5;
	text-align: center;
}

/* Where the button goes, which is a smaller fact than what listing costs. */
.machuca-auth__hostnote span {
	display: block;
	margin: 2px 0 0;
	font-size: 0.78rem;
	opacity: 0.75;
}

@media (max-width: 420px) {
	.machuca-auth__tab {
		font-size: 0.8rem;
		padding: 10px 8px;
	}
}

/* ── When the dialog is the page ────────────────────────────────────────────
 *
 * /join/ and /login/ still exist as addresses — bookmarked, printed in an old
 * email, sent in a message months ago — and they now open the dialog on
 * arrival. What they must not do is show the form the dialog replaced sitting
 * behind it, which reads as two sign-up forms on one screen.
 *
 * The page keeps its photograph and its title. Only the old form goes, and only
 * for somebody whose browser ran the script that opened the dialog.
 */
.machuca-auth-is-the-page .machuca-auth-page__form > *:not(.machuca-login-modal),
.machuca-auth-is-the-page .wppb-user-forms,
.machuca-auth-is-the-page form.wppb-register-user,
.machuca-auth-is-the-page form#wppb-loginform {
	display: none !important;
}

/* ── The offer to say more ──────────────────────────────────────────────────
 *
 * A link inside a sentence, because it is an invitation and not an instruction.
 * The theme paints every button green on hover, which would turn this into a
 * block in the middle of a line — stated here for the same reason as the other
 * quiet controls in this dialog.
 */
.machuca-auth__link {
	padding: 0;
	border: 0;
	background: none;
	color: #013b28;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.machuca-auth__link:hover,
.machuca-auth__link:focus-visible {
	background: none;
	color: #1d5a44;
	text-decoration: underline;
}

/* Left-aligned, grey, and shaped like something you may open — not like an
   instruction and not like a link. It should be possible to walk past it
   without feeling that a step was skipped. */
.machuca-auth__more {
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
	color: #8a8a8a;
	font-size: 0.85rem;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.machuca-auth__more-sign {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 1px solid #ddd6ca;
	border-radius: 5px;
	font-size: 0.9rem;
	line-height: 1;
}

.machuca-auth__more:hover,
.machuca-auth__more:focus-visible {
	background: none;
	color: #013b28 !important;
	text-decoration: none;
}

.machuca-auth__more:hover .machuca-auth__more-sign,
.machuca-auth__more:focus-visible .machuca-auth__more-sign {
	border-color: #013b28;
}

.machuca-auth__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #e6e0d6;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.45;
	color: #1f1f1f;
	resize: vertical;
}

.machuca-auth__field textarea:focus {
	outline: 2px solid #013b28;
	outline-offset: 1px;
	border-color: #013b28;
}

.machuca-auth__hint {
	display: block;
	margin: 6px 0 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: #6b6b6b;
	font-weight: 400;
}