/**
 * Siteryn Track Order — Solartonin branding.
 *
 * Restyles the plugin's tracking page from the theme, without touching the
 * plugin: its colours, radius and width are CSS custom properties on
 * .siteryn-track, so they're overridden here, and the rest is plain class
 * overrides under the same scope. Loaded after the plugin's own stylesheet
 * and inline settings (see functions.php), so equal-weight rules win.
 *
 * Brand: ink #362c25, cream #ede5e0, accent #9b7f69, line #dbcbba,
 * Lora for headings, Jost for text, square corners, uppercase labels.
 */

.siteryn-track {
	--siteryn-track-accent: #362c25;
	--siteryn-track-on-accent: #ede5e0;
	--siteryn-track-text: #362c25;
	--siteryn-track-surface: #f7f3ef;
	--siteryn-track-radius: 0px;
	--siteryn-track-max-width: 820px;
	--siteryn-track-muted: rgba(54, 44, 37, 0.6);
	--siteryn-track-border: rgba(219, 203, 186, 0.6);
	--siteryn-track-soft: rgba(219, 203, 186, 0.3);
	--sc-track-brown: #9b7f69;
	--sc-track-line: #dbcbba;

	gap: 24px;
	font-family: "Jost", sans-serif;
	font-size: 15px;
}

/* Page: the theme header already carries the title and the instructions,
   so the form card's own heading and intro are kept for screen readers only
   (the heading still labels the form). */
.sc-track-page .siteryn-track__form > .siteryn-track__title,
.sc-track-page .siteryn-track__form > .siteryn-track__intro {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sc-track-page__content {
	padding-bottom: 20px;
}

/* Cards */

.siteryn-track .siteryn-track__card {
	padding: 32px;
	border: 1px solid var(--siteryn-track-border);
}

@media only screen and (max-width: 560px) {
	.siteryn-track .siteryn-track__card {
		padding: 22px 18px;
	}
}

.siteryn-track .siteryn-track__title {
	margin: 0 0 12px;
	font-family: "Lora", serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--siteryn-track-text);
}

.siteryn-track .siteryn-track__subtitle {
	margin: 0 0 14px;
	font-family: "Jost", sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--sc-track-brown);
}

.siteryn-track .siteryn-track__intro,
.siteryn-track .siteryn-track__muted {
	font-size: 15px;
	line-height: 1.6;
}

/* Form */

.siteryn-track .siteryn-track__fields {
	gap: 0 20px;
}

.siteryn-track .siteryn-track__field {
	gap: 8px;
	margin: 0 0 22px;
}

.siteryn-track .siteryn-track__field label {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--siteryn-track-muted);
}

.siteryn-track .siteryn-track__required {
	color: var(--sc-track-brown);
}

.siteryn-track .siteryn-track__optional {
	font-size: 11px;
	letter-spacing: 0.4px;
	text-transform: none;
}

.siteryn-track .siteryn-track__field input {
	min-height: 52px;
	padding: 12px 16px;
	font-size: 15px;
	background: #fff;
	border: 1px solid var(--sc-track-line);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.3s ease;
}

.siteryn-track .siteryn-track__field input:focus,
.siteryn-track .siteryn-track__field input:focus-visible {
	outline: none;
	border-color: var(--sc-track-brown);
}

.siteryn-track .siteryn-track__field input[aria-invalid="true"] {
	border-color: #a5443f;
}

/* Buttons — same as the site's "Add to bag": ink, square, spaced capitals. */

.siteryn-track .siteryn-track__button,
.siteryn-track a.siteryn-track__button {
	min-height: 52px;
	padding: 14px 36px;
	font-family: "Jost", sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--siteryn-track-on-accent);
	background: var(--siteryn-track-accent);
	border: 1px solid var(--siteryn-track-accent);
	border-radius: 0;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.siteryn-track .siteryn-track__button:hover,
.siteryn-track a.siteryn-track__button:hover {
	filter: none;
	color: #ede5e0;
	background: var(--sc-track-brown);
	border-color: var(--sc-track-brown);
}

.siteryn-track .siteryn-track__button--secondary,
.siteryn-track a.siteryn-track__button--secondary {
	min-height: 40px;
	padding: 10px 20px;
	font-size: 12px;
	color: var(--siteryn-track-accent);
	background: transparent;
}

.siteryn-track .siteryn-track__button--secondary:hover,
.siteryn-track a.siteryn-track__button--secondary:hover {
	color: #ede5e0;
	background: var(--siteryn-track-accent);
	border-color: var(--siteryn-track-accent);
}

@media only screen and (max-width: 560px) {
	.siteryn-track .siteryn-track__form .siteryn-track__button {
		width: 100%;
	}
}

.siteryn-track .siteryn-track__copy {
	min-height: 32px;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--siteryn-track-text);
	background: transparent;
	border: 1px solid var(--sc-track-line);
	border-radius: 0;
}

.siteryn-track .siteryn-track__copy:hover {
	border-color: var(--siteryn-track-text);
}

/* Notices — brand tones in place of the WordPress admin blues and greens. */

.siteryn-track .siteryn-track__notice {
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #362c25;
	background: rgba(219, 203, 186, 0.3);
	border-left: 3px solid var(--sc-track-brown);
	border-radius: 0;
}

.siteryn-track .siteryn-track__notice--success {
	border-left-color: #6f7f5c;
	background: rgba(111, 127, 92, 0.1);
}

.siteryn-track .siteryn-track__notice--warning {
	border-left-color: #b8894a;
	background: rgba(184, 137, 74, 0.1);
}

.siteryn-track .siteryn-track__notice--error {
	border-left-color: #a5443f;
	background: rgba(165, 68, 63, 0.08);
}

/* Result header */

.siteryn-track .siteryn-track__result-header {
	margin-bottom: 28px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--siteryn-track-border);
}

.siteryn-track .siteryn-track__meta {
	font-size: 14px;
}

.siteryn-track .siteryn-track__status {
	padding: 5px 12px;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #ede5e0;
	background: #362c25;
	border-radius: 0;
}

.siteryn-track .siteryn-track__status--success {
	background: #362c25;
}

.siteryn-track .siteryn-track__status--warning {
	background: var(--sc-track-brown);
}

.siteryn-track .siteryn-track__status--error {
	color: #fff;
	background: #a5443f;
}

.siteryn-track .siteryn-track__section {
	margin-bottom: 32px;
}

/* Timeline */

.siteryn-track .siteryn-track__timeline {
	--siteryn-track-marker: 26px;
}

.siteryn-track .siteryn-track__step-marker {
	border: 1px solid var(--sc-track-line);
	background: #fff;
}

.siteryn-track .siteryn-track__step:not(:last-child)::after {
	background: var(--sc-track-line);
}

.siteryn-track .siteryn-track__step.is-complete .siteryn-track__step-marker {
	border-color: var(--siteryn-track-accent);
	background: var(--siteryn-track-accent);
}

.siteryn-track .siteryn-track__step.is-complete:not(:last-child)::after {
	background: var(--siteryn-track-accent);
}

.siteryn-track .siteryn-track__step.is-current .siteryn-track__step-marker {
	border-color: var(--sc-track-brown);
	box-shadow: 0 0 0 4px rgba(155, 127, 105, 0.2);
}

.siteryn-track .siteryn-track__step.is-current .siteryn-track__step-marker::after {
	background: var(--sc-track-brown);
}

.siteryn-track .siteryn-track__step-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.siteryn-track .siteryn-track__step.is-upcoming .siteryn-track__step-label {
	font-weight: 400;
}

.siteryn-track .siteryn-track__step-date {
	margin-top: 2px;
	font-size: 13px;
}

/* Shipments and summary */

.siteryn-track .siteryn-track__shipment {
	padding: 18px 20px;
	background: var(--siteryn-track-soft);
	border-radius: 0;
}

.siteryn-track .siteryn-track__details dt {
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.siteryn-track .siteryn-track__details dd {
	font-weight: 500;
}

.siteryn-track .siteryn-track__tracking-number {
	background: #fff;
	border-radius: 0;
}

.siteryn-track .siteryn-track__items li {
	padding: 14px 0;
	font-size: 15px;
}

/* Recent orders (signed-in customers) */

.siteryn-track .siteryn-track__recent-item {
	padding: 16px 0;
}

.siteryn-track .siteryn-track__recent-number {
	font-family: "Lora", serif;
	font-size: 17px;
	font-weight: 500;
}

.siteryn-track .siteryn-track__recent-meta {
	font-size: 13px;
}

/* Links inside the cards */

.siteryn-track .siteryn-track__card a:not(.siteryn-track__button) {
	color: var(--siteryn-track-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.siteryn-track .siteryn-track__card a:not(.siteryn-track__button):hover {
	color: var(--sc-track-brown);
}
