/* =============================================================================
   KM Biomarkers – Front-end Styles
   Version: 1.2.0
   =============================================================================
   Table of contents
   1.  Design tokens
   2.  Biomarker section wrapper  (.km-biomarker-section)
   3.  Count label
   4.  Tag pills                  (.km-biomarker-section .km-bm-tag)
   5.  "+X more" button           (.km-biomarker-section .km-bm-more)
   6.  Detail-mode clickable pill (.km-bm-tag--clickable)
   7.  Popup overlay & modal
   8.  Popup close button
   9.  Popup header               (.km-biomarker-popup .km-popup-header)
   10. Category block             (.km-biomarker-popup .km-popup-cat-block)
   11. Category header & avatar   (.km-biomarker-popup .km-popup-cat-header)
   12. Category panel             (.km-biomarker-popup .km-popup-cat-panel)
   13. Accordion rows             (.km-biomarker-popup .km-popup-bm-row)
   14. Info cards                 (.km-biomarker-popup .km-popup-info-card)
   15. Single product inline panel
   16. Skeleton loader
   17. Animations & transitions
   18. Responsive overrides
   ============================================================================= */

/* ── 1. Design tokens ─────────────────────────────────────────────────────── */
:root {
	--km-font:         inherit;

	--km-cream:        #f5f0e8;
	--km-cream-hover:  #ece5d7;
	--km-cream-border: #e0d8cc;
	--km-info-bg:      #f5f0e8;
	--km-more-bg:      #9e9c96;
	--km-more-text:    #ffffff;
	--km-more-hover:   #7a7874;

	--km-text:         #1c1c1a;
	--km-text-muted:   #6b6b6b;
	--km-label-color:  #4a4540;

	--km-avatar-bg:    #2b2926;
	--km-avatar-text:  #ffffff;

	--km-border:       #e8e2d8;
	--km-white:        #ffffff;

	--km-radius-pill:  100px;
	--km-radius-card:  14px;
	--km-radius-modal: 20px;
	--km-radius-info:  10px;

	--km-space-xs:     4px;
	--km-space-sm:     8px;
	--km-space-md:     14px;
	--km-space-lg:     22px;
	--km-space-xl:     30px;

	--km-fs-xxs:       0.68rem;
	--km-fs-xs:        0.73rem;
	--km-fs-sm:        0.8rem;
	--km-fs-base:      0.875rem;
	--km-fs-md:        1rem;
	--km-fs-lg:        1.15rem;
	--km-fs-xl:        1.35rem;

	--km-ease:         cubic-bezier(0.4, 0, 0.2, 1);
	--km-dur-fast:     140ms;
	--km-dur-base:     240ms;
	--km-dur-slow:     360ms;

	--km-shadow-modal: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
}

/* ── 2. Biomarker section wrapper ─────────────────────────────────────────── */
.km-biomarker-section {
	font-family:   var(--km-font);
	margin-bottom:    var(--km-space-md);
	padding:       var(--km-space-lg);
	border-bottom:    1px solid var(--km-border);
		border-top:    1px solid var(--km-border);

	background:    #F8F6EF;
}

/* Detail mode — same pills, no section background */
.km-biomarker-section--detail {
	background:    transparent;
	padding-left:  0;
	padding-right: 0;
}

/* ── 3. Count label ──────────────────────────────────────────────────────── */
.km-biomarker-section .km-biomarker-count-label {
	font-size:      var(--km-fs-xs);
	color:          var(--km-label-color);
	font-weight:    500;
	margin:         0 0 var(--km-space-sm) 0;
	letter-spacing: 0.01em;
}

/* ── 4. Tag pills ─────────────────────────────────────────────────────────── */
.km-biomarker-section .km-biomarker-tags {
	display:     flex;
	flex-wrap:   wrap;
	gap:         6px;
	align-items: center;
}

.km-biomarker-section .km-bm-tag {
	display:        inline-flex;
	align-items:    center;
	padding:        4px 10px;
	background:     #ECE6D570;
	color:          var(--km-text);
	border:         1px solid #AD974F59;
	border-radius:  4px;
	font-family:    var(--km-font);
	font-size:      10px;
	font-weight:    400;
	line-height:    1.4;
	white-space:    nowrap;
	user-select:    none;
	transition:     background var(--km-dur-fast) var(--km-ease),
	                border-color var(--km-dur-fast) var(--km-ease);
}

.km-biomarker-section .km-bm-tag:hover {
	background:   #ddd6c0a0;
	border-color: #AD974F99;
}

/* ── 5. "+X more" button ─────────────────────────────────────────────────── */
.km-biomarker-section .km-bm-more {
	display:         inline-flex;
	align-items:     center;
	padding:         4px 10px;
	background:      var(--km-more-bg);
	color:           var(--km-more-text);
	border:          1px solid var(--km-more-bg);
	border-radius:   4px;
	font-family:     var(--km-font);
	font-size:       10px;
	font-weight:     500;
	line-height:     1.4;
	cursor:          pointer;
	white-space:     nowrap;
	margin:          0;
	box-shadow:      none;
	text-transform:  none;
	letter-spacing:  normal;
	text-decoration: none;
	transition:      background var(--km-dur-fast) var(--km-ease),
	                 border-color var(--km-dur-fast) var(--km-ease),
	                 transform var(--km-dur-fast) var(--km-ease);
}

.km-biomarker-section .km-bm-more:hover,
.km-biomarker-section .km-bm-more:focus-visible {
	background:      var(--km-more-hover);
	color:           var(--km-more-text);
	border-color:    var(--km-more-hover);
	transform:       translateY(-1px);
	outline:         none;
	box-shadow:      none;
	text-decoration: none;
}

.km-biomarker-section .km-bm-more:active {
	transform: translateY(0);
}

/* ── 6. Detail-mode clickable pill ───────────────────────────────────────── */
.km-biomarker-section .km-bm-tag--clickable {
	cursor:          pointer;
	display:         inline-flex;
	align-items:     center;
	padding:         4px 10px;
	background:      #ECE6D570;
	color:           var(--km-text);
	border:          1px solid #AD974F59;
	border-radius:   4px;
	font-family:     var(--km-font);
	font-size:       10px;
	font-weight:     400;
	line-height:     1.4;
	white-space:     nowrap;
	margin:          0;
	box-shadow:      none;
	text-transform:  none;
	letter-spacing:  normal;
	text-decoration: none;
	transition:      background var(--km-dur-fast) var(--km-ease),
	                 border-color var(--km-dur-fast) var(--km-ease),
	                 transform var(--km-dur-fast) var(--km-ease);
}

.km-biomarker-section .km-bm-tag--clickable:hover,
.km-biomarker-section .km-bm-tag--clickable:focus-visible {
	background:      #ddd6c0a0;
	border-color:    #AD974F99;
	transform:       translateY(-1px);
	outline:         none;
	text-decoration: none;
}

.km-biomarker-section .km-bm-tag--clickable:active {
	transform: translateY(0);
}

/* ── 7. Popup overlay & modal ─────────────────────────────────────────────── */
#km-biomarker-overlay {
	position:                fixed;
	inset:                   0;
	background:              rgba(20, 20, 20, 0.35);
	backdrop-filter:         blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index:                 999998;
	display:                 flex;
	align-items:             center;
	justify-content:         center;
	padding:                 var(--km-space-lg);
	opacity:                 0;
	visibility:              hidden;
	transition:              opacity var(--km-dur-fast) var(--km-ease),
	                         visibility var(--km-dur-fast) var(--km-ease);
}

#km-biomarker-overlay.km-is-open {
	opacity:    1;
	visibility: visible;
}

#km-biomarker-modal {
	position:        relative;
	background:      var(--km-white);
	border-radius:   var(--km-radius-modal);
	box-shadow:      var(--km-shadow-modal);
	width:           100%;
	max-width:       734px;
	max-height:      88vh;
	overflow-y:      auto;
	overflow-x:      hidden;
	display:         flex;
	flex-direction:  column;
	transform:       translateY(0) scale(1);
	scrollbar-width: thin;
	scrollbar-color: var(--km-cream-border) transparent;
}

#km-biomarker-modal::-webkit-scrollbar       { width: 5px; }
#km-biomarker-modal::-webkit-scrollbar-track { background: transparent; }
#km-biomarker-modal::-webkit-scrollbar-thumb { background: var(--km-cream-border); border-radius: 3px; }

#km-bm-popup-content {
	padding: 0;
}

/* ── 8. Close button ─────────────────────────────────────────────────────── */
#km-biomarker-close {
	position:        absolute;
	top:             24px;
	right:           28px;
	background:      transparent;
	border:          1.5px solid var(--km-border);
	border-radius:   50%;
	width:           34px;
	height:          34px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	color:           var(--km-text-muted);
	transition:      background var(--km-dur-fast) var(--km-ease),
	                 color var(--km-dur-fast) var(--km-ease),
	                 border-color var(--km-dur-fast) var(--km-ease);
	z-index:         10;
	padding:         0;
	line-height:     1;
}

#km-biomarker-close:hover,
#km-biomarker-close:focus-visible {
	background:   var(--km-cream);
	color:        var(--km-text);
	border-color: var(--km-cream-border);
	outline:      none;
}

#km-biomarker-close svg {
	display: block;
}

/* ── 9. Popup header ─────────────────────────────────────────────────────── */
.km-biomarker-popup .km-popup-header {
	padding:       28px 80px 22px 32px;
	border-bottom: 1px solid var(--km-border);
	margin:        0;
	animation:     km-fade-in var(--km-dur-base) var(--km-ease);
}

.km-biomarker-popup .km-popup-product-title {
	font-family:    var(--km-font);
	font-size:      1.4rem;
	font-weight:    400;
	color:          var(--km-text);
	margin:         0;
	padding:        0;
	line-height:    1.25;
	letter-spacing: -0.01em;
}

.km-biomarker-popup .km-popup-title-suffix {
	font-weight: 400;
	color:       var(--km-text);
}

/* ── 10. Category blocks ─────────────────────────────────────────────────── */
.km-biomarker-popup .km-popup-categories {
	display:        flex;
	flex-direction: column;
	animation:      km-fade-in var(--km-dur-base) var(--km-ease);
}

.km-biomarker-popup .km-popup-cat-block {
	border-bottom: none;
}

/* ── 11. Category header & avatar ────────────────────────────────────────── */
.km-biomarker-popup .km-popup-cat-header {
	display:       flex;
	align-items:   center;
	gap:           18px;
	padding:       22px 32px 22px 32px;
	border-bottom: 1px solid var(--km-border);
}

.km-biomarker-popup img.km-popup-cat-avatar {
	flex-shrink:   0;
	width:         54px;
	height:        54px;
	border-radius: 50%;
	object-fit:    cover;
	display:       block;
	background:    var(--km-avatar-bg);
}

.km-biomarker-popup span.km-popup-cat-avatar {
	flex-shrink:     0;
	width:           54px;
	height:          54px;
	border-radius:   50%;
	background:      var(--km-avatar-bg);
	color:           var(--km-avatar-text);
	font-size:       1.2rem;
	font-weight:     600;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.km-biomarker-popup .km-popup-cat-name {
	font-family:    var(--km-font);
	font-size:      1.65rem;
	font-weight:    400;
	color:          var(--km-text);
	line-height:    1.2;
	letter-spacing: -0.01em;
}

/* ── 12. Category panel ──────────────────────────────────────────────────── */
.km-biomarker-popup .km-popup-cat-panel {
	padding: 0 32px;
}

/* ── 13. Accordion rows ──────────────────────────────────────────────────── */
.km-biomarker-popup .km-popup-bm-row {
	border-bottom: 1px solid var(--km-border);
}

.km-biomarker-popup .km-popup-bm-row:last-child {
	border-bottom: none;
}

/* Full button reset — prevents theme conflicts */
.km-biomarker-popup button.km-popup-bm-toggle {
	all:                unset;
	box-sizing:         border-box;
	width:              100%;
	display:            flex;
	align-items:        center;
	justify-content:    space-between;
	gap:                12px;
	padding:            22px 0;
	cursor:             pointer;
	font-family:        var(--km-font);
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
}

.km-biomarker-popup button.km-popup-bm-toggle:hover {
	opacity: 0.7;
}

.km-biomarker-popup button.km-popup-bm-toggle:focus-visible {
	outline:        2px solid var(--km-cream-border);
	outline-offset: 2px;
	border-radius:  4px;
}

.km-biomarker-popup button.km-popup-bm-static {
	cursor: default;
}

.km-biomarker-popup button.km-popup-bm-static:hover {
	opacity: 1;
}

.km-biomarker-popup .km-popup-bm-title {
	flex:        1;
	font-family: var(--km-font);
	font-size:   1rem;
	font-weight: 400;
	color:       var(--km-text);
	line-height: 1.45;
}

.km-biomarker-popup .km-popup-bm-chevron {
	flex-shrink: 0;
	width:       20px;
	height:      20px;
	display:     flex;
	align-items: center;
	color:       var(--km-text);
	transition:  transform var(--km-dur-base) var(--km-ease);
}

.km-biomarker-popup button.km-popup-bm-toggle[aria-expanded="true"] .km-popup-bm-chevron {
	transform: rotate(180deg);
}

/* ── 14. Info card (single unified card per biomarker) ───────────────────── */
.km-biomarker-popup .km-popup-bm-panel {
	padding:   0 0 22px;
	animation: km-slide-down var(--km-dur-base) var(--km-ease);
}

.km-biomarker-popup .km-popup-bm-panel[hidden] {
	display: none;
}

.km-biomarker-popup .km-popup-info-card {
	background:     #F5F0E5;
	border-radius:  12px;
	padding:        20px 22px;
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.km-biomarker-popup .km-popup-info-block {
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.km-biomarker-popup .km-popup-info-label {
	font-family: var(--km-font);
	font-size:   1rem;
	font-weight: 500;
	color:       var(--km-text);
	margin:      0;
	line-height: 1.4;
}

.km-biomarker-popup .km-popup-info-text {
	font-family: var(--km-font);
	font-size:   0.95rem;
	color:       var(--km-text-muted);
	line-height: 1.55;
	margin:      0;
}

/* ── 15. Single product inline panel ─────────────────────────────────────── */
.km-single-biomarkers {
	font-family: var(--km-font);
	margin-top:  var(--km-space-xl);
	padding-top: var(--km-space-lg);
	border-top:  1px solid var(--km-border);
}

.km-single-biomarkers .km-single-header {
	display:       flex;
	align-items:   baseline;
	gap:           var(--km-space-sm);
	margin-bottom: var(--km-space-lg);
}

.km-single-biomarkers .km-single-title {
	font-size:   var(--km-fs-lg);
	font-weight: 700;
	color:       var(--km-text);
	margin:      0;
}

.km-single-biomarkers .km-single-total {
	font-size: var(--km-fs-xs);
	color:     var(--km-text-muted);
}

.km-single-biomarkers .km-popup-categories--inline .km-popup-cat-block:first-child {
	border-top: 1px solid var(--km-border);
}

/* ── 16. Skeleton loader ─────────────────────────────────────────────────── */
.km-biomarker-popup .km-skeleton {
	padding: var(--km-space-xl);
}

.km-biomarker-popup .km-skeleton-title {
	height:          22px;
	width:           60%;
	border-radius:   6px;
	background:      linear-gradient(90deg, var(--km-cream) 25%, var(--km-cream-hover) 50%, var(--km-cream) 75%);
	background-size: 200% 100%;
	animation:       km-shimmer 1.4s var(--km-ease) infinite;
	margin-bottom:   var(--km-space-sm);
}

.km-biomarker-popup .km-skeleton-subtitle {
	height:          13px;
	width:           35%;
	border-radius:   6px;
	background:      linear-gradient(90deg, var(--km-cream) 25%, var(--km-cream-hover) 50%, var(--km-cream) 75%);
	background-size: 200% 100%;
	animation:       km-shimmer 1.4s var(--km-ease) infinite;
	margin-bottom:   var(--km-space-xl);
}

.km-biomarker-popup .km-skeleton-group {
	margin-bottom: var(--km-space-md);
}

.km-biomarker-popup .km-skeleton-group-header {
	display:       flex;
	align-items:   center;
	gap:           var(--km-space-md);
	padding:       var(--km-space-md) 0;
	border-bottom: 1px solid var(--km-border);
}

.km-biomarker-popup .km-skeleton-avatar {
	width:        44px;
	height:       44px;
	border-radius: 50%;
	background:   var(--km-cream-hover);
	flex-shrink:  0;
}

.km-biomarker-popup .km-skeleton-cat-name {
	height:          16px;
	width:           130px;
	border-radius:   5px;
	background:      linear-gradient(90deg, var(--km-cream) 25%, var(--km-cream-hover) 50%, var(--km-cream) 75%);
	background-size: 200% 100%;
	animation:       km-shimmer 1.4s var(--km-ease) infinite;
}

.km-biomarker-popup .km-skeleton-rows {
	display:        flex;
	flex-direction: column;
}

.km-biomarker-popup .km-skeleton-row {
	height:     1px;
	background: var(--km-border);
}

.km-biomarker-popup .km-skeleton-row-inner {
	height:          14px;
	border-radius:   4px;
	background:      linear-gradient(90deg, var(--km-cream) 25%, var(--km-cream-hover) 50%, var(--km-cream) 75%);
	background-size: 200% 100%;
	animation:       km-shimmer 1.4s var(--km-ease) infinite;
	margin:          13px 0;
}

.km-biomarker-popup .km-skeleton-row-inner:nth-child(odd)  { width: 75%; }
.km-biomarker-popup .km-skeleton-row-inner:nth-child(even) { width: 60%; }

.km-ajax-error {
	text-align: center;
	color:      var(--km-text-muted);
	font-size:  var(--km-fs-sm);
	padding:    var(--km-space-xl);
	margin:     0;
}

/* ── 17. Animations ───────────────────────────────────────────────────────── */
@keyframes km-shimmer {
	0%   { background-position:  200% 0; }
	100% { background-position: -200% 0; }
}

@keyframes km-slide-down {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes km-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── 18. Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 520px) {
	#km-biomarker-overlay {
		align-items: flex-end;
		padding:     0;
	}

	#km-biomarker-modal {
		border-radius: var(--km-radius-modal) var(--km-radius-modal) 0 0;
		max-height:    92vh;
	}

	.km-biomarker-popup .km-popup-header {
		padding: 22px 64px 18px 20px;
	}

	.km-biomarker-popup .km-popup-product-title {
		font-size: 1.2rem;
	}

	.km-biomarker-popup .km-popup-cat-header {
		padding: 18px 20px;
		gap:     14px;
	}

	.km-biomarker-popup img.km-popup-cat-avatar,
	.km-biomarker-popup span.km-popup-cat-avatar {
		width:  46px;
		height: 46px;
	}

	.km-biomarker-popup .km-popup-cat-name {
		font-size: 1.35rem;
	}

	.km-biomarker-popup .km-popup-cat-panel {
		padding: 0 20px;
	}

	.km-biomarker-popup .km-popup-info-card {
		padding: 16px 18px;
		gap:     14px;
	}

	#km-biomarker-close {
		top:   18px;
		right: 18px;
	}
}