/**
 * Download Button with Counter - 前端样式
 *
 * 结构说明：
 *   A. 变量定义        .wdb-wrap
 *   B. 按钮布局        无 !important，保留主题可微调的空间（尺寸/圆角等）
 *   C. 主题兼容层      唯一 "上锁" 的一层：颜色、背景、边框、下划线、阴影、字体
 *   D. 交互状态        hover / active / focus / loading
 *   E. 风格与尺寸      只改 CSS 变量，不直接写颜色
 *   F. 下载次数        颜色由 --wdb-count-color 控制（可后台配置）
 *
 * 为什么要 C 层：下载按钮是一个 <a>，很多主题写的是
 * `.entry-content a { color: green }`，权重 (0,1,1) 高于插件的 `.wdb-btn` (0,1,0)，
 * 结果按钮文字被染成主题链接色。C 层用 ".wdb-wrap .wdb-btn" (0,2,0) + !important
 * 锁住关键视觉属性，主题怎么改都不会再影响按钮配色。
 */

/* ================= A. 变量定义 ================= */

.wdb-wrap {
	--wdb-font-size: 15px;
	--wdb-pad-y: 12px;
	--wdb-pad-x: 20px;
	--wdb-radius: 12px;
	--wdb-gap: 12px;
	--wdb-bg: linear-gradient(135deg, #3b82f6, #2563eb);
	--wdb-text: #ffffff;
	--wdb-border: transparent;
	--wdb-shadow: 0 8px 20px -8px rgba(15, 23, 42, .45);
	--wdb-shadow-hover: 0 16px 28px -12px rgba(15, 23, 42, .55);

	/* 下载次数文字颜色：inherit 表示跟随主题正文颜色 */
	--wdb-count-color: inherit;
	--wdb-count-bg: rgba(148, 163, 184, .16);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 1.4em 0;
	font-family: inherit;
	font-size: var(--wdb-font-size);
	line-height: 1.35;
	box-sizing: border-box;
}

.wdb-wrap *,
.wdb-wrap *::before,
.wdb-wrap *::after {
	box-sizing: border-box;
}

.wdb-align-center {
	justify-content: center;
	text-align: center;
}

.wdb-align-right {
	justify-content: flex-end;
}

/* ================= B. 按钮布局 ================= */

.wdb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--wdb-gap);
	max-width: 100%;
	padding: var(--wdb-pad-y) var(--wdb-pad-x);
	border-radius: var(--wdb-radius);
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
}

/* 掠过式高光 */
.wdb-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%);
	transform: translateX(-130%);
	transition: transform .55s ease;
	pointer-events: none;
}

/* ================= C. 主题兼容层（关键视觉属性上锁） ================= */

.wdb-wrap .wdb-btn,
.wdb-wrap .wdb-btn:link,
.wdb-wrap .wdb-btn:visited,
.wdb-wrap .wdb-btn:hover,
.wdb-wrap .wdb-btn:focus,
.wdb-wrap .wdb-btn:active,
.wdb-wrap .wdb-btn:focus-visible {
	color: var(--wdb-text) !important;
	background: var(--wdb-bg) !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--wdb-border) !important;
	border-radius: var(--wdb-radius) !important;
	text-decoration: none !important;
	text-decoration-line: none !important;
	text-shadow: none !important;
	box-shadow: var(--wdb-shadow) !important;
	opacity: 1 !important;
	transform-origin: center;
	font-family: inherit !important;
	font-size: var(--wdb-font-size) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.25 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	word-spacing: normal !important;
	outline-offset: 2px;
}

/* 图标：锁住 fill / stroke，避免主题把线条图标填成实心色块。
   选择器写成两段类名，权重 (0,0,2,1) 高于主题常见的 `.entry-content svg` (0,0,1,1) */
.wdb-wrap .wdb-btn svg,
.wdb-wrap .wdb-count svg,
.wdb-wrap svg {
	display: block;
	width: 1.15em;
	height: 1.15em;
	fill: none !important;
	stroke: currentColor !important;
}

.wdb-wrap .wdb-count-icon svg {
	width: 14px;
	height: 14px;
}

/* ================= D. 交互状态 ================= */

.wdb-wrap .wdb-btn:hover {
	box-shadow: var(--wdb-shadow-hover) !important;
	filter: saturate(1.06);
	transform: translateY(-2px);
}

.wdb-wrap .wdb-btn:active {
	transform: translateY(0) scale(.985);
}

.wdb-wrap .wdb-btn:hover::after {
	transform: translateX(130%);
}

.wdb-wrap .wdb-btn:focus-visible {
	outline: 3px solid rgba(59, 130, 246, .55);
}

.wdb-btn.wdb-is-loading {
	pointer-events: none;
	cursor: progress;
}

.wdb-btn.wdb-is-loading .wdb-btn-icon svg {
	animation: wdb-pulse .9s ease-in-out infinite;
}

@keyframes wdb-pulse {
	0%,
	100% {
		opacity: 1;
		transform: translateY(0);
	}

	50% {
		opacity: .4;
		transform: translateY(3px);
	}
}

/* ================= 按钮内部元素 ================= */

.wdb-btn-icon,
.wdb-btn-tail {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.wdb-btn-icon {
	padding: .34em;
	border-radius: .55em;
	background: rgba(255, 255, 255, .18);
}

.wdb-btn-tail {
	opacity: .75;
	transition: transform .2s ease, opacity .2s ease;
}

.wdb-btn:hover .wdb-btn-tail {
	transform: translateX(4px);
	opacity: 1;
}

.wdb-btn-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.wdb-btn-text {
	font-weight: 700;
	white-space: nowrap;
}

.wdb-btn-meta {
	max-width: 22em;
	font-size: .76em;
	font-weight: 500;
	opacity: .82;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ================= E. 尺寸（只改变量） ================= */

.wdb-size-sm {
	--wdb-font-size: 13px;
	--wdb-pad-y: 9px;
	--wdb-pad-x: 15px;
	--wdb-radius: 10px;
	--wdb-gap: 9px;
}

.wdb-size-md {
	--wdb-font-size: 15px;
	--wdb-pad-y: 12px;
	--wdb-pad-x: 20px;
	--wdb-radius: 12px;
	--wdb-gap: 12px;
}

.wdb-size-lg {
	--wdb-font-size: 17px;
	--wdb-pad-y: 15px;
	--wdb-pad-x: 26px;
	--wdb-radius: 14px;
	--wdb-gap: 14px;
}

.wdb-size-xl {
	--wdb-font-size: 19px;
	--wdb-pad-y: 18px;
	--wdb-pad-x: 32px;
	--wdb-radius: 16px;
	--wdb-gap: 16px;
}

/* ================= E. 配色风格（只改变量） ================= */

.wdb-style-primary {
	--wdb-bg: linear-gradient(135deg, #3b82f6, #2563eb);
	--wdb-text: #ffffff;
}

.wdb-style-success {
	--wdb-bg: linear-gradient(135deg, #10b981, #059669);
	--wdb-text: #ffffff;
}

.wdb-style-danger {
	--wdb-bg: linear-gradient(135deg, #fb7185, #dc2626);
	--wdb-text: #ffffff;
}

.wdb-style-warning {
	--wdb-bg: linear-gradient(135deg, #fbbf24, #ea580c);
	--wdb-text: #ffffff;
}

.wdb-style-dark {
	--wdb-bg: linear-gradient(135deg, #475569, #0f172a);
	--wdb-text: #ffffff;
}

.wdb-style-gradient {
	--wdb-bg: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f97316);
	--wdb-text: #ffffff;
}

.wdb-style-soft {
	--wdb-bg: rgba(37, 99, 235, .1);
	--wdb-text: #1d4ed8;
	--wdb-border: rgba(37, 99, 235, .28);
	--wdb-shadow: none;
	--wdb-shadow-hover: none;
}

.wdb-style-soft .wdb-btn-icon {
	background: rgba(37, 99, 235, .16);
}

/* 描边 / 幽灵：文字颜色跟随主题（透明背景） */
.wdb-style-outline {
	--wdb-bg: transparent;
	--wdb-text: inherit;
	--wdb-border: currentColor;
	--wdb-shadow: none;
	--wdb-shadow-hover: none;
}

.wdb-wrap.wdb-style-outline .wdb-btn {
	border-width: 1.5px !important;
	border-color: currentColor !important;
	opacity: .92 !important;
}

.wdb-style-outline .wdb-btn-icon {
	background: rgba(148, 163, 184, .22);
}

.wdb-style-outline .wdb-btn::after,
.wdb-style-ghost .wdb-btn::after {
	display: none;
}

.wdb-style-ghost {
	--wdb-bg: transparent;
	--wdb-text: inherit;
	--wdb-border: transparent;
	--wdb-shadow: none;
	--wdb-shadow-hover: none;
}

.wdb-style-ghost .wdb-btn-icon {
	background: rgba(148, 163, 184, .2);
}

.wdb-wrap.wdb-style-ghost .wdb-btn:hover {
	background: rgba(148, 163, 184, .16) !important;
}

/* ================= F. 下载次数 ================= */

.wdb-wrap .wdb-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: .34em .8em;
	border-radius: 999px;
	background: var(--wdb-count-bg);
	color: var(--wdb-count-color) !important;
	font-size: .84em;
	font-weight: 500;
	white-space: nowrap;
}

.wdb-wrap .wdb-count-num {
	color: inherit !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

.wdb-wrap .wdb-count-label {
	color: inherit !important;
}

.wdb-wrap .wdb-count-icon svg {
	opacity: .75;
}

.wdb-inline-count {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

.wdb-inline-count .wdb-count-num {
	font-weight: 700;
}

/* ================= 其他 ================= */

/* 整行按钮：配合 class="wdb-full" 使用 */
.wdb-wrap.wdb-full {
	display: flex;
}

.wdb-wrap.wdb-full .wdb-btn {
	flex: 1 1 auto;
	justify-content: space-between;
}

/* 编辑器内预览（禁掉点击，避免误跳转） */
.editor-styles-wrapper .wdb-btn,
.block-editor-block-list__block .wdb-btn {
	pointer-events: none;
}

.wdb-block-fallback {
	padding: 18px;
	border: 1px dashed rgba(148, 163, 184, .6);
	border-radius: 10px;
	font-size: 13px;
	text-align: center;
	opacity: .8;
}

/* 深色环境适配 */
@media (prefers-color-scheme: dark) {
	.wdb-wrap {
		--wdb-count-bg: rgba(148, 163, 184, .22);
	}

	.wdb-style-soft {
		--wdb-bg: rgba(59, 130, 246, .18);
		--wdb-text: #93c5fd;
		--wdb-border: rgba(96, 165, 250, .35);
	}

	.wdb-style-soft .wdb-btn-icon {
		background: rgba(96, 165, 250, .22);
	}

	.wdb-wrap.wdb-style-ghost .wdb-btn:hover {
		background: rgba(148, 163, 184, .22) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wdb-btn,
	.wdb-btn::after,
	.wdb-btn-tail {
		transition: none !important;
	}

	.wdb-wrap .wdb-btn:hover {
		transform: none;
	}

	.wdb-btn.wdb-is-loading .wdb-btn-icon svg {
		animation: none;
	}
}

/* 小屏适配 */
@media (max-width: 480px) {
	.wdb-wrap {
		gap: 8px;
	}

	.wdb-btn-meta {
		max-width: 12em;
	}

	.wdb-size-lg,
	.wdb-size-xl {
		--wdb-font-size: 15px;
		--wdb-pad-y: 13px;
		--wdb-pad-x: 18px;
	}
}