/**
 * MOK 资源商城前端样式（插件自带，filemtime 版本）。
 *
 * 颜色/圆角/间距/阴影全部来自主题 theme.json 的 token：
 *   var(--wp--preset--color--*) / var(--wp--custom--radius--card) / var(--wp--custom--shadow--card)
 * 这里不写死品牌十六进制色值，也不使用 !important。
 */

/* ---------- 文章正文底部的资源卡 ---------- */
.mok-shop-card {
	margin-block-start: var(--wp--custom--grid--gap);
	padding: var(--wp--custom--card--padding);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--light);
	box-shadow: var(--wp--custom--shadow--card);
	color: var(--wp--preset--color--ink);
}

.mok-shop-card__heading {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--h-3, 22px);
	line-height: 1.4;
}

.mok-shop-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-block-end: 12px;
}

.mok-shop-card__name {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.mok-shop-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.mok-shop-card__badge--free {
	background: var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

.mok-shop-card__badge--paid {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mok-shop-card__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px 16px;
	margin: 0 0 16px;
	padding: 0;
}

.mok-shop-card__meta-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mok-shop-card__meta-item dt {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

.mok-shop-card__meta-item dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mok-shop-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.mok-shop-card__hint,
.mok-shop-card__notice {
	margin: 0;
	flex: 1 1 100%;
	font-size: 13px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

.mok-shop-card__notice {
	padding: 8px 12px;
	border-inline-start: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* ---------- 按钮（直角 42px 高，与主题主按钮一致） ---------- */
.mok-shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 42px;
	padding: 0 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.mok-shop-btn:hover,
.mok-shop-btn:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.mok-shop-btn--primary,
.mok-shop-form .mok-shop-btn--primary {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mok-shop-btn--primary:hover,
.mok-shop-btn--primary:focus-visible {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

.mok-shop-form {
	display: inline-flex;
	margin: 0;
}

/* ---------- 网盘链接与提取码 ---------- */
.mok-shop-netdisk {
	width: 100%;
}

.mok-shop-netdisk > summary {
	cursor: pointer;
	list-style-position: inside;
}

.mok-shop-netdisk > summary::marker {
	color: currentColor;
}

.mok-shop-netdisk__body {
	margin-block-start: 12px;
	padding: 12px;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
}

.mok-shop-netdisk__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 14px;
}

.mok-shop-netdisk__row:last-child {
	margin-block-end: 0;
}

.mok-shop-netdisk__label {
	color: var(--wp--preset--color--muted);
}

.mok-shop-netdisk__link {
	overflow-wrap: anywhere;
}

.mok-shop-netdisk__code {
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--light);
	font-family: var(--wp--preset--font-family--mono);
}

.mok-shop-copy {
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 13px;
	cursor: pointer;
}

.mok-shop-copy:hover,
.mok-shop-copy:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ---------- 归档页 ---------- */
.mok-shop-archive__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: var(--wp--custom--grid--gap);
}

/*
 * 分类胶囊导航：占满工具栏一整行（`flex-basis:100%`），390px 靠 wrap 换行，
 * 不产生横向滚动；胶囊外观复用 .mok-shop-filter，避免同一控件两套样式。
 */
.mok-shop-archive__cats {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-basis: 100%;
	min-width: 0;
}

.mok-shop-cats {
	min-width: 0;
}

.mok-shop-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-shop-filter--cat {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.mok-shop-archive__notice {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

.mok-shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-shop-filter {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	text-decoration: none;
}

.mok-shop-filter:hover,
.mok-shop-filter:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.mok-shop-filter.is-active {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mok-shop-archive__count {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

.mok-shop-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--grid--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-shop-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mok-shop-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mok-shop-item {
	display: flex;
	min-width: 0;
}

.mok-shop-item__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--card);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
}

.mok-shop-item__link:hover,
.mok-shop-item__link:focus-visible {
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.mok-shop-item__media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wp--preset--color--light);
}

/* 图片绝对定位：脱离文档流后媒体框高度只由 aspect-ratio 决定，
   同一行卡片的缩略图因此等高（原来 height:100% + 固有高度会把卡撑成不同高度）。 */
.mok-shop-item__media img,
.mok-shop-item__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.mok-shop-item__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--muted);
	/* 无图卡片：用 token 做一层同调渐变底 + 图标 + 小字，避免变成一块空灰块。 */
	background: var(--wp--preset--gradient--surface-fade);
}

.mok-shop-item__placeholder-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
	opacity: 0.85;
}

.mok-shop-item__placeholder-text {
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.mok-shop-item__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	min-width: 0;
}

.mok-shop-item__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.mok-shop-item__name {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.mok-shop-item__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 8px;
}

.mok-shop-item__price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.mok-shop-item__price--free {
	color: var(--wp--preset--color--ink);
}

.mok-shop-item__downloads {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

.mok-shop-pagination {
	margin-block-start: var(--wp--custom--grid--gap);
}

.mok-shop-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	text-decoration: none;
}

.mok-shop-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mok-shop-empty {
	padding: 32px 24px;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	text-align: center;
}

.mok-shop-empty__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
}

.mok-shop-empty__text {
	margin: 0 0 16px;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.7;
}

.mok-shop-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

/* ---------- 响应式：1024 / 768 / 390 ---------- */
@media (max-width: 1024px) {
	.mok-shop-grid,
	.mok-shop-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.mok-shop-card {
		padding: 16px;
	}

	.mok-shop-grid,
	.mok-shop-grid--2,
	.mok-shop-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mok-shop-item__body {
		padding: 12px;
	}
}

@media (max-width: 480px) {
	.mok-shop-grid,
	.mok-shop-grid--2,
	.mok-shop-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 后台资源面板 / 订单页 ---------- */
.mok-shop-admin__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px 20px;
}

.mok-shop-field {
	margin: 0 0 8px;
}

.mok-shop-field > label {
	display: block;
	margin-block-end: 4px;
	font-weight: 600;
}

.mok-shop-field__error {
	display: block;
	margin-block-start: 4px;
	color: var(--wp--preset--color--primary-deep);
	font-weight: 600;
}

.mok-shop-admin__errors {
	margin: 0 0 8px 18px;
	list-style: disc;
}

.mok-shop-orders__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-block: 12px;
}

.mok-shop-orders__table {
	margin-block-start: 8px;
}

/* ---------- 后台订单列表：小屏局部横滚 + 状态辨识 ---------- */

/*
 * 小屏只让表格自己横滚（局部），不用 overflow-x:hidden 掩盖整页溢出：
 * 390px 下 documentElement 不再被 620px 宽的表格顶出去。
 */
.mok-shop-tablewrap {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mok-shop-orders__table {
	min-width: 0;
}

/*
 * 状态徽标：四态除文字外还有底色/描边差异，颜色不是唯一信息
 * （span 里始终是纯文本状态名，读屏与色弱用户都能读出）。
 * 颜色全部走 theme.json 的可编辑 token；后台页面由插件把 token 变量注入，
 * 变量缺失时 color 回落 currentColor，不会变成不可见。
 */
.mok-shop-status {
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
}

.mok-shop-status--pending {
	border-color: var(--wp--preset--color--muted, currentColor);
	border-style: dashed;
	background: var(--wp--preset--color--surface, transparent);
	color: var(--wp--preset--color--muted, currentColor);
}

.mok-shop-status--paid {
	border-color: var(--wp--preset--color--primary, currentColor);
	background: var(--wp--preset--color--primary, currentColor);
	color: var(--wp--preset--color--white, Canvas);
}

.mok-shop-status--closed {
	border-color: var(--wp--preset--color--border, currentColor);
	background: var(--wp--preset--color--elevated, transparent);
	color: var(--wp--preset--color--ink, currentColor);
}

.mok-shop-status--refunded {
	border-color: var(--wp--preset--color--primary-deep, currentColor);
	background: var(--wp--preset--color--icon-bg, transparent);
	color: var(--wp--preset--color--primary-deep, currentColor);
}

/* 782px 以下收起次要列：用户与创建时间在「查看详情」里完整展示 */
@media screen and (max-width: 782px) {
	.mok-shop-orders__table .mok-shop-orders__col--user,
	.mok-shop-orders__table .mok-shop-orders__col--created {
		display: none;
	}
}

/* ---------- 可访问性与状态补充 ---------- */

/* 读屏专用文本（复制成功的 aria-live 反馈），不占视觉空间 */
.mok-shop-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 资源卡底部「查看全部资源」：次要链接，不抢主按钮的注意力 */
.mok-shop-card__all {
	margin-block-start: 12px;
	margin-block-end: 0;
	font-size: 14px;
}

/* 价格未配置：用描边提示而不是彩色块，避免与品牌色混淆 */
.mok-shop-item__price--error {
	padding: 1px 8px;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* 「我的已购资源」页（[mok_shop_my_resources]）                       */
/* ------------------------------------------------------------------ */
.mok-shop-my {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 24px);
}

.mok-shop-my__heading {
	margin: 0;
	font-size: 20px;
}

.mok-shop-my__notice {
	margin: 0;
	padding: 12px 16px;
	border-inline-start: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--ink);
}

.mok-shop-my__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mok-shop-my__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
}

.mok-shop-my__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 260px;
}

.mok-shop-my__title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mok-shop-my__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

.mok-shop-my__hint {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

/* ---------- 支付结果页（主题模板内渲染：页头 / 面包屑 / main / 页脚） ---------- */
.mok-shop-result {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mok-shop-result__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h3, 24px);
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-shop-result__badge {
	margin: 0;
}

.mok-shop-result__pill {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
}

.mok-shop-result__status {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.mok-shop-result__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px 24px;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--light);
}

.mok-shop-result__meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mok-shop-result__meta-item dt {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

.mok-shop-result__meta-item dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

.mok-shop-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.mok-shop-result__hint {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}

/*
 * 焦点可见：结果页的按钮/链接必须有明确的 outline。
 * 主题全局用的是零优先级的 `:where(...)`，这里给出同 token 的显式声明，
 * 保证以后任何组件覆盖 outline 时结果页仍然看得见焦点（不使用 !important）。
 */
.mok-shop-result a:focus-visible,
.mok-shop-result button:focus-visible,
.mok-shop-result__pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mok-shop-pay-error {
	margin: 12px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-inline-start: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--ink);
}

/* 后台仪表盘 / 定时任务 / 诊断 */
.mok-shop-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 12px 0 20px;
}

.mok-shop-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--border, #dcdcde);
	border-radius: 6px;
	background: var(--wp--preset--color--white, #fff);
}

.mok-shop-stat__label,
.mok-shop-stat__desc {
	color: var(--wp--preset--color--muted, #50575e);
	font-size: 12px;
}

.mok-shop-stat__value {
	font-size: 22px;
	line-height: 1.2;
}

.mok-shop-cron {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.mok-shop-cron__form {
	margin: 0;
}

@media (max-width: 600px) {
	.mok-shop-my__item {
		align-items: flex-start;
	}
}