/*
 * WhatsApp confirmation (Confirm_Widget). One file for the feature.
 *
 * The label, one sentence saying what the number is for, then the number
 * with Send code beside it (desktop and tablet) or full width under it
 * (phones, and always in the registration form's narrow column); the code
 * box on its own line below, the teal button that goes grey while it counts
 * down, and a green line once it is done. No card and no heading: it is one
 * field row of the form it sits in.
 */

.theaisle-wa {
	margin: 0 0 8px;
}

/* The script shows one panel at a time with the hidden attribute; the flex
   rules below would otherwise override it. */
.theaisle-wa [hidden] {
	display: none !important;
}

.theaisle-wa p {
	margin-bottom: 12px;
}

/* Row one, desktop and tablet: a grid, so the label and its sentence span
   the full width and the input shares one line with Send code, 12px apart.
   The button stretches to that line's height, so it is exactly as tall as
   the input on every page it appears on (40px on the listing form's account
   card, 47px in the theme's other forms) with no height written down here. */
.theaisle-wa__row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	column-gap: 12px;
	row-gap: 0;
	align-items: end;
	margin-bottom: 14px;
}

/* The field's own box steps aside so its label row and input become the
   grid's. That also sheds whatever the host form puts on a field row - the
   parent theme's ruled padding and transparent 2px right border on the
   listing form, the sign-in form's 22px bottom margin, the SMS layout's
   flex order. (1,3,0) where those rules are id-scoped. */
.theaisle-wa .theaisle-wa__row .theaisle-phone-form-group,
#submit-job-form .theaisle-wa .theaisle-wa__row .theaisle-phone-form-group,
#form-section-account .theaisle-wa .theaisle-wa__row .theaisle-phone-form-group {
	display: contents;
}

/* Rows are placed explicitly: auto-placement would seat the button (the one
   item with a fixed column) ahead of the field. */
.theaisle-wa__row .field-head {
	grid-column: 1 / -1;
	grid-row: 1;
}

.theaisle-wa__row .field {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	margin: 0;
}

.theaisle-wa__row .theaisle-wa__send {
	grid-column: 2;
	grid-row: 2;
	align-self: stretch;
	display: flex;
}

/* Without display: contents (some older WebViews) the field is one grid
   item: give it the label and input rows, and seat the button at its foot. */
.theaisle-wa .theaisle-wa__row .theaisle-phone-form-group,
form.sign-in-form .theaisle-wa .theaisle-wa__row .theaisle-phone-form-group,
#submit-job-form .theaisle-wa .theaisle-wa__row .theaisle-phone-form-group {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
	padding: 0;
	border: 0;
}

@supports not ( display: contents ) {
	.theaisle-wa__row .theaisle-wa__send {
		grid-row: 1 / span 2;
		align-self: end;
	}
}

/* The label, then the sentence, each on its own line. The listing and
   sign-in forms style this row themselves; the account page and the pop-ups
   (context "account") do not, and ran the two together on one line. */
.theaisle-wa[data-context="account"] .field-head label {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #242429;
}

.theaisle-wa[data-context="account"] .field-head .description {
	display: block;
	margin: 4px 0 6px;
	font-size: 13px;
	line-height: 1.45;
	color: #6a6a76;
}

.theaisle-wa__row .theaisle-wa__button {
	/* 40px is only the floor for a browser without display: contents, where
	   the field stays one grid item and the button sits at its foot. */
	min-height: 40px;
	padding: 0 24px;
}

/* Nothing beside the number (no code method, by email, or done): the field
   takes the whole line rather than stopping short at an empty column. */
.theaisle-wa__row--solo,
.theaisle-wa.is-email .theaisle-wa__row,
.theaisle-wa.is-confirmed .theaisle-wa__row {
	grid-template-columns: minmax( 0, 1fr );
}

.theaisle-wa__panel > .theaisle-wa__send {
	margin-bottom: 14px;
}

/* Send code: #004346 teal, 0.875rem semibold (never the red only Submit is
   allowed), with the SMS widget's 5px corners and padding. */
.theaisle-wa__button {
	display: inline-block;
	min-height: 44px;
	padding: 12px 30px;
	border: 2px solid #004346;
	border-radius: 5px;
	background: #004346;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.theaisle-wa__button:hover,
.theaisle-wa__button:focus-visible {
	border-color: #00595d;
	background: #00595d;
	color: #fff;
}

/* Counting down to Resend is the one time it is inert, and looks it. */
.theaisle-wa__button.is-counting,
.theaisle-wa__button[disabled] {
	border-color: #d8d8e0;
	background: transparent;
	color: #7a7a86;
	cursor: default;
}

.theaisle-wa__button--quiet {
	border-color: #e9e4df;
	background: #f4f1ee;
	color: #242429;
}

.theaisle-wa__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

/* Row two: the code box, full width, once a code is on its way. */
.theaisle-wa__entry label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	color: #242429;
}

/* Six digits presented as a code, as the SMS box does: centred, large and
   evenly tracked, and 20px clears the iOS zoom-on-focus threshold. */
.theaisle-wa .theaisle-wa__code {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	font-size: 20px;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	text-align: center;
}

.theaisle-wa__status {
	min-height: 1em;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.4;
}

/* Kept in the page for the live region, but an empty one (and an empty
   Turnstile mount) must not leave a band of blank space. */
.theaisle-wa .theaisle-wa__status:empty {
	min-height: 0;
	margin: 0;
}

.theaisle-wa__check:empty {
	display: none;
}

.theaisle-wa__status.is-error {
	color: #8a2424;
}

.theaisle-wa__status.is-warning {
	color: #8a5a00;
}

/* Done: the SMS widget's green confirmed line, and nothing left to press. */
.theaisle-wa .theaisle-wa__success {
	margin: 0;
	padding: 9px 12px;
	border-radius: 8px;
	background: #edfaf5;
	font-size: 14px;
	font-weight: 600;
	color: #10634c;
}

.theaisle-wa.is-confirmed .theaisle-wa__send,
.theaisle-wa.is-confirmed .theaisle-wa__why {
	display: none;
}

/* What confirming is for, on the listing form: just above the email link. */
.theaisle-wa__why {
	margin: 10px 0 0;
}

/* By email, outside the two sign-up forms (where the number is one of the
   form's own fields), the number is not needed at all. */
.theaisle-wa.is-email:not([data-context="signup"]):not([data-context="register"]) .theaisle-wa__row {
	display: none;
}

.theaisle-wa__note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: #6a6a76;
}

/* A text-styled button (the couple gate's Discard). */
.theaisle-wa__link-button {
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	color: #242429;
	text-decoration: underline;
	cursor: pointer;
}

/* The one way out: email, or back to WhatsApp from there. */
.theaisle-wa__links {
	margin: 8px 0 0;
}

.theaisle-wa__link,
.theaisle-wa__links a {
	font-size: 14px;
	color: #242429;
	text-decoration: underline;
}

.theaisle-wa__qr {
	width: 180px;
	max-width: 100%;
	margin: 4px 0 14px;
}

.theaisle-wa__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.theaisle-wa__waiting {
	font-weight: 600;
}

/* Only one of these shows, depending on the device. */
.theaisle-wa.is-phone .theaisle-wa__only-desktop,
.theaisle-wa:not(.is-phone) .theaisle-wa__only-phone {
	display: none;
}

/* The honeypot: present for bots, invisible to people and screen readers. */
.theaisle-wa__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The account modal (Vendor_Prompt). */
.theaisle-wa-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba( 0, 0, 0, 0.45 );
}

.theaisle-wa-modal__box {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 10px;
	background: #fff;
}

.theaisle-wa-modal__box .theaisle-wa {
	margin: 0;
	padding: 20px;
}

.theaisle-wa-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

/* -- The reminder pop-up (Vendor_Flow::render_popup) -------------------- */

/* The page stays still behind it. */
html.theaisle-wa-popup-open,
html.theaisle-wa-popup-open body {
	overflow: hidden;
}

/* A 44px tap target, and a link (it works without JavaScript). */
.theaisle-wa-popup .theaisle-wa-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	top: 6px;
	right: 6px;
	border-radius: 50%;
	color: #242429;
	text-decoration: none;
}

.theaisle-wa-popup .theaisle-wa-modal__close:hover,
.theaisle-wa-popup .theaisle-wa-modal__close:focus-visible {
	background: #f4f1ee;
	color: #242429;
}

.theaisle-wa-popup__title {
	margin: 0;
	padding: 22px 56px 0 20px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #242429;
}

.theaisle-wa-popup__title:focus {
	outline: none;
}

.theaisle-wa-popup__intro {
	margin: 8px 20px 0;
	font-size: 15px;
	line-height: 1.5;
	color: #3c3c46;
}

.theaisle-wa-popup .theaisle-wa {
	padding-top: 16px;
	padding-bottom: 8px;
}

.theaisle-wa-popup__email {
	margin: 0 20px;
	padding-top: 14px;
	border-top: 1px solid #ece7e2;
	font-size: 14px;
	line-height: 1.5;
	color: #3c3c46;
}

.theaisle-wa-popup__email a {
	display: inline-block;
	margin-right: 12px;
	color: #242429;
	text-decoration: underline;
}

.theaisle-wa-popup__foot {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 16px 20px 20px;
}

.theaisle-wa-popup__foot .theaisle-wa__button {
	min-width: 120px;
}

/* Done: nothing left to confirm or put off but the one button. */
.theaisle-wa-popup .theaisle-wa.is-confirmed ~ .theaisle-wa-popup__email {
	display: none;
}

@media ( max-width: 767px ) {
	.theaisle-wa-popup__title {
		padding-left: 16px;
		font-size: 19px;
	}

	.theaisle-wa-popup__intro,
	.theaisle-wa-popup__email {
		margin-left: 16px;
		margin-right: 16px;
	}

	.theaisle-wa-popup .theaisle-wa {
		padding-right: 16px;
		padding-left: 16px;
	}

	.theaisle-wa-popup__foot {
		padding: 14px 16px 16px;
	}

	.theaisle-wa-popup__foot .theaisle-wa__button {
		width: 100%;
	}
}

/* The /my-account/ registration form: a 320px column at every screen size,
   so the layout follows the container, not the viewport - number, then Send
   code full width under it, then the code box - as the SMS widget does there
   (.theaisle-register-phone in phone-auth.css). */
.theaisle-register-phone .theaisle-wa {
	margin-top: 4px;
}

/* The same label, sentence, field order as the listing form, in a form
   whose other labels float: the theme's floating label (absolute, 9px above
   the input) is set back into the flow here, keeping its type. */
form.sign-in-form .theaisle-wa .theaisle-phone-form-group .field-head label {
	position: static;
	display: block;
	margin: 0;
}

form.sign-in-form .theaisle-wa .theaisle-phone-form-group .field-head .description {
	display: block;
	margin: 4px 0 6px;
	font-size: 13px;
	line-height: 1.45;
	color: #6a6a76;
}

/* One column - the number, then Send code full width 12px under it, then the
   code box - on phones (767px and below; tablets keep the button beside the
   number), and at every size in the theme's 320px sign-in and registration
   column, as the SMS widget does there. Full width, the button is a tap
   target first: 44px. */
form.sign-in-form .theaisle-wa__row {
	grid-template-columns: minmax( 0, 1fr );
}

form.sign-in-form .theaisle-wa__row .theaisle-wa__send {
	grid-column: 1;
	grid-row: 3;
	align-self: auto;
	margin-top: 12px;
}

form.sign-in-form .theaisle-wa__row .theaisle-wa__button {
	width: 100%;
	min-height: 44px;
}

@media ( max-width: 767px ) {
	.theaisle-wa__row {
		grid-template-columns: minmax( 0, 1fr );
	}

	.theaisle-wa__row .theaisle-wa__send {
		grid-column: 1;
		grid-row: 3;
		align-self: auto;
		margin-top: 12px;
	}

	.theaisle-wa__row .theaisle-wa__button {
		width: 100%;
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------------
 * The couple gate (Couple_Gate): the dialog, the held notice and the
 * confirmation toast.
 * ------------------------------------------------------------------ */

.theaisle-wa-modal[hidden],
.theaisle-held[hidden],
.theaisle-gate-toast[hidden] {
	display: none !important;
}

.theaisle-gate__text {
	margin: 0;
	padding: 24px 40px 0 20px;
	font-size: 16px;
	line-height: 1.5;
}

.theaisle-gate__email {
	margin: 0;
	padding: 0 20px 12px;
}

.theaisle-gate .theaisle-wa__status {
	padding: 0 20px 16px;
}

.theaisle-held,
.theaisle-gate-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 99999;
	max-width: 420px;
	margin-left: auto;
	padding: 16px 20px;
	border: 1px solid #e6e1dc;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.12 );
}

.theaisle-held__text {
	margin: 0 0 10px;
}

.theaisle-held__actions {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
}

/* Sign in with WhatsApp or email (Sign_In). */
.theaisle-wa-signin__intro {
	margin-bottom: 12px;
}

.theaisle-wa__email {
	margin-bottom: 12px;
}