:root {
	--fodmap-low:    #22c55e;
	--fodmap-medium: #eab308;
	--fodmap-high:   #ef4444;
	--fodmap-primary:        var(--fodmap-low);
	--fodmap-primary-hover:  color-mix(in srgb, var(--fodmap-primary) 86%, #000);
	--fodmap-primary-active: color-mix(in srgb, var(--fodmap-primary) 72%, #000);
	--fodmap-on-primary:     #fff;
	--fodmap-bg:     #fff;
	--fodmap-text:   #1f2937;
	--fodmap-muted:  #6b7280;
	--fodmap-border: #e5e7eb;
	--fodmap-focus:  color-mix(in srgb, var(--fodmap-primary) 40%, transparent);
	--fodmap-radius: 10px;
}

.fodmap-shortcode,
.fodmap-fv-search-page {
	--fodmap-low:            var(--color-success,       #22c55e);
	--fodmap-primary:        var(--color-primary,       #4a8c5e);
	--fodmap-primary-hover:  var(--color-primary-dark,  #3a724a);
	--fodmap-primary-active: color-mix(in srgb, var(--color-primary, #4a8c5e) 72%, #000);
	--fodmap-focus:          color-mix(in srgb, var(--color-primary, #4a8c5e) 40%, transparent);

	--fodmap-bg:     var(--color-bg,              #fff);
	--fodmap-text:   var(--color-text-secondary,  #444);
	--fodmap-muted:  var(--color-text-muted,      #888);
	--fodmap-border: var(--color-border,          #e0e0e0);
}

.fodmap-search-form {
	display: flex; flex-wrap: wrap; gap: 10px;
	align-items: stretch; margin-bottom: 24px;
}
.fodmap-search-input,
.fodmap-search-form select,
.fodmap-search-form button {
	font-size: 14px; line-height: 1.35;
	padding: 8px 12px;
	border: 1px solid var(--fodmap-border);
	border-radius: var(--fodmap-radius);
	background: var(--fodmap-bg);
	color: var(--fodmap-text);
	transition: border-color .15s, box-shadow .15s, background-color .15s, color .15s, transform .05s;
	outline: none;
}
.fodmap-search-input { flex: 1 1 220px; min-width: 0; }

.fodmap-search-input:focus,
.fodmap-search-form select:focus,
.fodmap-search-form button:focus-visible,
.fodmap-pagination a:focus-visible,
.fodmap-pagination span:focus-visible {
	border-color: var(--fodmap-primary);
	box-shadow: 0 0 0 3px var(--fodmap-focus);
}

button.fodmap-search-submit {
	background: var(--fodmap-primary);
	color: var(--fodmap-on-primary);
	border-color: var(--fodmap-primary);
	font-weight: 600;
	cursor: pointer;
	padding-inline: 18px;
}
button.fodmap-search-submit:hover {
	background: var(--fodmap-primary-hover);
	border-color: var(--fodmap-primary-hover);
}
button.fodmap-search-submit:active {
	background: var(--fodmap-primary-active);
	border-color: var(--fodmap-primary-active);
	transform: translateY(1px);
}
button.fodmap-search-submit:disabled { opacity: .55; cursor: not-allowed; }

.fodmap-search-reset {
	background: transparent;
	color: var(--fodmap-primary);
	border: 1px solid var(--fodmap-primary);
	cursor: pointer;
	text-decoration: none;
	font-weight: 500;
	padding-inline: 14px;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: var(--fodmap-radius);
}
.fodmap-search-reset:hover {
	background: color-mix(in srgb, var(--fodmap-primary) 12%, transparent);
	color: var(--fodmap-primary-active);
}
.fodmap-search-reset:active {
	background: color-mix(in srgb, var(--fodmap-primary) 22%, transparent);
}

.fodmap-cards-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
/* 平板：每行 2 个，避免 4 列在小屏过窄 */
@media (max-width: 992px) {
	.fodmap-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fodmap-food-card {
	background: var(--fodmap-bg);
	border: 1px solid var(--fodmap-border);
	border-radius: var(--fodmap-radius);
	padding: 16px;
	transition: transform .15s, box-shadow .15s, border-color .15s;
	color: var(--fodmap-text);
	/* 锚点跳转（如微信图文 #food-123）时，避免被吸顶导航遮挡 */
	scroll-margin-top: 90px;
}
.fodmap-food-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
	border-color: color-mix(in srgb, var(--fodmap-primary) 35%, var(--fodmap-border));
}
.fodmap-food-header {
	display: flex; justify-content: space-between; align-items: center;
	gap: 8px; margin-bottom: 4px;
}
.fodmap-food-name { margin: 0; font-size: 17px; line-height: 1.2; }
/* 抵消主题 .post-content h1~h6 的 margin-top:1rem：该 margin 经折叠会把 .fodmap-food-header 整体顶下 1rem。
   用卡片上下文提升优先级(0,2,0)压过全局(0,1,1)，仅此一条即覆盖短代码/搜索页/小工具所有页面 */
.fodmap-food-card .fodmap-food-name { margin-top: 0; }
/* 第一行：中文名(左) + 等级徽标(右)；header 用 align-items:center 让二者垂直居中对齐，
   中文名行高收紧到 1.2、徽标行高 1.4，使不同字号盒子高度接近、视觉上真正居中 */
.fodmap-food-cn { display: block; }
/* 第二行：英文名作为整行副标题，位于 header 下方 */
.fodmap-food-en { color: var(--fodmap-muted); font-size: 13px; font-weight: 400; line-height: 1.4; margin-bottom: 6px; }

.fodmap-level-badge {
	display: inline-block; padding: 2px 10px;
	border-radius: 10px; font-size: 12px; line-height: 1.4; color: #fff; font-weight: 600;
	white-space: nowrap;
}
.fodmap-level-badge.level-low    { background: var(--fodmap-low); }
.fodmap-level-badge.level-medium { background: #ca8a04; color: #fff; }
.fodmap-level-badge.level-high   { background: var(--fodmap-high); }

.fodmap-food-meta {
	display: flex; gap: 12px; flex-wrap: wrap;
	font-size: 12px; color: var(--fodmap-muted); margin-bottom: 10px;
}

.fv-component { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.fv-comp-label {
	width: 90px; font-size: 12px; color: var(--fodmap-muted); flex-shrink: 0;
}
.fv-bar {
	flex: 1; height: 6px;
	background: #e5e7eb;
	border-radius: 3px;
	overflow: hidden;
}
.fv-bar-fill { height: 100%; }
.fv-bar-fill.v-0 { background: transparent; width: 0%; }
.fv-bar-fill.v-1 { background: #eab308; width: 66.6%; }
.fv-bar-fill.v-2 { background: #ef4444; width: 100%;   }

.fodmap-notes summary {
	cursor: pointer; color: var(--fodmap-primary);
	font-size: 13px; margin-top: 6px; list-style: none;
}
.fodmap-notes summary::-webkit-details-marker { display: none; }
.fodmap-notes-content {
	padding: 8px 10px;
	border: 1px dashed var(--fodmap-border);
	border-radius: 6px; margin-top: 6px;
	font-size: 13px; line-height: 1.6;
	color: var(--fodmap-text);
	background: color-mix(in srgb, var(--fodmap-primary) 3%, var(--fodmap-bg));
}

.fodmap-empty {
	padding: 24px; text-align: center;
	color: var(--fodmap-muted);
	background: var(--fodmap-bg);
	border: 1px dashed var(--fodmap-border);
	border-radius: var(--fodmap-radius);
	font-size: 14px;
}

.fodmap-pagination {
	display: flex; gap: 6px; margin-top: 20px;
	justify-content: center; flex-wrap: wrap;
}
.fodmap-pagination a,
.fodmap-pagination span {
	padding: 6px 12px; min-width: 36px; text-align: center;
	border: 1px solid var(--fodmap-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--fodmap-text);
	background: var(--fodmap-bg);
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.fodmap-pagination a:hover {
	background: color-mix(in srgb, var(--fodmap-primary) 10%, transparent);
	border-color: var(--fodmap-primary);
	color: var(--fodmap-primary-active);
}
.fodmap-pagination .current {
	background: var(--fodmap-primary);
	color: var(--fodmap-on-primary);
	border-color: var(--fodmap-primary);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark) {
	body:not(.no-dark-theme),
	.dark-theme {
		--fodmap-bg:     #1f2937;
		--fodmap-text:   #f9fafb;
		--fodmap-muted:  #9ca3af;
		--fodmap-border: #374151;
	}
}

@media (max-width: 640px) {
	.fodmap-search-form {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	/* 修复：小屏搜索表单内所有输入/选择/按钮/重置 统一高度与盒模型，
	   清除 iOS Safari 对 [type=search] 自带装饰与内嵌 padding 占位造成的高度不一致 */
	.fodmap-search-form > * {
		width: 100%;
		box-sizing: border-box !important;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		height: 40px;
		min-height: 40px;
		line-height: 20px !important;
		padding: 10px 12px !important;
		font-size: 15px !important;
		vertical-align: middle;
	}
	/* 桌面端 .fodmap-search-input 的 flex: 1 1 220px 在 flex-direction:column 下会把 220px 当高度，
	   这里强制重置所有表单子元素的 flex 基础属性，确保所有控件统一用 height:40px 控制 */
	.fodmap-search-form > * {
		flex: 0 1 auto !important;
		flex-basis: auto !important;
		flex-grow: 0 !important;
		flex-shrink: 1 !important;
		max-height: 40px !important;
	}
	/* 输入框再压一次高度，避免 iOS 搜索样式 fallback 时再次长高 */
	.fodmap-search-form .fodmap-search-input {
		height: 40px !important;
		max-height: 40px !important;
	}
	.fodmap-search-form input[type="search"]::-webkit-search-decoration,
	.fodmap-search-form input[type="search"]::-webkit-search-cancel-button,
	.fodmap-search-form input[type="search"]::-webkit-search-results-button,
	.fodmap-search-form input[type="search"]::-webkit-search-results-decoration {
		display: none;
		-webkit-appearance: none;
	}
	.fodmap-cards-grid { grid-template-columns: 1fr; }
	.fv-comp-label { width: 80px; }
}

.widget-area .widget_fodmap_food_search .fodmap-search-form { margin-bottom: 10px; }
.widget-area .widget_fodmap_food_search .fodmap-search-input,
.widget-area .widget_fodmap_food_search .fodmap-search-form select,
.widget-area .widget_fodmap_food_search .fodmap-search-form button {
	padding: 7px 10px; font-size: 13px;
}
.widget-area .widget_fodmap_food_search .fodmap-cards-grid {
	grid-template-columns: 1fr; gap: 8px;
}
.widget-area .widget_fodmap_food_search .fodmap-food-card {
	padding: 10px; font-size: 13px;
	border-color: color-mix(in srgb,
		var(--fodmap-primary, #4a8c5e) 15%,
		var(--fodmap-border,  #e5e7eb) 85%);
}
.widget-area .widget_fodmap_food_search .fodmap-food-card:hover {
	border-color: color-mix(in srgb,
		var(--fodmap-primary, #4a8c5e) 45%,
		var(--fodmap-border,  #e5e7eb) 55%);
}

.fodmap-search-title { margin-bottom: 16px; font-size: 28px; color: var(--fodmap-text); }

/* 查询页顶部横幅：替换主题 .post-header 标题区 */
.fodmap-fv-banner-wrap {
	margin-bottom: 18px;
}

.fodmap-fv-banner {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* 仅当横幅存在时隐藏主题自带标题（.post-header），避免「标题 + 横幅」重复；
   横幅缺失时保留标题，不会出现空白。
 * 两条规则分别覆盖两种入口：
 *  - .fodmap-fv-has-banner      ：body_class 注入（自定义模板路由 + 短代码/页面路由）
 *  - body:has(.fodmap-fv-banner)：兜底，只要页面内渲染了横幅即隐藏标题，
 *    不依赖 query var，兼容现代浏览器的 :has() 选择器。 */
.fodmap-fv-has-banner .post-header,
body:has(.fodmap-fv-banner) .post-header {
	display: none;
}

/* 横幅全宽：突破主题容器/文章的内边距，横向铺满内容卡片。
 * 短代码/页面路由下，横幅位于 .site-main article（padding:1rem; border-radius:8px; overflow:hidden）内，
 *   同时主题 .post-content 默认有 margin-top:0.5rem。先清除该 margin，再用 -1rem 负 margin
 *   让 banner-wrap 突破 article 内边距；图片本身加上与文章卡片一致的左上/右上圆角。
 *   注：article 设了 overflow:hidden，故无法突破卡片做到视口级通栏（那需改主题，已按要求不改）。
 * 模板路由下，横幅位于 .container（padding:0 10px）内，突破该内边距铺满容器。 */
.fodmap-fv-has-banner .post-content,
body:has(.fodmap-fv-banner) .post-content {
	margin-top: 0;
}

.fodmap-shortcode .fodmap-fv-banner-wrap {
	margin: -1rem -1rem 18px;
}
.fodmap-shortcode .fodmap-fv-banner {
	max-width: 100%; /* 覆盖主题 .post-content img 的 max-width:75%，否则横幅只显示 75% 宽并居中留白 */
	width: 100%;
	margin: 0; /* 覆盖主题 .post-content img 的 margin:1rem auto，避免横幅顶部多 1rem 间隙 */
	border-radius: 0;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.fodmap-fv-search-page .fodmap-fv-banner-wrap {
	margin-left: -10px;
	margin-right: -10px;
}
/* 用 .fodmap-fv-page 提升特异性(0,2,1)压过主题 .post-content p(0,1,1)，
   否则 margin 与 text-indent:2em 会被主题覆盖（简介会错位且首行缩进） */
.fodmap-fv-page .fodmap-fv-intro {
	margin: 14px 0 14px;
	text-indent: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--fodmap-text);
}

a.fodmap-search-reset:visited { color: var(--fodmap-primary); }

.fodmap-shortcode .fodmap-search-input:focus,
.fodmap-shortcode .fodmap-search-form select:focus,
.fodmap-fv-search-page .fodmap-search-input:focus,
.fodmap-fv-search-page .fodmap-search-form select:focus {
	background-color: var(--color-primary-light, #e8f5eb);
	color: var(--color-primary, #4a8c5e);
}

.fodmap-shortcode .fv-bar,
.fodmap-fv-search-page .fv-bar {
	background: color-mix(in srgb, var(--color-bg-card, #fff) 88%, #000 12%);
}
.fodmap-shortcode .fv-component:hover .fv-bar,
.fodmap-fv-search-page .fv-component:hover .fv-bar {
	border-color: var(--color-primary, #4a8c5e);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary, #4a8c5e) 35%, transparent);
}
html.dark-theme .fodmap-shortcode .fv-bar,
html.dark-theme .fodmap-fv-search-page .fv-bar {
	background: color-mix(in srgb, var(--color-bg-card, #1a1a1a) 68%, #fff 32%);
}
@media (prefers-color-scheme: dark) {
	body:not(.no-dark-theme) .fodmap-shortcode .fv-bar,
	body:not(.no-dark-theme) .fodmap-fv-search-page .fv-bar {
		background: color-mix(in srgb, var(--color-bg-card, #1f2937) 68%, #fff 32%);
	}
}

.fodmap-shortcode .fodmap-food-card,
.fodmap-fv-search-page .fodmap-food-card {
	background-color: var(--color-bg-card, var(--color-bg, #fff));
	border-color: color-mix(in srgb,
		var(--color-primary, #4a8c5e) 15%,
		var(--color-border,  #e0e0e0) 85%);
}
.fodmap-shortcode .fodmap-food-card:hover,
.fodmap-fv-search-page .fodmap-food-card:hover {
	border-color: color-mix(in srgb,
		var(--color-primary, #4a8c5e) 45%,
		var(--color-border,  #e0e0e0) 55%);
}

html.dark-theme .fodmap-shortcode .fodmap-food-card,
html.dark-theme .fodmap-fv-search-page .fodmap-food-card {
	background-color: var(--color-bg-card, #1a1a1a);
	border-color: color-mix(in srgb, var(--color-bg-card, #1a1a1a) 72%, #fff 28%);
}
html.dark-theme .fodmap-shortcode .fodmap-food-card:hover,
html.dark-theme .fodmap-fv-search-page .fodmap-food-card:hover {
	border-color: color-mix(in srgb, var(--color-primary) 35%,
		color-mix(in srgb, var(--color-bg-card, #1a1a1a) 72%, #fff 28%));
}

@media (prefers-color-scheme: dark) {
	body:not(.no-dark-theme) .fodmap-shortcode .fodmap-food-card,
	body:not(.no-dark-theme) .fodmap-fv-search-page .fodmap-food-card {
		background-color: var(--color-bg-card, #1f2937);
		border-color: color-mix(in srgb, var(--color-bg-card, #1f2937) 72%, #fff 28%);
	}
	body:not(.no-dark-theme) .fodmap-shortcode .fodmap-food-card:hover,
	body:not(.no-dark-theme) .fodmap-fv-search-page .fodmap-food-card:hover {
		border-color: color-mix(in srgb, var(--fodmap-primary) 35%,
			color-mix(in srgb, var(--color-bg-card, #1f2937) 72%, #fff 28%));
	}
}



/* =========================================================
 * .fodmap-fodmap-components 下的 fv-bar：按用户要求恢复到插件最开始的样式与显示逻辑
 * ========================================================= */
.fodmap-fodmap-components .fv-component {
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.fodmap-fodmap-components .fv-comp-label {
	width: 90px;
	flex-shrink: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280 !important;
	font-weight: 400;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.fodmap-fodmap-components .fv-comp-label {
		width: 80px;
	}
}
.fodmap-fodmap-components .fv-bar {
	flex: 1 1 auto;
	height: 6px;
	background: #e5e7eb !important;
	border-radius: 3px !important;
	border: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	transition: none !important;
	overflow: hidden !important;
	background-color: #e5e7eb !important;
}
.fodmap-fodmap-components .fv-component:hover .fv-bar {
	border: none !important;
	border-color: initial !important;
	box-shadow: none !important;
	background-color: #e5e7eb !important;
}
.fodmap-fodmap-components .fv-bar-fill {
	height: 100% !important;
	border: none !important;
	box-shadow: none !important;
	transition: none !important;
}
/* 值=0：不显示填充条 */
.fodmap-fodmap-components .fv-bar-fill.v-0 {
	background: transparent !important;
	width: 0% !important;
}
.fodmap-fodmap-components .fv-bar-fill.v-1 {
	background: #eab308 !important;
	width: 66.6% !important;
}
.fodmap-fodmap-components .fv-bar-fill.v-2 {
	background: #ef4444 !important;
	width: 100% !important;
}
html.dark-theme .fodmap-fodmap-components .fv-bar,
html.dark-theme body:not(.no-dark-theme) .fodmap-fodmap-components .fv-bar {
	background: #e5e7eb !important;
	background-color: #e5e7eb !important;
	border: none !important;
	box-shadow: none !important;
}
html.dark-theme .fodmap-fodmap-components .fv-component:hover .fv-bar {
	border: none !important;
	box-shadow: none !important;
	background-color: #e5e7eb !important;
}
/* 暗模式 + v-0：仍不显示填充条 */
html.dark-theme .fodmap-fodmap-components .fv-bar-fill.v-0 { background: transparent !important; width: 0% !important; }
html.dark-theme .fodmap-fodmap-components .fv-bar-fill.v-1 { background: #eab308 !important; width: 66.6% !important; }
html.dark-theme .fodmap-fodmap-components .fv-bar-fill.v-2 { background: #ef4444 !important; width: 100% !important; }

@media (prefers-color-scheme: dark) {
	body:not(.no-dark-theme) .fodmap-fodmap-components .fv-bar,
	.dark-theme .fodmap-fodmap-components .fv-bar {
		background: #e5e7eb !important;
		background-color: #e5e7eb !important;
		border: none !important;
		box-shadow: none !important;
	}
	body:not(.no-dark-theme) .fodmap-fodmap-components .fv-component:hover .fv-bar,
	.dark-theme .fodmap-fodmap-components .fv-component:hover .fv-bar {
		border: none !important;
		box-shadow: none !important;
		background-color: #e5e7eb !important;
	}
	/* 系统暗模式 v-0：同样不显示填充 */
body:not(.no-dark-theme) .fodmap-fodmap-components .fv-bar-fill.v-0,
	.dark-theme .fodmap-fodmap-components .fv-bar-fill.v-0 {
		background: transparent !important; width: 0% !important;
	}
	body:not(.no-dark-theme) .fodmap-fodmap-components .fv-bar-fill.v-1,
	.dark-theme .fodmap-fodmap-components .fv-bar-fill.v-1 {
		background: #eab308 !important; width: 66.6% !important;
	}
	body:not(.no-dark-theme) .fodmap-fodmap-components .fv-bar-fill.v-2,
	.dark-theme .fodmap-fodmap-components .fv-bar-fill.v-2 {
		background: #ef4444 !important; width: 100% !important;
	}
}