/**
 * Order Status lookup — markup emitted by [gg_order_status] in functions.php.
 *
 * Brand tokens are lifted from the live theme rather than invented: gold
 * #E5B510 (the header bar and the serial-lookup submit button), body font D35
 * (Core Sans D35 Regular), display font d77 (Core Sans D77 Cn Black), and
 * square corners — the theme uses border-radius: 0 everywhere.
 *
 * No prefers-color-scheme block on purpose: the theme is light-only, so a dark
 * card would read as broken against the rest of the page.
 */

.gg-os {
	--gg-gold: #E5B510;
	--gg-gold-ink: #7a5c00;
	--gg-ink: #212529;
	--gg-muted: #6b6a64;
	--gg-line: #e3e2dc;
	--gg-field: #fbfbfa;
	--gg-ok: #3B6D11;
	--gg-err: #A32D2D;

	max-width: 660px;
	margin: 0 auto;
	/* The page content sits straight under the banner, and this page carries no
	   vc_custom_* spacing classes of its own, so own the vertical rhythm here. */
	padding: 3rem 0 3.5rem;
	font-family: 'D35', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--gg-ink);
}

/* wpautop wraps the bare shortcode in a <p>, which the browser closes early and
   leaves as an empty stray before the widget. Hide it rather than fight the
   filter order. */
.entry-content p:empty {
	display: none;
}

.gg-os__intro {
	margin: 0 0 1.75rem;
	color: var(--gg-muted);
}

/* ── Form ───────────────────────────────────────────────────────────── */

.gg-os__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
	align-items: end;
}

.gg-os__field {
	display: flex;
	flex-direction: column;
}

.gg-os__field label {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gg-muted);
	margin-bottom: .4rem;
}

.gg-os__field input {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	padding: .7rem .75rem;
	color: var(--gg-ink);
	background: var(--gg-field);
	border: 1px solid var(--gg-line);
	border-radius: 0;
	width: 100%;
	transition: border-color .15s, box-shadow .15s;
}

.gg-os__field input::placeholder {
	color: #b3b2ab;
}

.gg-os__field input:focus {
	outline: none;
	background: #fff;
	border-color: var(--gg-gold);
	box-shadow: 0 0 0 3px rgba(229, 181, 16, .25);
}

.gg-os__actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.gg-os__submit {
	font-family: 'd77', 'D35', sans-serif;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #fff;
	background: var(--gg-gold);
	border: 0;
	border-radius: 0;
	padding: .75rem 1.75rem;
	cursor: pointer;
	transition: filter .15s;
}

.gg-os__submit:hover:not(:disabled) {
	filter: brightness(1.08);
}

.gg-os__submit:focus-visible {
	outline: 3px solid rgba(229, 181, 16, .5);
	outline-offset: 2px;
}

.gg-os__submit:disabled {
	opacity: .55;
	cursor: default;
}

/* ── Messages ───────────────────────────────────────────────────────── */

.gg-os__msg {
	margin-top: 1rem;
	font-size: .9rem;
	min-height: 1.2em;
}

.gg-os__msg--err {
	color: var(--gg-err);
	border-left: 3px solid var(--gg-err);
	padding-left: .7rem;
}

.gg-os__msg:empty {
	display: none;
}

/* ── Result ─────────────────────────────────────────────────────────── */

.gg-os__result[hidden] {
	display: none;
}

.gg-os__result {
	margin-top: 2.25rem;
	border-top: 2px solid var(--gg-gold);
	padding-top: 1.5rem;
}

.gg-os__meta {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gg-muted);
	margin-bottom: .35rem;
}

.gg-os__stage {
	font-family: 'd77', 'D35', sans-serif;
	font-size: 1.6rem;
	line-height: 1.25;
	font-weight: 500;
	margin: 0 0 1.5rem;
}

.gg-os__stage--done {
	color: var(--gg-ok);
}

/* ── Stepper ────────────────────────────────────────────────────────── */

.gg-os__steps {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	/* Must equal STAGES.length in gg-order-status.js — too few and the extra
	   steps wrap onto a second row, taking the connector line with them. */
	grid-template-columns: repeat(7, 1fr);
	counter-reset: gg-step;
}

.gg-os__step {
	position: relative;
	text-align: center;
	padding-top: 1.9rem;
	font-size: .72rem;
	line-height: 1.3;
	color: var(--gg-muted);
	/* the connector line, drawn behind the dots */
}

.gg-os__step::before {
	content: '';
	position: absolute;
	top: .6rem;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--gg-line);
}

.gg-os__step:first-child::before {
	display: none;
}

.gg-os__step::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--gg-line);
	box-sizing: border-box;
}

.gg-os__step.is-done::before,
.gg-os__step.is-current::before {
	background: var(--gg-gold);
}

.gg-os__step.is-done::after {
	background: var(--gg-gold);
	border-color: var(--gg-gold);
}

.gg-os__step.is-current::after {
	background: #fff;
	border-color: var(--gg-gold);
	border-width: 4px;
}

/* A finished order rests on its last step, and the hollow "you are here" ring
   read as unfinished. When the order is complete, fill the dot in. */
.gg-os__step.is-current.is-final::after {
	background: var(--gg-gold);
	border-color: var(--gg-gold);
	border-width: 2px;
}

.gg-os__step.is-done,
.gg-os__step.is-current {
	color: var(--gg-ink);
}

.gg-os__step.is-current {
	font-weight: 700;
}

/* ── Detail rows ────────────────────────────────────────────────────── */

.gg-os__rows {
	margin: 0;
}

.gg-os__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--gg-line);
	font-size: .9rem;
}

.gg-os__row:last-child {
	border-bottom: 0;
}

.gg-os__row dt {
	color: var(--gg-muted);
	font-weight: 400;
	margin: 0;
}

.gg-os__row dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	word-break: break-word;
}

.gg-os__row dd a {
	color: var(--gg-gold-ink);
	text-decoration: underline;
}

.gg-os__row dd.gg-os__delivered {
	color: var(--gg-ok);
}

.gg-os__foot {
	margin-top: 1.75rem;
	font-size: .8rem;
	color: var(--gg-muted);
}

/* ── Narrow screens ─────────────────────────────────────────────────── */

@media (max-width: 560px) {
	.gg-os__form {
		grid-template-columns: 1fr;
	}

	.gg-os__submit {
		width: 100%;
	}

	.gg-os__steps {
		/* seven columns get unreadable on a phone; stack into a vertical rail */
		grid-template-columns: 1fr;
		gap: 0;
	}

	.gg-os__step {
		text-align: left;
		padding: .45rem 0 .45rem 2rem;
		font-size: .85rem;
	}

	.gg-os__step::before {
		top: -50%;
		left: .55rem;
		width: 2px;
		height: 100%;
	}

	.gg-os__step::after {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
}