/* Shipmozo Tracking — customer styles. Minimal, mobile-first, theme-friendly. */
.yfs-sm {
	--yfs-fg: #111827;
	--yfs-muted: #6b7280;
	--yfs-border: #e5e7eb;
	--yfs-bg: #ffffff;
	--yfs-soft: #f9fafb;
	--yfs-accent: #111827;
	--yfs-accent-text: #ffffff;
	--yfs-info: #2563eb;
	--yfs-info-bg: #eff6ff;
	--yfs-success: #047857;
	--yfs-success-bg: #ecfdf5;
	--yfs-warning: #b45309;
	--yfs-warning-bg: #fffbeb;
	--yfs-danger: #b91c1c;
	--yfs-danger-bg: #fef2f2;
	--yfs-neutral: #374151;
	--yfs-neutral-bg: #f3f4f6;
	--yfs-radius: 12px;
	color: var(--yfs-fg);
	max-width: 760px;
	margin: 0 auto 2rem;
	font-size: 1rem;
	line-height: 1.5;
}
.yfs-sm-order-tracking { max-width: none; margin: 2rem 0; }

.yfs-sm-card {
	background: var(--yfs-bg);
	border: 1px solid var(--yfs-border);
	border-radius: var(--yfs-radius);
	padding: 1.25rem;
}
@media (min-width: 600px) { .yfs-sm-card { padding: 2rem; } }
.yfs-sm-order-tracking .yfs-sm-card { padding: 1.25rem; }

.yfs-sm-title { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; }
.yfs-sm-subtitle { font-size: 1rem; margin: 1.75rem 0 .75rem; font-weight: 600; }
.yfs-sm-muted { color: var(--yfs-muted); }
.yfs-sm-small { font-size: .875rem; }
.yfs-sm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* Form */
.yfs-sm-form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.yfs-sm .yfs-sm-field label { display: block; font-weight: 600; font-size: .875rem; margin: 0 0 .375rem; color: var(--yfs-fg); text-transform: none; letter-spacing: 0; }
.yfs-sm .yfs-sm-field input[type="text"],
.yfs-sm .yfs-sm-field input[type="email"],
.yfs-sm .yfs-sm-field input[type="tel"] {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: .75rem .875rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.4;
	background: #fff;
	color: var(--yfs-fg);
	box-shadow: none;
}
.yfs-sm .yfs-sm-field input:focus { outline: 2px solid var(--yfs-accent); outline-offset: 1px; border-color: transparent; }
.yfs-sm .yfs-sm-field input::placeholder { color: #9ca3af; opacity: 1; }
.yfs-sm-hint { margin: .375rem 0 0; font-size: .8125rem; color: var(--yfs-muted); }
.yfs-sm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/*
 * Buttons. Themes (WoodMart, Astra, etc.) style <button>/<a.button> aggressively,
 * so these rules are scoped and use !important for the core visual properties.
 */
.yfs-sm .yfs-sm-button,
.yfs-sm button.yfs-sm-button,
.yfs-sm a.yfs-sm-button {
	display: inline-flex !important;
	box-sizing: border-box !important;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: auto;
	min-height: 48px;
	padding: .75rem 1.5rem !important;
	border-radius: 8px !important;
	border: 1px solid var(--yfs-accent) !important;
	background: var(--yfs-accent) !important;
	background-image: none !important;
	color: var(--yfs-accent-text) !important;
	font-family: inherit;
	font-weight: 600 !important;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	opacity: 1;
	cursor: pointer;
}
.yfs-sm .yfs-sm-form .yfs-sm-button { width: 100%; }
.yfs-sm .yfs-sm-button:hover { filter: brightness(.9); color: var(--yfs-accent-text) !important; }
.yfs-sm .yfs-sm-button:focus-visible { outline: 3px solid var(--yfs-accent); outline-offset: 2px; }
.yfs-sm .yfs-sm-button[disabled] { opacity: .7; cursor: progress; }
.yfs-sm .yfs-sm-button--secondary,
.yfs-sm a.yfs-sm-button--secondary {
	background: transparent !important;
	color: var(--yfs-accent) !important;
}
.yfs-sm .yfs-sm-button--secondary:hover { background: var(--yfs-neutral-bg) !important; filter: none; color: var(--yfs-accent) !important; }

.yfs-sm-alert {
	margin-top: 1rem;
	padding: .75rem 1rem;
	border-radius: 8px;
	background: var(--yfs-danger-bg);
	color: var(--yfs-danger);
	font-size: .9375rem;
}

/* Meta */
.yfs-sm-meta { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0 0 1.25rem; }
.yfs-sm-meta div { min-width: 0; }
.yfs-sm-meta dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--yfs-muted); margin: 0; }
.yfs-sm-meta dd { margin: .125rem 0 0; font-weight: 600; word-break: break-all; }

/* Status */
.yfs-sm-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.yfs-sm-badge {
	display: inline-block;
	padding: .375rem .875rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: .9375rem;
}
.yfs-sm-badge--info { background: var(--yfs-info-bg); color: var(--yfs-info); }
.yfs-sm-badge--success { background: var(--yfs-success-bg); color: var(--yfs-success); }
.yfs-sm-badge--warning { background: var(--yfs-warning-bg); color: var(--yfs-warning); }
.yfs-sm-badge--danger { background: var(--yfs-danger-bg); color: var(--yfs-danger); }
.yfs-sm-badge--neutral { background: var(--yfs-neutral-bg); color: var(--yfs-neutral); }
.yfs-sm-status-text { color: var(--yfs-muted); font-size: .9375rem; }
.yfs-sm-highlight { margin: 1rem 0 0; font-weight: 600; }

/* Timeline */
.yfs-sm-timeline { list-style: none; margin: 0; padding: 0; }
.yfs-sm-event { position: relative; display: flex; gap: .875rem; padding: 0 0 1.25rem; margin: 0; }
.yfs-sm-event::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 14px;
	bottom: 0;
	width: 2px;
	background: var(--yfs-border);
}
.yfs-sm-event:last-child::before { display: none; }
.yfs-sm-event-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; background: #d1d5db; position: relative; z-index: 1; }
.yfs-sm-event--latest .yfs-sm-event-dot { background: var(--yfs-info); box-shadow: 0 0 0 4px var(--yfs-info-bg); }
.yfs-sm-event--latest.yfs-sm-event--success .yfs-sm-event-dot { background: var(--yfs-success); box-shadow: 0 0 0 4px var(--yfs-success-bg); }
.yfs-sm-event--latest.yfs-sm-event--warning .yfs-sm-event-dot { background: var(--yfs-warning); box-shadow: 0 0 0 4px var(--yfs-warning-bg); }
.yfs-sm-event--latest.yfs-sm-event--danger .yfs-sm-event-dot { background: var(--yfs-danger); box-shadow: 0 0 0 4px var(--yfs-danger-bg); }
.yfs-sm-event-body { min-width: 0; }
.yfs-sm-event-body p { margin: 0; }
.yfs-sm-event-title { font-weight: 600; }
.yfs-sm-event-desc { color: var(--yfs-fg); font-size: .9375rem; }
.yfs-sm-event-meta { color: var(--yfs-muted); font-size: .8125rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .125rem !important; }
.yfs-sm-timeline:not(.is-expanded) .yfs-sm-event--extra { display: none; }

.yfs-sm-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--yfs-info);
	font: inherit;
	font-size: .9375rem;
	cursor: pointer;
	text-decoration: underline;
}
.yfs-sm-link:focus-visible { outline: 2px solid var(--yfs-info); outline-offset: 2px; }

.yfs-sm-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--yfs-border);
}
.yfs-sm-footer p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
	.yfs-sm .yfs-sm-button { transition: filter .15s ease, background-color .15s ease; }
}

/* ---------- Progress map ---------- */
.yfs-sm-journey { margin: 1.25rem 0 .5rem; }
.yfs-sm-journey-headline { margin: 0 0 1.25rem; font-weight: 600; font-size: 1.0625rem; }
.yfs-sm-tone--success { color: var(--yfs-success); }
.yfs-sm-tone--warning { color: var(--yfs-warning); }
.yfs-sm-tone--danger { color: var(--yfs-danger); }
.yfs-sm-tone--info { color: var(--yfs-fg); }

.yfs-sm-map {
	--yfs-map-size: 44px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}
.yfs-sm-map::before,
.yfs-sm-map::after {
	content: "";
	position: absolute;
	top: calc(var(--yfs-map-size) / 2 - 2px);
	left: 12.5%;
	height: 4px;
	border-radius: 4px;
}
.yfs-sm-map::before { right: 12.5%; background: var(--yfs-border); }
.yfs-sm-map::after { width: calc(75% * var(--yfs-progress, 0) / 100); background: var(--yfs-success); }
.yfs-sm-map-stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .5rem;
	margin: 0;
	padding: 0 .25rem;
	color: var(--yfs-muted);
}
.yfs-sm-map-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--yfs-map-size);
	height: var(--yfs-map-size);
	border-radius: 50%;
	background: var(--yfs-bg);
	border: 2px solid var(--yfs-border);
	color: #9ca3af;
	box-sizing: border-box;
}
.yfs-sm-map-label { font-size: .8125rem; line-height: 1.3; font-weight: 500; }
.yfs-sm-map-stage.is-done .yfs-sm-map-icon { background: var(--yfs-success); border-color: var(--yfs-success); color: #fff; }
.yfs-sm-map-stage.is-done { color: var(--yfs-fg); }
.yfs-sm-map-stage.is-current .yfs-sm-map-icon {
	background: var(--yfs-success);
	border-color: var(--yfs-success);
	color: #fff;
	box-shadow: 0 0 0 5px var(--yfs-success-bg);
}
.yfs-sm-map-stage.is-current { color: var(--yfs-fg); }
.yfs-sm-map-stage.is-current .yfs-sm-map-label { font-weight: 700; }
.yfs-sm-map-stage.is-next .yfs-sm-map-icon { border-style: dashed; border-color: var(--yfs-success); color: var(--yfs-success); }
.yfs-sm-map-stage.is-next { color: var(--yfs-fg); }
@media (min-width: 600px) {
	.yfs-sm-map { --yfs-map-size: 52px; }
	.yfs-sm-map-label { font-size: .9375rem; }
	.yfs-sm-map-icon svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
	.yfs-sm-map-stage.is-next .yfs-sm-map-icon { animation: yfs-sm-pulse 2s ease-in-out infinite; }
}
@keyframes yfs-sm-pulse {
	0%, 100% { box-shadow: 0 0 0 0 var(--yfs-success-bg); }
	50% { box-shadow: 0 0 0 6px var(--yfs-success-bg); }
}

/* ---------- Logged-in order list ---------- */
.yfs-sm-orders-header { margin-bottom: 1rem; }
.yfs-sm-orders-header .yfs-sm-muted { margin: 0; }
.yfs-sm-order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.yfs-sm-order { margin: 0; padding: 1rem 1.25rem; }
@media (min-width: 600px) { .yfs-sm-order { padding: 1.25rem 1.5rem; } }
.yfs-sm-order.is-open { border-color: #d1d5db; box-shadow: 0 4px 16px rgba(17, 24, 39, .06); }
.yfs-sm-order-head { display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; align-items: center; }
.yfs-sm-order-head .yfs-sm-track-toggle { grid-column: 1 / -1; width: 100%; }
@media (min-width: 600px) {
	.yfs-sm-order-head { grid-template-columns: auto 1fr auto; }
	.yfs-sm-order-head .yfs-sm-track-toggle { grid-column: auto; width: auto; }
}
.yfs-sm-order-head:not(:has(.yfs-sm-thumb)) { grid-template-columns: 1fr; }
@media (min-width: 600px) { .yfs-sm-order-head:not(:has(.yfs-sm-thumb)) { grid-template-columns: 1fr auto; } }
.yfs-sm-thumb { display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--yfs-soft); border: 1px solid var(--yfs-border); }
.yfs-sm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.yfs-sm-order-info { min-width: 0; }
.yfs-sm-order-info p { margin: 0; }
.yfs-sm-order-no { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.yfs-sm-order-items { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9375rem; }
.yfs-sm-order-meta { font-size: .8125rem; }
.yfs-sm-badge--sm { font-size: .75rem; padding: .125rem .625rem; font-weight: 600; }

.yfs-sm-order-track { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--yfs-border); }
.yfs-sm-order-track[hidden] { display: none !important; }
.yfs-sm-meta--compact { margin: 1.5rem 0 0; padding: .875rem 1rem; background: var(--yfs-soft); border-radius: 8px; gap: .5rem 1.75rem; }
.yfs-sm-history-toggle { margin-top: 1rem; }
.yfs-sm-history-toggle > summary { cursor: pointer; color: var(--yfs-info); font-weight: 600; font-size: .9375rem; list-style-position: inside; }
.yfs-sm-history-toggle > summary:focus-visible { outline: 2px solid var(--yfs-info); outline-offset: 2px; }
.yfs-sm-history-toggle[open] > summary { margin-bottom: 1rem; }
.yfs-sm-history-toggle .yfs-sm-subtitle { display: none; }
.yfs-sm-order-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.25rem; }
.yfs-sm-orders-footer { margin-top: 1rem; text-align: center; }
.yfs-sm-empty { text-align: center; padding: 2rem 1.25rem; }
.yfs-sm-empty-title { font-weight: 700; font-size: 1.125rem; margin: 0 0 .25rem; }
.yfs-sm-empty-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.25rem 0 0; }
a.yfs-sm-link { text-decoration: underline; }

/* ---------- Logged-out view ---------- */
.yfs-sm-login { max-width: 520px; margin: 0 auto; }
.yfs-sm-login-form { margin-top: 1.25rem; }
.yfs-sm .yfs-sm-login-form form.login { border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.yfs-sm .yfs-sm-login-form .form-row { margin: 0 0 1rem; padding: 0; }
.yfs-sm .yfs-sm-login-form label { font-weight: 600; font-size: .875rem; text-transform: none; letter-spacing: 0; }
.yfs-sm .yfs-sm-login-form input.input-text {
	width: 100%;
	box-sizing: border-box;
	padding: .75rem .875rem;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 1rem;
	height: auto;
	background: #fff;
}
.yfs-sm .yfs-sm-login-form input.input-text:focus { outline: 2px solid var(--yfs-accent); outline-offset: 1px; border-color: transparent; }
.yfs-sm .yfs-sm-login-form button[type="submit"],
.yfs-sm .yfs-sm-login-form .woocommerce-form-login__submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	float: none !important;
	min-height: 48px;
	margin: .5rem 0 0 !important;
	padding: .75rem 1.5rem !important;
	border-radius: 8px !important;
	border: 1px solid var(--yfs-accent) !important;
	background: var(--yfs-accent) !important;
	background-image: none !important;
	color: var(--yfs-accent-text) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}
.yfs-sm .yfs-sm-login-form .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .375rem; font-weight: 400; }
.yfs-sm .yfs-sm-login-form .lost_password { margin: .75rem 0 0; font-size: .875rem; }
.yfs-sm-guest { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--yfs-border); }
.yfs-sm-guest > summary { cursor: pointer; font-weight: 600; color: var(--yfs-fg); }
.yfs-sm-guest > summary:focus-visible { outline: 2px solid var(--yfs-info); outline-offset: 2px; }
.yfs-sm-guest[open] > summary { margin-bottom: .75rem; }
.yfs-sm-form-compact .yfs-sm-muted { margin: 0; font-size: .9375rem; }
.yfs-sm .yfs-sm-order-actions .yfs-sm-button { min-height: 44px; height: auto; padding: .5rem 1.25rem !important; font-size: .9375rem !important; }
@media (max-width: 599px) {
	.yfs-sm .yfs-sm-order-actions .yfs-sm-button { width: 100%; }
	.yfs-sm-order-actions { justify-content: center; }
}
.yfs-sm .yfs-sm-login-form .form-row { float: none !important; width: 100% !important; }