/* ============================================================
   WC Shipment Tracker – Frontend Styles
   ============================================================ */

/* ============================================================
   Self-contained baseline + design tokens
   ------------------------------------------------------------
   The [wcst_tracking] shortcode can be dropped into ANY theme or page builder,
   each with its own input / button / table styling. To keep the look chosen in
   the Studio consistent everywhere, the form defines its own baseline scoped to
   the #wcst-tracking-app wrapper. Because that is an ID, these rules outrank the
   theme's class/element selectors, so theme styles never leak in.

   Every visual value is expressed through a single layer of CSS custom
   properties (the "--wcst-*" tokens defined below). The admin Design panel writes
   only to those variables (via style.setProperty / an inline #wcst-tracking-app
   block) and the advanced CSS editor layers scoped rules on top. Rule of thumb
   for any NEW rule added here: consume a token, never hard-code a colour, radius
   or size that the design surface is meant to control.

   Tokens are declared on #wcst-tracking-app and inherit down to every descendant
   (custom properties cascade), so even selectors that are not themselves prefixed
   with the ID resolve the same values as long as they render inside the wrapper.

   Only the control "chrome" (borders, backgrounds, padding, native appearance)
   is reset; font-family inherits by default (--wcst-font-family: inherit) so
   typography still matches the surrounding site unless the Studio overrides it.
   ============================================================ */

#wcst-tracking-app,
#wcst-tracking-app *,
#wcst-tracking-app *::before,
#wcst-tracking-app *::after {
	box-sizing: border-box;
}

/* ----- Design tokens (single source of truth) -----
   Container padding / background / shadow tokens are declared here so the
   "Container" section of the Design panel can drive them live; the baseline
   form stays visually neutral (no card) and opt-in presets consume them. */
#wcst-tracking-app {
	--wcst-primary: #1e293b;
	--wcst-primary-hover: #0f172a;
	--wcst-text: #111827;
	--wcst-text-muted: #6b7280;
	--wcst-bg: #ffffff;
	--wcst-border: #d1d5db;
	--wcst-border-focus: var(--wcst-primary);
	--wcst-error: #dc2626;
	--wcst-success: #059669;
	--wcst-font-family: inherit;
	--wcst-font-size: 15px;
	--wcst-label-weight: 600;
	--wcst-line-height: 1.5;
	--wcst-radius: 8px;
	--wcst-radius-button: 8px;
	--wcst-field-height: 46px;
	--wcst-border-width: 1px;
	--wcst-button-padding: 12px 28px;
	--wcst-container-max: 560px;
	--wcst-container-padding: 32px;
	--wcst-shadow: 0 1px 3px rgba( 0, 0, 0, 0.1 );
	--wcst-space: 16px;

	color: var(--wcst-text);
	font-family: var(--wcst-font-family);
	font-size: var(--wcst-font-size);
	line-height: var(--wcst-line-height);
}

/* ----- Public tracking shortcode ----- */
.wcst-public-tracking {
	max-width: var(--wcst-container-max);
}

/* ----- Notices ----- */
.wcst-notice {
	padding: 12px var(--wcst-space);
	border-radius: var(--wcst-radius);
	margin-bottom: var(--wcst-space);
}

.wcst-notice--error {
	background: color-mix( in srgb, var(--wcst-error) 8%, var(--wcst-bg) );
	border-left: 4px solid var(--wcst-error);
	color: var(--wcst-error);
}

.wcst-notice--info {
	background: color-mix( in srgb, var(--wcst-primary) 6%, var(--wcst-bg) );
	border-left: 4px solid var(--wcst-primary);
	color: var(--wcst-primary);
}

.wcst-results__order {
	margin-bottom: var(--wcst-space);
	font-size: var(--wcst-font-size);
}

.wcst-lookup-again {
	margin-top: var(--wcst-space);
	font-size: var(--wcst-font-size);
}

/* ----- Lookup form (baseline) ----- */
#wcst-tracking-app .wcst-lookup-form__intro {
	margin: 0 0 18px;
	color: var(--wcst-text-muted);
	font-size: var(--wcst-font-size);
	line-height: var(--wcst-line-height);
}

#wcst-tracking-app .wcst-form .form-row {
	margin: 0 0 var(--wcst-space);
	padding: 0;
}

#wcst-tracking-app .wcst-form label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-weight: var(--wcst-label-weight);
	font-size: var(--wcst-font-size);
	line-height: 1.4;
	color: var(--wcst-text);
	text-transform: none;
	letter-spacing: normal;
}

#wcst-tracking-app .wcst-form .required {
	color: var(--wcst-error);
}

#wcst-tracking-app .wcst-form input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: none;
	min-height: var(--wcst-field-height);
	margin: 0;
	padding: 0 var(--wcst-space);
	font-family: var(--wcst-font-family);
	font-size: var(--wcst-font-size);
	line-height: var(--wcst-line-height);
	color: var(--wcst-text);
	background: var(--wcst-bg);
	border: var(--wcst-border-width) solid var(--wcst-border);
	border-radius: var(--wcst-radius);
	box-shadow: none;
	outline: 0;
	transition: border-color 0.15s, box-shadow 0.15s;
}

#wcst-tracking-app .wcst-form input:focus {
	border-color: var(--wcst-border-focus);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--wcst-border-focus) 15%, transparent );
}

#wcst-tracking-app .wcst-form input::placeholder {
	color: var(--wcst-text-muted);
	opacity: 1;
}

#wcst-tracking-app .wcst-form .button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--wcst-button-padding);
	font-family: var(--wcst-font-family);
	font-size: var(--wcst-font-size);
	font-weight: var(--wcst-label-weight);
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	color: #fff;
	background: var(--wcst-primary);
	border: 0;
	border-radius: var(--wcst-radius-button);
	box-shadow: none;
	cursor: pointer;
	transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}

#wcst-tracking-app .wcst-form .button:hover {
	color: #fff;
	background: var(--wcst-primary-hover);
}

/* ----- Results (baseline) ----- */
#wcst-tracking-app .wcst-tracking-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: var(--wcst-font-size);
	color: var(--wcst-text);
}

#wcst-tracking-app .wcst-tracking-table th,
#wcst-tracking-app .wcst-tracking-table td {
	padding: 10px 12px;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: var(--wcst-border-width) solid var(--wcst-border);
}

#wcst-tracking-app .wcst-tracking-table th {
	font-size: 12px;
	font-weight: var(--wcst-label-weight);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wcst-text-muted);
}

#wcst-tracking-app .wcst-track-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 7px 16px;
	font-family: var(--wcst-font-family);
	font-size: 13px;
	font-weight: var(--wcst-label-weight);
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
	background: var(--wcst-primary);
	border: 0;
	border-radius: var(--wcst-radius-button);
	cursor: pointer;
}

/* ----- Tracking number + copy button row ----- */
.wcst-number-row {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wcst-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	color: var(--wcst-text-muted, #aaa);
	border-radius: 3px;
	line-height: 1;
	transition: color 0.15s, background 0.15s;
}

.wcst-copy-btn:hover {
	color: var(--wcst-text, #555);
	background: color-mix( in srgb, var(--wcst-text, #000) 8%, transparent );
}

.wcst-copy-btn .wcst-icon-check {
	display: none;
}

.wcst-copy-btn--copied .wcst-icon-copy {
	display: none;
}

.wcst-copy-btn--copied .wcst-icon-check {
	display: block;
	color: var(--wcst-success, #4caf50);
}