/**
 * Track Order page - front-end shortcode UI.
 *
 * Everything is namespaced under .wduf-track so the theme's own form/button
 * styling (Blocksy, on this store) can never leak in and nothing here can leak
 * out to the rest of the page. Mobile-first: the base rules ARE the phone
 * layout, and the only breakpoints widen it.
 *
 * The post-tracking result is the order-received screen (styled by post-order.css),
 * which the shortcode loads too, so the result looks identical to the order-received
 * and view-order pages. Only the lookup form and its surroundings are styled here.
 */

.wduf-track {
	/* One accent for the whole purchase journey. The real value is written
	   inline by PHP from the Buy Now popup's configured accent_color (the same
	   source the Order View page uses) - this default only matters if that
	   setting is empty. Everything else derives from it, so there is exactly
	   one colour to change. */
	--wdt-accent: #7239ea;

	/* Each derived token is declared TWICE: a static value first, then the
	   color-mix() that supersedes it. color-mix() needs Chrome 111 / Safari 16.2
	   / Firefox 113; an older browser discards the second declaration it cannot
	   parse and keeps the first. Without the pair, those browsers get an invalid
	   value - which is NOT "ignore this property", it computes to unset - and the
	   status pill loses both its tint and its text colour.

	   The fallbacks are derived from the default accent, so a merchant who
	   configures a different one still gets exact colours everywhere color-mix()
	   works, and near-enough neutrals where it does not. */
	--wdt-accent-dark: #5f2fc4;
	--wdt-accent-dark: color-mix(in srgb, var(--wdt-accent) 84%, #000);
	--wdt-accent-ring: rgba(114, 57, 234, .22);
	--wdt-accent-ring: color-mix(in srgb, var(--wdt-accent) 22%, transparent);
	--wdt-accent-soft: #f4effe;
	--wdt-accent-soft: color-mix(in srgb, var(--wdt-accent) 9%, #fff);
	--wdt-accent-ink: #4b1f9e;
	--wdt-accent-ink: color-mix(in srgb, var(--wdt-accent) 72%, #000);

	--wdt-ink: #101012;
	--wdt-ink-soft: #3f3f46;
	--wdt-muted: #71717a;
	--wdt-line: #e4e4e7;
	--wdt-line-strong: #d4d4d8;
	--wdt-surface: #ffffff;
	--wdt-soft: #f7f7f8;
	--wdt-prefix-bg: #ececee;
	--wdt-danger: #dc2626;
	--wdt-danger-soft: #fef2f2;
	--wdt-radius: 16px;

	max-width: 560px;
	margin: 0 auto;
	color: var(--wdt-ink);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.wduf-track *,
.wduf-track *::before,
.wduf-track *::after {
	box-sizing: border-box;
}

/* ── Card ─────────────────────────────────────────────── */

.wduf-track__card {
	background: var(--wdt-surface);
	border: 1px solid var(--wdt-line);
	border-radius: var(--wdt-radius);
	padding: 22px 18px 20px;
	box-shadow: 0 1px 2px rgba(16, 16, 18, .04), 0 12px 32px -20px rgba(16, 16, 18, .28);
}

.wduf-track__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.wduf-track__badge {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--wdt-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wduf-track__badge svg {
	width: 21px;
	height: 21px;
	display: block;
}

/* Every text element below is written as `.wduf-track <el>` rather than a bare
   class, on purpose.
   Blocksy spaces headings with
   `:is(.is-layout-flow, .is-layout-constrained) :where(h1,…,h6)` - `:is()` scores
   as its heaviest argument (a class) and `:where()` scores zero, so that rule is
   specificity 0,1,0: an exact TIE with a lone `.wduf-track__title`. Ties go to
   whichever sheet loads last, and the theme's loads after the plugin's, which is
   what put ~16px of theme margin under the card title. Two class selectors
   (0,2,0) win outright, whatever the load order. */
.wduf-track .wduf-track__title {
	margin: 0;
	padding: 0;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--wdt-ink);
}

.wduf-track .wduf-track__sub {
	margin: 3px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--wdt-muted);
}

.wduf-track .wduf-track__intro {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wdt-ink-soft);
}

.wduf-track .wduf-track__intro p {
	margin: 0 0 8px;
	padding: 0;
}

.wduf-track .wduf-track__intro p:last-child {
	margin-bottom: 0;
}

/* ── Fields ───────────────────────────────────────────── */

.wduf-track__fields {
	display: grid;
	gap: 14px;
}

.wduf-track .wduf-track__field {
	display: block;
	margin: 0;
	padding: 0;
}

.wduf-track .wduf-track__label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--wdt-ink);
}

.wduf-track__control {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--wdt-soft);
	border: 1.5px solid var(--wdt-line);
	border-radius: 12px;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.wduf-track__control:focus-within {
	background: var(--wdt-surface);
	border-color: var(--wdt-accent);
	box-shadow: 0 0 0 3px var(--wdt-accent-ring);
}

/* The fixed prefix ("#", "+91") is its own shaded segment with a real divider,
   not just text sitting inside the field. Shoppers were reading "+91" as
   something they had typed (and then deleting it, or typing their number after
   it); a distinct panel reads as part of the field's furniture instead. */
.wduf-track__prefix {
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: var(--wdt-prefix-bg);
	border-right: 1.5px solid var(--wdt-line);
	/* 12px outer radius minus the control's 1.5px border. */
	border-radius: 10.5px 0 0 10.5px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wdt-ink-soft);
	white-space: nowrap;
	user-select: none;
}

.wduf-track__control:focus-within .wduf-track__prefix {
	border-right-color: var(--wdt-line-strong);
}

.wduf-track__field.is-invalid .wduf-track__prefix {
	background: #fae7e7;
	border-right-color: #f5c2c2;
	color: #9f1239;
}

/* Beats the theme's global input styling without !important escalation wars:
   the specificity here (class + element) is higher than Kadence's `input[type]`
   rules, and every visual property the theme sets is restated. */
.wduf-track__control input.wduf-track__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font-family: inherit;
	font-size: 16px; /* 16px minimum keeps iOS Safari from zooming on focus */
	font-weight: 500;
	line-height: 52px;
	color: var(--wdt-ink);
	border-radius: 12px;
	-webkit-appearance: none;
	appearance: none;
}

/* Breathing room between the prefix panel and the value the shopper types. */
.wduf-track__prefix + input.wduf-track__input {
	padding-left: 14px;
}

.wduf-track__control input.wduf-track__input:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

.wduf-track__control input.wduf-track__input::placeholder {
	color: #a1a1aa;
	font-weight: 400;
	opacity: 1;
}

/* Number inputs would otherwise render spinners and, worse, silently drop a
   leading zero / reject pasted "+91 " prefixes - these stay type=text with an
   inputmode hint, so mobile still gets the numeric keypad. */
.wduf-track__control input.wduf-track__input::-webkit-outer-spin-button,
.wduf-track__control input.wduf-track__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wduf-track__field.is-invalid .wduf-track__control {
	border-color: var(--wdt-danger);
	background: var(--wdt-danger-soft);
}

.wduf-track__field.is-invalid .wduf-track__control:focus-within {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.wduf-track__error {
	display: none;
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--wdt-danger);
}

.wduf-track__field.is-invalid .wduf-track__error {
	display: block;
}

/* ── Alert (server/lookup level) ──────────────────────── */

.wduf-track__alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid #fecaca;
	border-radius: 12px;
	background: var(--wdt-danger-soft);
	color: #991b1b;
	font-size: 13.5px;
	line-height: 1.5;
}

.wduf-track__alert svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 1px;
}

.wduf-track__alert[hidden] {
	display: none;
}

/* ── Submit ───────────────────────────────────────────── */

.wduf-track__actions {
	margin-top: 18px;
}

.wduf-track button.wduf-track__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	border: 0;
	border-radius: 12px;
	background: var(--wdt-accent);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: transform .12s ease, opacity .15s ease, background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wduf-track button.wduf-track__submit:hover {
	background: var(--wdt-accent-dark);
}

.wduf-track button.wduf-track__submit:active {
	transform: translateY(1px);
}

.wduf-track button.wduf-track__submit:focus-visible {
	outline: 2px solid var(--wdt-accent);
	outline-offset: 3px;
}

.wduf-track button.wduf-track__submit[disabled] {
	opacity: .72;
	cursor: default;
}

.wduf-track__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wduf-track-spin .7s linear infinite;
}

.wduf-track.is-busy .wduf-track__spinner {
	display: block;
}

@keyframes wduf-track-spin {
	to { transform: rotate(360deg); }
}

/* ── Info points ──────────────────────────────────────── */

.wduf-track ul.wduf-track__help {
	margin: 18px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--wdt-soft);
	list-style: none;
}

.wduf-track ul.wduf-track__help li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 5px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wdt-ink-soft);
	list-style: none;
}

.wduf-track ul.wduf-track__help li::marker {
	content: "";
}

.wduf-track ul.wduf-track__help svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--wdt-accent);
}

.wduf-track__foot {
	margin: 14px 0 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--wdt-muted);
}

.wduf-track__foot a {
	color: var(--wdt-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Result slot (post-tracking view lives here) ──────── */

.wduf-track__result:empty {
	display: none;
}

/* ═══════════════════════════════════════════════════════
   RESULT
   ═══════════════════════════════════════════════════════ */

/* The result is the order-received screen (see
   Woo_Dash_Checkout_Postorder::screen_html), styled by post-order.css, and it is
   a two-column page up to 1040px. The lookup form is a 600px card, so once a
   result is on screen the column is widened to fit it. */
.wduf-track.wduf-track--wide {
	max-width: 1040px;
}

/* ── Wider screens ────────────────────────────────────── */

@media (min-width: 480px) {
	.wduf-track__card {
		padding: 26px 24px 24px;
	}


	.wduf-track__title {
		font-size: 21px;
	}

	.wduf-track button.wduf-track__submit {
		width: auto;
		min-width: 190px;
		padding: 0 30px;
	}
}

@media (min-width: 782px) {
	.wduf-track {
		max-width: 600px;
		font-size: 15.5px;
	}

	.wduf-track__card {
		padding: 32px 30px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wduf-track *,
	.wduf-track *::before,
	.wduf-track *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}