.eot {
	max-width: var(--eot-max-w, 640px);
	margin: 0 auto;
	color: var(--eot-text, #111827);
	font-size: 15px;
	line-height: 1.5;
}
.eot *, .eot *::before, .eot *::after { box-sizing: border-box; }

.eot-card {
	background: var(--eot-card-bg, #fff);
	border: 1px solid var(--eot-card-border, #e5e7eb);
	border-radius: var(--eot-card-radius, 12px);
	padding: var(--eot-card-pad, 28px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	margin-bottom: 16px;
}
.eot-title { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: var(--eot-text, #111827); }
.eot-desc { margin: 0 0 20px; color: var(--eot-muted, #6b7280); }
.eot-muted { color: var(--eot-muted, #6b7280); font-size: 13px; }

/* ---------- Form ---------- */
.eot-field { margin-bottom: 16px; }
.eot-field label { display: block; margin-bottom: 6px; font-weight: 600; }
.eot-field input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	font-size: 15px;
	color: var(--eot-text, #111827);
	background: #fff;
	border: 1px solid var(--eot-input-border, #d1d5db);
	border-radius: var(--eot-input-radius, 8px);
	box-shadow: none;
}
.eot-field input:focus {
	outline: 0;
	border-color: var(--eot-input-focus, #2563eb);
	box-shadow: 0 0 0 1px var(--eot-input-focus, #2563eb);
}
.eot-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Buttons ---------- */
.eot .eot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--eot-btn-h, 48px);
	padding: 0 24px;
	margin: 0;
	font-size: var(--eot-btn-font, 16px);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--eot-btn-radius, 8px);
	background: var(--eot-btn-bg, #111) !important;
	color: var(--eot-btn-color, #fff) !important;
	border-color: var(--eot-btn-border, #111) !important;
	transition: background-color .2s, color .2s, border-color .2s;
}
.eot .eot-btn:hover {
	background: var(--eot-btn-hover-bg, #333) !important;
	color: var(--eot-btn-hover-color, #fff) !important;
}
.eot .eot-btn--secondary {
	width: auto;
	background: var(--eot-sec-bg, #2563eb) !important;
	color: var(--eot-sec-color, #fff) !important;
	border-color: var(--eot-sec-bg, #2563eb) !important;
}
.eot .eot-btn--secondary:hover {
	background: var(--eot-sec-hover-bg, #1d4ed8) !important;
	color: var(--eot-sec-hover-color, #fff) !important;
	border-color: var(--eot-sec-hover-bg, #1d4ed8) !important;
}

/* ---------- Notices ---------- */
.eot-notice { padding: 12px 14px; margin-bottom: 16px; border-radius: 8px; font-size: 14px; }
.eot-notice--error {
	color: var(--eot-danger, #dc2626);
	background: rgba(220, 38, 38, .07);
	border: 1px solid rgba(220, 38, 38, .25);
}

/* ---------- Result ---------- */
.eot-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eot-order { margin: 0; font-size: 22px; font-weight: 700; color: var(--eot-text, #111827); }
.eot-badge {
	display: inline-block;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	color: #fff;
}
.eot-badge--done { background: var(--eot-done, #16a34a); }
.eot-badge--current { background: var(--eot-current, #2563eb); }
.eot-badge--danger { background: var(--eot-danger, #dc2626); }

.eot-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 16px 0 4px;
	padding: 14px 0;
	border-top: 1px solid var(--eot-card-border, #e5e7eb);
	border-bottom: 1px solid var(--eot-card-border, #e5e7eb);
}
.eot-meta div { display: flex; flex-direction: column; }

/* ---------- Progress timeline ---------- */
.eot-steps { display: flex; margin: 28px 0 8px; padding: 0; list-style: none; }
.eot-step { position: relative; flex: 1; text-align: center; }
.eot-step::before {
	content: "";
	position: absolute;
	top: 21px;
	inset-inline-start: -50%;
	width: 100%;
	height: 3px;
	background: var(--eot-pending, #d1d5db);
	z-index: 0;
}
.eot-step:first-child::before { display: none; }
.eot-step.is-done::before,
.eot-step.is-current::before { background: var(--eot-done, #16a34a); }

.eot-step__dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 8px;
	border-radius: 50%;
	color: #fff;
	background: var(--eot-pending, #d1d5db);
}
.eot-step.is-done .eot-step__dot { background: var(--eot-done, #16a34a); }
.eot-step.is-current .eot-step__dot {
	background: var(--eot-current, #2563eb);
	box-shadow: 0 0 0 5px var(--eot-current-soft, rgba(37, 99, 235, .2));
}
.eot-step__text { display: block; }
.eot-step__label { display: block; font-size: 13px; font-weight: 600; }
.eot-step__date { display: block; font-size: 12px; color: var(--eot-muted, #6b7280); }
.eot-step.is-pending .eot-step__label { color: var(--eot-muted, #6b7280); }

/* ---------- Tracking box / items / updates ---------- */
.eot-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 20px 0;
	padding: 16px;
	background: rgba(0, 0, 0, .025);
	border: 1px solid var(--eot-card-border, #e5e7eb);
	border-radius: 10px;
}
.eot-box__info > div + div { margin-top: 4px; }

.eot-sub { margin: 22px 0 8px; font-size: 15px; font-weight: 700; color: var(--eot-text, #111827); }
.eot-items, .eot-updates { margin: 0; padding: 0; list-style: none; }
.eot-items li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--eot-card-border, #e5e7eb);
}
.eot-updates li { padding: 10px 0; border-bottom: 1px solid var(--eot-card-border, #e5e7eb); }
.eot-updates li p { margin: 2px 0 0; }
.eot-back { margin: 22px 0 0; }
.eot-back a { color: var(--eot-current, #2563eb); text-decoration: none; font-weight: 600; }

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
	.eot-steps { flex-direction: column; gap: 14px; }
	.eot-step { display: flex; align-items: center; gap: 12px; text-align: start; }
	.eot-step::before { display: none; }
	.eot-step__dot { margin: 0; flex: 0 0 44px; }
	.eot-box { flex-direction: column; align-items: stretch; }
	.eot .eot-btn--secondary { width: 100%; }
}