/*
 * RahkarTheme — guest order tracking (پیگیری سفارش).
 *
 * Loaded only on the configured tracking page. Tokens from theme.json with px
 * fallbacks. No global border-box in this theme → padded/sized boxes set it.
 */

/* The page's own H1 is hidden — this form prints its own title. (This file
   loads only on the tracking page, so the rule is scoped to it.) */
.wp-block-post-title {
	display: none;
}

.rh-track {
	max-width: 540px;
	margin-inline: auto;
	padding-block: 8px 40px;
}
.rh-track__title {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	font-weight: var(--wp--custom--fw--strong, 400);
	text-align: center;
	color: var(--wp--preset--color--text, #1a1d23);
}
.rh-track .rh-track__hint {
	text-align: center;
}
/* Masked phone must read left-to-right (۰۹…۵۵) inside the RTL sentence. */
.rh-track__masked {
	direction: ltr;
	unicode-bidi: isolate;
	font-weight: var(--wp--custom--fw--strong, 400);
}
.rh-track__hint {
	margin: 0 0 12px;
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 1.9;
}
.rh-track__hint b {
	color: var(--wp--preset--color--text, #1a1d23);
	font-weight: var(--wp--custom--fw--strong, 400);
}

/* ── Field + button ── */
.rh-track__field {
	display: flex;
	gap: 8px;
}
.rh-track__field input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--text, #1a1d23);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base, 1rem);
	text-align: center;
	letter-spacing: 1px;
}
.rh-track__field input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
	outline-offset: 1px;
}
.rh-track__btn {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--primary, #0a66c2);
	color: var(--wp--preset--color--base, #fff);
	font-family: inherit;
	font-weight: var(--wp--custom--fw--strong, 400);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	cursor: pointer;
	transition: background 0.15s ease;
}
.rh-track__btn:hover { background: var(--wp--preset--color--primary-dark, #074a8d); }
.rh-track__btn[disabled] { opacity: 0.6; cursor: default; }

.rh-track__error {
	margin-top: 8px;
	min-height: 1.2em;
	color: var(--wp--preset--color--danger, #dc2626);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}
.rh-track__otp-actions {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
}
.rh-track__link {
	background: 0;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--primary, #0a66c2);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	cursor: pointer;
}
.rh-track__link[disabled] { color: var(--wp--preset--color--text-muted, #5b6271); cursor: default; }

/* ── Status badges ── */
.rh-track__badge {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: var(--wp--custom--fw--strong, 400);
	padding: 3px 9px;
	border-radius: var(--wp--custom--radius--pill, 9999px);
	white-space: nowrap;
}
.rh-track__badge--active { background: #eef5ff; color: var(--wp--preset--color--primary, #0a66c2); }
.rh-track__badge--done   { background: #edf7ee; color: var(--wp--preset--color--success, #198754); }
.rh-track__badge--bad    { background: #fdecec; color: var(--wp--preset--color--danger, #dc2626); }

/* ── Order list (chooser) ── */
.rh-track__list-title {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	font-weight: var(--wp--custom--fw--strong, 400);
}
.rh-track__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rh-track__order-btn {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	background: var(--wp--preset--color--surface, #f7f7f8);
	font-family: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.rh-track__order-btn:hover {
	border-color: var(--wp--preset--color--primary, #0a66c2);
	background: var(--wp--preset--color--base, #fff);
}
.rh-track__order-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.rh-track__order-no {
	font-weight: var(--wp--custom--fw--strong, 400);
	color: var(--wp--preset--color--text, #1a1d23);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}
.rh-track__order-sub {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--text-muted, #5b6271);
}
.rh-track__chev {
	flex: 0 0 auto;
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-size: 18px;
}

/* ── Reset link (above any result) ── */
.rh-track__reset {
	display: inline-block;
	margin-bottom: 12px;
}

/* ── Empty state (no orders for this phone) ── */
.rh-track__empty {
	text-align: center;
	padding: 24px 12px;
}
.rh-track__empty-icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--pill, 9999px);
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--wp--preset--color--text-muted, #5b6271);
	margin-bottom: 12px;
}
.rh-track__empty-icon svg { width: 26px; height: 26px; }
.rh-track__empty-title {
	margin: 0 0 4px;
	font-weight: var(--wp--custom--fw--strong, 400);
	font-size: var(--wp--preset--font-size--md, 1.125rem);
}
.rh-track__empty-text {
	margin: 0;
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* ── Detail ── */
.rh-track__detail {
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	padding: 16px;
	background: var(--wp--preset--color--base, #fff);
}
.rh-track__detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.rh-track__detail-no {
	font-weight: var(--wp--custom--fw--strong, 400);
	font-size: var(--wp--preset--font-size--md, 1.125rem);
}
.rh-track__detail-date {
	margin-top: 4px;
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
}

/* Timeline */
.rh-track__timeline {
	list-style: none;
	display: flex;
	padding: 0;
	margin: 20px 0;
}
.rh-track__tl-step {
	flex: 1 1 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
}
/* connector toward the next (inline-end) step */
.rh-track__tl-step::before {
	content: "";
	position: absolute;
	top: 8px;
	inset-inline-start: 50%;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--border, #e2e4e9);
	z-index: 0;
}
.rh-track__tl-step:last-child::before { display: none; }
.rh-track__tl-dot {
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border-radius: var(--wp--custom--radius--pill, 9999px);
	background: var(--wp--preset--color--base, #fff);
	border: 2px solid var(--wp--preset--color--border, #e2e4e9);
	z-index: 1;
}
.rh-track__tl-label {
	font-size: 11px;
	color: var(--wp--preset--color--text-muted, #5b6271);
}
.rh-track__tl-step.is-done .rh-track__tl-dot,
.rh-track__tl-step.is-current .rh-track__tl-dot {
	background: var(--wp--preset--color--primary, #0a66c2);
	border-color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-track__tl-step.is-done::before { background: var(--wp--preset--color--primary, #0a66c2); }
.rh-track__tl-step.is-done .rh-track__tl-label,
.rh-track__tl-step.is-current .rh-track__tl-label {
	color: var(--wp--preset--color--text, #1a1d23);
	font-weight: var(--wp--custom--fw--strong, 400);
}

.rh-track__banner {
	margin: 16px 0;
	padding: 12px;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	text-align: center;
	font-weight: var(--wp--custom--fw--strong, 400);
}
.rh-track__banner--bad { background: #fdecec; color: var(--wp--preset--color--danger, #dc2626); }

.rh-track__tracking {
	margin: 12px 0;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--surface, #f7f7f8);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}
.rh-track__tracking-val {
	font-weight: var(--wp--custom--fw--strong, 400);
	letter-spacing: 1px;
}

.rh-track__items {
	margin: 14px 0;
	border-top: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rh-track__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e4e9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}
.rh-track__item-name { flex: 1 1 auto; min-width: 0; }
.rh-track__item-qty  { flex: 0 0 auto; color: var(--wp--preset--color--text-muted, #5b6271); font-size: var(--wp--preset--font-size--xs, 0.75rem); }
.rh-track__item-total { flex: 0 0 auto; font-weight: var(--wp--custom--fw--strong, 400); }

.rh-track__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 12px 0;
	font-size: var(--wp--preset--font-size--base, 1rem);
}
.rh-track__total strong { color: var(--wp--preset--color--primary, #0a66c2); }

.rh-track__addr {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--wp--preset--color--border, #e2e4e9);
}
.rh-track__addr-title {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: var(--wp--custom--fw--strong, 400);
}
.rh-track__addr-name { font-weight: var(--wp--custom--fw--strong, 400); margin-bottom: 4px; }
.rh-track__addr-body {
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	line-height: 2;
}

@media ( max-width: 480px ) {
	.rh-track__field { flex-direction: column; }
	.rh-track__field input,
	.rh-track__btn { width: 100%; }
	.rh-track__tl-label { font-size: 10px; }
}