/* =============================================================================
   DIGITAL TIENDA — TRACK ORDER PAGE
   Loaded only on /track-order/ via inc/enqueue.php
   =============================================================================

   WHAT WAS WRONG WITH THE PREVIOUS VERSION
   It styled only .dt-track-header and left the actual WooCommerce form
   completely unstyled, so form.track_order inherited full page width and
   browser-default inputs. Worse, .dt-track-header does not exist in the
   rendered HTML at all — nothing on the page outputs it — so every rule in
   the old file matched zero elements.

   Verified markup that WooCommerce actually outputs here (form-tracking.php):
     form.woocommerce-form.woocommerce-form-track-order.track_order
       p                          (intro copy)
       p.form-row.form-row-first  > label[for=orderid]     + input#orderid
       p.form-row.form-row-last   > label[for=order_email] + input#order_email
       div.clear
       p.form-row                 > button.button[name=track]
   Everything below targets those real class names.

   The .dt-track-header rules are KEPT at the bottom so the file still works if
   you add that header block later, but they are no longer load-bearing.
   ============================================================================= */

.woocommerce form.track_order,
.dt-track-wrap {
	--dt: #12866f;
	--dt-dark: #0d6b58;
	--dt-pale: #e8f5f1;
	--dt-bg: #f4faf8;
	--text: #16202b;
	--muted: #68707c;
	--line: #e4e9ee;
}

/* ─────────────────────────────────────────────────────────────
   THE FORM — boxed card instead of a full-width strip
   ───────────────────────────────────────────────────────────── */
.woocommerce form.track_order {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 620px;
	margin: 40px auto 72px;
	padding: 34px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(18, 134, 111, .07);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--text);
}

.woocommerce form.track_order *,
.woocommerce form.track_order *::before,
.woocommerce form.track_order *::after {
	box-sizing: border-box;
}

/* Intro paragraph — the only bare <p> that is not a .form-row */
.woocommerce form.track_order > p:not(.form-row) {
	margin: 0 0 26px;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────────
   FIELDS
   WooCommerce floats .form-row-first / .form-row-last at 47%.
   Floats are cleared with a stray <div class="clear">, which is fragile and
   leaves uneven gutters. Grid replaces them: no float, no clearfix needed.
   ───────────────────────────────────────────────────────────── */
.woocommerce form.track_order .form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
}

.woocommerce form.track_order .clear {
	display: none !important;
}

.woocommerce form.track_order label {
	display: block;
	margin-bottom: 7px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.woocommerce form.track_order input.input-text {
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid #d9e2e8;
	border-radius: 10px;
	background: #fff;
	color: var(--text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	outline: none;
	transition: border-color .18s, box-shadow .18s;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce form.track_order input.input-text::placeholder {
	color: #9aa8b4;
	font-size: 14px;
}

.woocommerce form.track_order input.input-text:hover {
	border-color: #c4d0d9;
}

.woocommerce form.track_order input.input-text:focus {
	border-color: var(--dt);
	box-shadow: 0 0 0 3px rgba(18, 134, 111, .14);
}

/* ─────────────────────────────────────────────────────────────
   BUTTON
   Both the browser default and the theme add their own background and border,
   so appearance:none plus explicit values is required — not optional.
   ───────────────────────────────────────────────────────────── */
.woocommerce form.track_order .form-row:last-of-type {
	margin-bottom: 0 !important;
	margin-top: 26px !important;
}

.woocommerce form.track_order button.button,
.woocommerce form.track_order button[name="track"] {
	display: block;
	width: 100%;
	padding: 15px 24px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--dt) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s, transform .18s, box-shadow .18s;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce form.track_order button.button:hover {
	background: var(--dt-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 5px 18px rgba(13, 107, 88, .26);
}

.woocommerce form.track_order button.button:active {
	transform: translateY(0);
}

.woocommerce form.track_order button.button:focus-visible,
.woocommerce form.track_order input:focus-visible {
	outline: 2px solid var(--dt);
	outline-offset: 2px;
}

/* Two columns once there is room for them */
@media (min-width: 560px) {
	.woocommerce form.track_order {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 18px;
	}

	.woocommerce form.track_order > p:not(.form-row),
	.woocommerce form.track_order .form-row:last-of-type,
	.woocommerce form.track_order > input[type="hidden"] {
		grid-column: 1 / -1;
	}

	.woocommerce form.track_order button.button {
		width: auto;
		min-width: 200px;
		margin: 0 auto;
	}
}

/* ─────────────────────────────────────────────────────────────
   RESULTS — shown after a successful lookup
   WooCommerce renders order-details.php: a status paragraph, an order meta
   list, and the shop_table. None of it was styled before either.
   ───────────────────────────────────────────────────────────── */
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details,
.woocommerce ul.woocommerce-order-overview {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 780px;
	margin: 0 auto 32px;
}

.woocommerce ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.woocommerce-order-overview li {
	flex: 1 1 150px;
	padding: 14px 16px;
	border: 1px solid #e4e9ee;
	border-radius: 10px;
	background: #f4faf8;
	color: #68707c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.woocommerce ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 5px;
	color: #16202b;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce table.shop_table.order_details {
	width: 100%;
	border: 1px solid #e4e9ee;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 12px;
	overflow: hidden;
}

.woocommerce table.shop_table.order_details th,
.woocommerce table.shop_table.order_details td {
	padding: 13px 16px;
	border-bottom: 1px solid #e4e9ee;
	text-align: left;
	font-size: 14px;
}

.woocommerce table.shop_table.order_details thead th {
	background: #f4faf8;
	color: #68707c;
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.woocommerce table.shop_table.order_details tfoot tr:last-child th,
.woocommerce table.shop_table.order_details tfoot tr:last-child td {
	border-bottom: 0;
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   NOTICES — "order not found", validation errors
   ───────────────────────────────────────────────────────────── */
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 620px;
	margin: 26px auto 0;
	padding: 14px 18px;
	border: 1px solid #e4e9ee;
	border-top: 0;
	border-left: 3px solid #12866f;
	border-radius: 10px;
	background: #f4faf8;
	font-size: 14.5px;
	line-height: 1.6;
}

.woocommerce .woocommerce-error {
	border-left-color: #d94b3f;
	background: #fdf1f0;
	color: #a5342a;
}

.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before {
	display: none;
}

/* ─────────────────────────────────────────────────────────────
   OPTIONAL PAGE HEADER
   Kept from the previous file. Nothing currently outputs .dt-track-header —
   these rules match zero elements until that block is added. Harmless to keep,
   but do not expect them to do anything on their own.
   ───────────────────────────────────────────────────────────── */
.dt-track-header {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 780px;
	margin: 60px auto 0;
	text-align: center;
}

.dt-track-eyebrow {
	display: block;
	margin-bottom: 10px;
	color: #12866f;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.dt-track-header h1 {
	margin: 0 0 14px;
	color: #16202b;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.dt-track-header p {
	max-width: 590px;
	margin: 0 auto;
	color: #68707c;
	font-size: 16px;
	line-height: 1.7;
}

.dt-track-header + .woocommerce form.track_order,
.dt-track-header ~ .woocommerce form.track_order {
	margin-top: 32px;
}

/* ───────────────────────────────────────────────────────────── */
@media (max-width: 559px) {
	.woocommerce form.track_order {
		margin: 28px auto 52px;
		padding: 22px 18px;
	}

	/* 16px stops iOS zooming the page when a field receives focus */
	.woocommerce form.track_order input.input-text {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce form.track_order input.input-text,
	.woocommerce form.track_order button.button {
		transition: none;
	}

	.woocommerce form.track_order button.button:hover {
		transform: none;
	}
}