/* 订单查询：参考「大圆角白卡片 + 分段切换 + 深色按钮」的极简风格 */
body.xol-page .wp-block-post-title { display: none; } /* 页面自带标题，隐藏主题重复的标题 */

.xol {
	--xol-ink: var(--xsp-ink, #14202b);
	--xol-line: #eceef1;
	--xol-mute: #9aa1a9;
	--xol-soft: #f5f6f8;
	max-width: 720px;
	margin: 0 auto;
	padding: 4px 0 24px;
	color: var(--xol-ink);
	font-family: inherit;
	line-height: 1.6;
}
.xol *, .xol *::before, .xol *::after { box-sizing: border-box; }
.xol [hidden] { display: none !important; }
.xol__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* 标题 */
.xol__head { margin: 6px 0 26px; text-align: center; }
.xol__title { margin: 0; font-size: clamp(1.5rem, 5.5vw, 1.875rem); font-weight: 800; letter-spacing: .04em; line-height: 1.3; }
.xol__sub { margin: 8px 0 0; color: #b4bac1; font-size: .75rem; letter-spacing: .34em; text-transform: uppercase; }

/* 查询面板 */
.xol__panel {
	padding: 18px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 14px 44px rgba(20, 32, 43, .07);
}
.xol__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 4px;
	padding: 5px;
	background: var(--xol-soft);
	border-radius: 16px;
}
.xol__tab {
	min-width: 0;
	padding: 12px 2px;
	color: #8a929a;
	font: inherit;
	font-size: .9375rem;
	line-height: 1.2;
	white-space: nowrap;
	background: transparent;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.xol__tab[aria-selected="true"] { color: #000; font-weight: 700; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .09); }
.xol__tab:focus-visible { outline: 3px solid var(--xsp-cobalt, #2436d9); outline-offset: 1px; }

.xol__fields { display: flex; gap: 12px; margin-top: 16px; }
.xol__input {
	flex: 1;
	min-width: 0;
	height: 54px;
	margin: 0;
	padding: 0 18px;
	color: var(--xol-ink);
	font: inherit;
	font-size: 16px; /* 16px 以上，iPhone 聚焦时不会自动放大页面 */
	background: #fafafa;
	border: 1px solid var(--xol-line);
	border-radius: 16px;
	box-shadow: none;
}
.xol__input::placeholder { color: #a9afb6; }
.xol__input:focus { background: #fff; border-color: var(--xol-ink); outline: 3px solid rgba(20, 32, 43, .12); outline-offset: 0; }
.xol__btn {
	flex: 0 0 auto;
	height: 54px;
	margin: 0;
	padding: 0 28px;
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	background: #1a1a1a;
	border: 0;
	border-radius: 16px;
	cursor: pointer;
}
.xol__btn:hover { background: #000; }
.xol__btn:disabled { opacity: .6; cursor: progress; }
.xol__btn:focus-visible { outline: 3px solid var(--xsp-cobalt, #2436d9); outline-offset: 2px; }
.xol__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* 蜜罐 */

/* 需要再填手机号后 4 位时：上下两行 */
.xol__panel--two .xol__fields { flex-wrap: wrap; }
.xol__panel--two .xol__input:not(.xol__input--p4) { flex: 1 1 100%; }
.xol__panel--two .xol__input--p4 { flex: 1 1 0; }

/* 提示 */
.xol__msg { margin: 16px 4px 0; min-height: 1.4em; text-align: center; font-size: .9375rem; color: #6b7783; }
.xol__msg--err { color: #c0392b; }
.xol__msg--ok { color: #2e7d32; }
.xol__privacy { margin: 26px 0 0; text-align: center; color: #b4bac1; font-size: .75rem; }
.xol-query-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; padding: 16px 18px; background: #f6f2ec; border: 1px solid #e7ded2; border-radius: 12px; }
.xol-query-code strong { display: block; color: var(--xol-ink); }
.xol-query-code p { margin: 4px 0 0; color: #747b82; font-size: .8125rem; }
.xol-query-code__value { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xol-query-code code, .xol-email-code code { color: #56391f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; font-weight: 800; letter-spacing: .04em; overflow-wrap: anywhere; }
.xol-email-code { padding: 12px 14px; background: #f6f2ec; border-radius: 8px; }
.xol-email-code small { color: #747b82; }
.xol__copy-code { flex: none; padding: 6px 10px; color: #fff; font: inherit; font-size: .8125rem; font-weight: 700; background: #1a1a1a; border: 0; border-radius: 7px; cursor: pointer; }
.xol__copy-code:hover { background: #3c352e; }
.xol__copy-code:focus-visible { outline: 3px solid rgba(36, 54, 217, .28); outline-offset: 2px; }
.xol__kv--code .xol__v { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.xol__kv--code .xol__copy-code { padding: 4px 8px; font-size: .75rem; }

/* 结果卡片 */
.xol__order {
	position: relative;
	margin-top: 18px;
	overflow: hidden;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 14px 44px rgba(20, 32, 43, .07);
}
.xol__order-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px 20px 26px;
	list-style: none;
	cursor: pointer;
}
.xol__order-head::-webkit-details-marker { display: none; }
.xol__order-head::before { content: ""; position: absolute; left: 0; top: 22px; width: 4px; height: 26px; background: #000; border-radius: 0 4px 4px 0; }
.xol__order-head:focus-visible { outline: 3px solid var(--xsp-cobalt, #2436d9); outline-offset: -3px; }
.xol__no { min-width: 0; color: var(--xol-mute); overflow-wrap: anywhere; }
.xol__no strong { margin-left: 4px; color: var(--xol-ink); font-size: 1.0625rem; font-weight: 600; letter-spacing: .02em; }
.xol__badge { flex: 0 0 auto; padding: 6px 14px; color: #33393f; font-size: .8125rem; font-weight: 700; background: #f0f1f3; border-radius: 999px; }
.xol__badge--processing { background: #fff4d6; color: #7a5b00; }
.xol__badge--shipped { background: #e6efff; color: #1f3fb5; }
.xol__badge--done { background: #e4f5e8; color: #1d6b2e; }
.xol__badge--pending, .xol__badge--hold { background: #f0f1f3; color: #5b636b; }
.xol__badge--cancelled, .xol__badge--refunded, .xol__badge--failed { background: #fbe9e7; color: #a5301f; }

.xol__info { padding: 6px 22px 18px; border-top: 1px solid #f2f3f5; }
.xol__kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; }
.xol__k { flex: 0 0 auto; color: var(--xol-mute); }
.xol__v { min-width: 0; color: #3a4148; text-align: right; overflow-wrap: anywhere; }
.xol__kv--total { padding-top: 14px; }
.xol__kv--total .xol__v { color: #000; font-size: 1.375rem; font-weight: 800; }

.xol__section { padding: 20px 22px; background: #fafbfc; border-top: 1px solid #f0f1f3; }
.xol__section--track { background: #fff; }
.xol__h { margin: 0 0 12px; font-size: .9375rem; font-weight: 800; }
.xol__empty { margin: 0; color: var(--xol-mute); font-size: .9375rem; }

.xol__items { margin: 0; padding: 0; list-style: none; }
.xol__item { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; color: #3a4148; }
.xol__item + .xol__item { border-top: 1px dashed #eceef1; }
.xol__item-qty { flex: 0 0 auto; color: var(--xol-mute); }

/* 发货信息 */
.xol__ship {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 10px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #eef0f2;
	border-radius: 18px;
}
.xol__ship-carrier { font-weight: 700; }
.xol__ship-time { color: #b4bac1; font-size: .8125rem; }
.xol__ship-r { min-width: 0; text-align: right; }
.xol__ship-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9375rem; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.xol__ship-note { color: #3a4148; font-size: .9375rem; }
.xol__ship-tools { display: flex; justify-content: flex-end; gap: 14px; margin-top: 6px; }
.xol__link { padding: 4px 0; color: #5b636b; font: inherit; font-size: .8125rem; text-decoration: underline; background: none; border: 0; cursor: pointer; }
.xol__link:hover { color: var(--xol-ink); }

/* 状态追踪 */
.xol__timeline { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; }
.xol__timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 6px; width: 1px; background: #e3e6ea; }
.xol__tl { position: relative; padding-bottom: 22px; }
.xol__tl:last-child { padding-bottom: 0; }
.xol__tl::before { content: ""; position: absolute; left: -26px; top: 6px; width: 11px; height: 11px; background: #000; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d8dce0; }
.xol__tl-time { color: #b4bac1; font-size: .8125rem; }
.xol__tl-body { margin-top: 2px; color: #3a4148; white-space: pre-line; overflow-wrap: anywhere; }
.xol__tl-body strong { color: #000; }

@media (max-width: 480px) {
	.xol__panel { padding: 14px; border-radius: 22px; }
	.xol__tab { font-size: .875rem; }
	.xol__btn { padding: 0 22px; }
	.xol__order { border-radius: 22px; }
	.xol__order-head, .xol__info, .xol__section { padding-left: 18px; padding-right: 18px; }
	.xol__order-head { padding-left: 22px; }
	.xol__ship-r { text-align: left; width: 100%; }
	.xol__ship-tools { justify-content: flex-start; }
	.xol-query-code { align-items: flex-start; flex-direction: column; }
	.xol__kv--code .xol__v { justify-content: flex-start; }
}