/*
 * /get-started/
 *
 * Built for one hand on a phone in daylight. Big targets, high contrast, and no
 * layout that depends on hovering.
 *
 * Yellow is a background colour only — never text on a light surface. That rule
 * is in the brand notes because #FFD000 on white fails contrast badly enough to
 * be unreadable outdoors, which is exactly where this form gets filled in.
 */

.agal-su {
	--agal-yellow: #FFD000;
	--agal-ink: #1A1A1A;
	--agal-line: #D9D9D9;
	--agal-muted: #5A5A5A;
	--agal-bad: #B3261E;
	--agal-good: #146B3A;

	max-width: 30rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--agal-ink);
	font-size: 1rem;
	line-height: 1.55;
}

/* ---- language chooser ---- */

.agal-su .agal-lang {
	display: flex;
	gap: .5rem;
	margin-bottom: 1.5rem;
}

.agal-su .agal-lang-btn {
	flex: 0 0 auto;
	padding: .45rem 1rem;
	border: 1px solid var(--agal-line);
	border-radius: 999px;
	background: #fff;
	color: var(--agal-ink);
	text-decoration: none;
	font-size: .95rem;
	line-height: 1.4;
}

.agal-su .agal-lang-btn.is-on {
	background: var(--agal-ink);
	border-color: var(--agal-ink);
	color: #fff;
	font-weight: 600;
}

/* ---- headings ---- */

.agal-su-title {
	font-family: Poppins, Inter, system-ui, sans-serif;
	font-size: 1.75rem;
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 .35rem;
	color: var(--agal-ink);
}

.agal-su-sub {
	margin: 0 0 1.75rem;
	color: var(--agal-muted);
}

/* ---- fields ---- */

.agal-su-row {
	margin-bottom: 1.35rem;
}

.agal-su-row label {
	display: block;
	font-weight: 600;
	margin-bottom: .35rem;
}

.agal-su-row input {
	width: 100%;
	box-sizing: border-box;
	/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus,
	   and the person never finds their way back out of the zoom. */
	font-size: 1rem;
	font-family: inherit;
	padding: .7rem .75rem;
	border: 1px solid var(--agal-line);
	border-radius: .5rem;
	background: #fff;
	color: var(--agal-ink);
	min-height: 3rem;
}

.agal-su-row input:focus {
	outline: 3px solid var(--agal-yellow);
	outline-offset: 1px;
	border-color: var(--agal-ink);
}

.agal-su-help {
	margin: .35rem 0 0;
	font-size: .875rem;
	color: var(--agal-muted);
}

.agal-su-err {
	margin: .35rem 0 0;
	font-size: .9rem;
	font-weight: 600;
	color: var(--agal-bad);
}

.agal-su-err-form {
	margin: 0 0 1.25rem;
	padding: .75rem;
	border-left: 4px solid var(--agal-bad);
	background: #FDECEA;
}

.agal-su-row.has-error input {
	border-color: var(--agal-bad);
}

/* ---- the web address ---- */

.agal-su-slugbox {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--agal-line);
	border-radius: .5rem;
	overflow: hidden;
	background: #fff;
}

.agal-su-slugbox:focus-within {
	outline: 3px solid var(--agal-yellow);
	outline-offset: 1px;
	border-color: var(--agal-ink);
}

.agal-su-prefix {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 .1rem 0 .75rem;
	background: #F4F4F4;
	color: var(--agal-muted);
	font-size: .95rem;
	/* The prefix is fixed text, not something to select or edit. On a narrow
	   phone it may be the widest thing here, so let it shrink to its own text
	   and keep the typing area usable. */
	white-space: nowrap;
	user-select: none;
}

.agal-su-slugbox input {
	border: 0;
	border-radius: 0;
	min-width: 0;
	padding-left: .1rem;
}

.agal-su-slugbox input:focus {
	outline: 0;
}

/*
 * "Your address will be: kovai-tailors".
 *
 * Quiet, not an alert. It is a confirmation of what will happen, not a
 * correction of what they did — styling it like an error would tell somebody
 * they made a mistake when all they did was type their shop's name the way it
 * is written on the board.
 */
.agal-su-shaped {
	margin: .4rem 0 0;
	font-size: .9rem;
	color: var(--agal-ink);
	min-height: 1.4em;   /* reserved, so a result does not shift the button under a thumb */
}

.agal-su-shaped:empty {
	min-height: 0;
	margin: 0;
}

.agal-su-status {
	margin: .4rem 0 0;
	font-size: .9rem;
	font-weight: 600;
	min-height: 1.4em;   /* reserve the line so a result does not shift the button */
}

/*
 * The hold-word message is itself the WhatsApp link, so it has to look
 * tappable — underlined and inheriting the warning colour, not styled as a
 * separate button that competes with the submit.
 */
.agal-su-wa {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.agal-su-status.is-busy .agal-su-wa:focus-visible,
.agal-su-wa:focus-visible {
	outline: 3px solid var(--agal-yellow);
	outline-offset: 2px;
}

.agal-su-status.is-free { color: var(--agal-good); }
.agal-su-status.is-busy { color: var(--agal-bad); }
.agal-su-status.is-wait { color: var(--agal-muted); font-weight: 400; }

/* ---- submit ---- */

.agal-su-btn {
	display: inline-block;
	background: var(--agal-yellow);
	color: var(--agal-ink);
	font-family: Poppins, Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: .5rem;
	padding: .95rem 1.5rem;
	min-height: 3.25rem;
	cursor: pointer;
}

.agal-su-submit {
	width: 100%;
	margin-top: .5rem;
}

.agal-su-btn:hover,
.agal-su-btn:focus {
	background: #E6BC00;
}

.agal-su-btn:focus-visible {
	outline: 3px solid var(--agal-ink);
	outline-offset: 2px;
}

.agal-su-btn[disabled] {
	opacity: .55;
	cursor: default;
}

.agal-su-alt {
	margin: 1.5rem 0 0;
	text-align: center;
}

.agal-su-alt a {
	color: var(--agal-ink);
}

/* ---- notices ---- */

.agal-su-notice p {
	margin: 0 0 1rem;
}

@media (min-width: 40rem) {
	.agal-su {
		padding-top: 3rem;
	}
	.agal-su-title {
		font-size: 2.125rem;
	}
}

/* ---- what free actually means ---- */

.agal-su-offer {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--agal-line);
	font-size: .95rem;
	line-height: 1.6;
}

.agal-su-offer-h {
	font-family: Poppins, Inter, system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 .5rem;
}

.agal-su-offer-h3 {
	font-family: Poppins, Inter, system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 1.25rem 0 .4rem;
}

.agal-su-offer p { margin: 0 0 .75rem; }

/* The one thing it does not do. Set apart rather than buried in the flow —
   a limitation a customer discovers later reads as something we hid. */
.agal-su-offer-limit {
	padding: .75rem .9rem;
	background: #F4F4F4;
	border-left: 4px solid var(--agal-ink);
	border-radius: .25rem;
}

.agal-su-offer-prices {
	list-style: none;
	margin: 0 0 .5rem;
	padding: 0;
}

.agal-su-offer-prices li {
	padding: .35rem 0;
	border-bottom: 1px solid var(--agal-line);
}

.agal-su-offer-prices li:last-child { border-bottom: 0; }

.agal-su-offer-note { color: var(--agal-muted); font-size: .875rem; }

/* The thing they get on upgrade — the strongest argument on the page, so it
   is not left looking like a footnote. */
.agal-su-offer-gbp {
	margin-top: 1rem;
	padding: .85rem .9rem;
	background: #FFF8DB;
	border-radius: .5rem;
}