/**
 * Vyonika — Track Order lookup form
 * (glozin-child/page-track-order.php, form state only)
 *
 * The order-detail view itself reuses view-order.css (shared with the
 * account "View Order" page) via gzm_vy_render_order_view() — this file
 * only styles the "enter Order ID + mobile number" form shown before a
 * match is found.
 *
 * Tokens match the rest of the site: white bg, #DDDDDD hairline
 * borders, 8px radius on inputs/button, solid black button, brand red
 * only for the error state.
 */

/* Cancel the parent theme's default top/bottom padding on #site-content
   for this page too — that padding (3.375rem top, 5.625rem bottom) is
   meant to create breathing room under a page-header bar and above the
   footer, but we removed the page-header entirely above, so it was
   just showing up as unwanted empty space before and after our content. */
.site-content:has(.vy-track-page),
.site-content:has(.vy-container) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* Fallback for browsers without :has() support */
body.page-template-page-track-order-php .site-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.vy-track-page {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
	background: #F1F2F4;
}

.vy-track-card {
	width: 100%;
	max-width: 380px;
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #EFEFEF;
	padding: 28px 22px;
	box-sizing: border-box;
}

.vy-track-title {
	font-family: var(--gz-body-font, 'Instrument Sans', Arial, sans-serif);
	font-size: 20px;
	font-weight: 700;
	color: #15171A;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.vy-track-sub {
	font-family: var(--gz-body-font, 'Instrument Sans', Arial, sans-serif);
	font-size: 13px;
	color: #6B6F76;
	margin: 0 0 20px;
	line-height: 1.5;
}

.vy-track-error {
	font-family: var(--gz-body-font, 'Instrument Sans', Arial, sans-serif);
	font-size: 12.5px;
	color: var(--gz-color-primary, #d0473e);
	background: #FBEBEA;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 16px;
}

.vy-track-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vy-track-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vy-track-field span {
	font-family: var(--gz-body-font, 'Instrument Sans', Arial, sans-serif);
	font-size: 12px;
	font-weight: 600;
	color: #15171A;
}

.vy-track-field input {
	font-family: var(--gz-body-font, 'Instrument Sans', Arial, sans-serif);
	font-size: 14px;
	color: #15171A;
	background: #ffffff;
	border: 1px solid #DDDDDD;
	border-radius: 8px;
	padding: 12px 14px;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.vy-track-field input::placeholder {
	color: rgba(17, 17, 17, 0.45);
}

.vy-track-field input:hover,
.vy-track-field input:focus {
	border-color: #111111;
}

.vy-track-submit {
	font-family: var(--gz-body-font, 'Instrument Sans', Arial, sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	background: #111111;
	border: 1px solid #111111;
	border-radius: 8px;
	padding: 13px;
	margin-top: 4px;
	cursor: pointer;
}

.vy-track-submit:hover {
	opacity: 0.92;
}