/* ==============================
   Filter group dropdown buttons
   ============================== */
.ioc-filter-group {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.ioc-filter-group-btn {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 10px; font-size: 12px; font-weight: 500;
	font-family: var(--sans);
	border-radius: var(--radius-md); border: 1px solid var(--line);
	background: var(--bg-elev); color: var(--text-dim);
	cursor: pointer; white-space: nowrap;
	transition: color .15s, border-color .15s, background .15s;
}
.ioc-filter-group-btn:hover { color: var(--text); }
.ioc-filter-group-btn.has-active {
	border-color: var(--accent);
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.ioc-filter-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 16px; height: 16px; padding: 0 4px;
	font-size: 10px; font-weight: 600; line-height: 1;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
}

.ioc-filter-chevron {
	font-size: 9px;
	transition: transform .15s;
	color: var(--text-dim);
}
.ioc-filter-group-btn.is-open .ioc-filter-chevron { transform: rotate(180deg); }

.ioc-filter-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 200px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(0,0,0,.14);
	z-index: 201;
	padding: 8px;
	display: flex; flex-wrap: wrap; gap: 6px;
}
.ioc-panel-rule {
	width: 100%;
	height: 1px;
	background: var(--line-soft);
	margin: 2px 0;
}

/* ==============================
   Active filters summary strip
   ============================== */
.ioc-active-filters {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	padding: 6px 24px;
	background: color-mix(in srgb, var(--accent) 5%, var(--bg));
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line-soft));
}

.ioc-active-chip {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 8px; font-size: 11px; font-weight: 500;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	color: var(--accent);
	cursor: pointer;
	transition: background .12s;
}
.ioc-active-chip:hover {
	background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.ioc-active-chip-rm {
	font-size: 10px; opacity: 0.7;
}

.ioc-active-clear-all {
	display: inline-flex; align-items: center;
	padding: 3px 8px; font-size: 11px; font-weight: 500;
	font-family: var(--sans);
	border-radius: 999px;
	border: 1px solid var(--line);
	background: none; color: var(--text-dim);
	cursor: pointer; margin-left: 4px;
	transition: color .12s, border-color .12s;
}
.ioc-active-clear-all:hover { color: var(--text); border-color: var(--text-dim); }

/* ==============================
   Clickable stats rows
   ============================== */
.ioc-stats-row[data-filter-group] {
	cursor: pointer;
	border-radius: var(--radius);
	padding: 2px 4px;
	margin: -2px -4px;
	transition: background .12s;
}
.ioc-stats-row[data-filter-group]:hover {
	background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.ioc-stats-row[data-filter-group].is-active {
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ioc-stats-row[data-filter-group].is-active .ioc-stats-row-name {
	color: var(--accent);
	font-weight: 600;
}
.ioc-stats-row[data-filter-group].is-active .ioc-stats-row-count {
	color: var(--accent);
}

/* Set header spacing */
.ioc-set-header { margin-bottom: 0; }

/* Popup submit row */
.popup-submit { display: flex; gap: 8px; margin-top: 16px; }

/* Excluded card: dimmed appearance when shown via toggle */
.card-item.is-excluded {
	opacity: 0.4;
	filter: grayscale(60%);
	position: relative;
}
.card-item.is-excluded::after {
	content: '🚫';
	position: absolute;
	top: 6px;
	left: calc(50% - 9px);
	font-size: 14px;
	opacity: 0.8;
	pointer-events: none;
}

/* Show-excluded chip: inactive = muted, active = orange-ish warning tone */
.ioc-excluded-chip { opacity: 0.55; }
.ioc-excluded-chip.is-active { opacity: 1; background: rgba(220,80,30,0.18); border-color: rgba(220,80,30,0.5); color: #c84020; }

/* ==============================
   Exclusion mode — entry button
   ============================== */
.ioc-excl-entry { position: relative; }

.ioc-excl-picker {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 230px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: 0 8px 24px rgba(0,0,0,.14);
	z-index: 201;
	padding: 4px;
}

.ioc-excl-picker-opt {
	display: block;
	width: 100%;
	padding: 9px 12px;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	font-family: var(--sans);
	color: var(--text-dim);
	border-radius: calc(var(--radius-md) - 2px);
	transition: background .12s, color .12s;
}
.ioc-excl-picker-opt:hover { background: var(--bg); color: var(--text); }

.ioc-excl-picker-label {
	padding: 6px 12px 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.ioc-excl-picker-rule {
	height: 1px;
	margin: 4px 6px;
	background: var(--line);
}

/* ==============================
   Exclusion mode — active state
   ============================== */
body.excl-active .card-item { cursor: crosshair; }
body.excl-active .card-item-actions { pointer-events: none !important; opacity: 0 !important; }

/* Blur and dim everything outside the cards grid and bottom banner */
body.excl-active .ioc-navbar,
body.excl-active .ioc-breadcrumbs,
body.excl-active #cards-filter-bar,
body.excl-active .ioc-set-header,
body.excl-active .ioc-stats-strip {
    filter: blur(3px);
    opacity: 0.28;
    pointer-events: none;
    user-select: none;
}

/* Dim non-selected cards to 0.9 so highlighted ones stand out */
body.excl-active #cards-list .card-item { opacity: 0.9; }

/* Card states in exclusion mode */
.card-item.excl-range-start {
	outline: 2.5px solid #E36B00;
	outline-offset: -2px;
	opacity: 1 !important;
	filter: none !important;
}
.card-item.excl-in-range {
	outline: 2px solid rgba(227, 107, 0, 0.55);
	outline-offset: -2px;
	opacity: 1 !important;
	filter: none !important;
	background: rgba(227, 107, 0, 0.06);
}
.card-item.excl-selected {
	outline: 2.5px solid var(--accent);
	outline-offset: -2px;
	opacity: 1 !important;
	filter: none !important;
}

/* ==============================
   Exclusion mode — hint bar (top)
   ============================== */
.ioc-excl-hint {
	position: fixed;
	top: 68px;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: calc(100% - 40px);
	z-index: 150;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-bottom: 2px solid var(--accent);
	border-radius: var(--radius-md);
	padding: 10px 16px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text);
	box-shadow: 0 4px 20px rgba(0,0,0,.16);
}
.ioc-excl-hint-text { flex: 1; }
.ioc-excl-hint-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 13px;
    padding: 2px 6px;
    border-radius: var(--radius);
    transition: color .15s;
    flex-shrink: 0;
    font-family: var(--sans);
}
.ioc-excl-hint-close:hover { color: var(--text); }

/* ==============================
   Exclusion mode — floating banner
   ============================== */
.ioc-excl-banner {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 200;
	background: var(--bg-card);
	border-top: 1px solid var(--line);
	box-shadow: 0 -4px 20px rgba(0,0,0,.13);
}
.ioc-excl-banner-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 24px;
	max-width: 100%;
}
.ioc-excl-banner-icon {
	font-size: 16px;
	flex-shrink: 0;
	color: var(--accent);
}
.ioc-excl-banner-text {
	flex: 1;
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
}
.ioc-excl-banner-btns {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ==============================
   Collection value stats (beside the set logo + name)
   ============================== */
/* Let the hero wrap so the value stats drop below on narrow viewports. */
.ioc-set-hero { flex-wrap: wrap; }

.ioc-value-stats {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-left: auto;          /* pin to the right of the hero */
	min-width: 240px;
	transition: opacity .15s ease;
}
.ioc-value-stats.is-loading { opacity: .45; }

.ioc-value-stat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2px 8px;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--bg-card);
}
.ioc-value-stat-label {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.ioc-value-stat-amount {
	font-family: var(--serif);
	font-size: 14px;
	line-height: 1;
	color: var(--text);
	white-space: nowrap;
}

/* Collected = what you already hold → accent. Total = full set, lightly
   accent-tinted card. Remaining = still to buy → muted. */
.ioc-value-stat.is-collected {
	border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}
.ioc-value-stat.is-collected .ioc-value-stat-amount { color: var(--accent); }
.ioc-value-stat.is-remaining .ioc-value-stat-amount { color: var(--text-dim); }
.ioc-value-stat.is-total {
	background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
	border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.ioc-value-stat.is-total .ioc-value-stat-amount { font-weight: 600; }

@media (max-width: 768px) {
	.ioc-set-title { font-size: 26px; }
	.ioc-set-icon-box { width: 48px; height: 48px; }
	.ioc-filter-bar { padding: 8px 12px; }
	.ioc-excl-banner-inner { padding: 10px 16px; gap: 8px; }
	.ioc-excl-banner-text { font-size: 12px; }

	/* Stats drop below the title and lay out as a wrapping row. */
	.ioc-value-stats {
		margin-left: 0;
		width: 100%;
		min-width: 0;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 4px;
	}
	.ioc-value-stat { flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 2px; }
	.ioc-value-stat-amount { font-size: 17px; }
}

/* ==============================
   Prices dropdown (grouped valuation controls)
   ============================== */
.ioc-price-panel {
	flex-direction: column;
	flex-wrap: nowrap;
	min-width: 250px;
	right: 0;
	left: auto;
}
.ioc-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}
.ioc-price-row-label {
	font-size: 11px;
	font-weight: 500;
	font-family: var(--sans);
	color: var(--text-dim);
}
.ioc-price-row .ioc-filter-select { flex: 0 0 auto; }

.ioc-price-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 4px;
	font-size: 12px;
	font-weight: 500;
	font-family: var(--sans);
	color: var(--text-dim);
	cursor: pointer;
	border-radius: calc(var(--radius-md) - 2px);
	transition: background .12s, color .12s;
}
.ioc-price-toggle:hover { background: var(--bg); color: var(--text); }
.ioc-price-toggle input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.ioc-price-toggle.is-active { color: var(--accent); }

/* Price badge origin icons — seller-country globe + card-language flag, shown
   to the left of the euro amount inside the price bubble. */
.card-item-price {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ioc-price-origin {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}
/* Seller country: a small flag overlaid on the globe (bottom-right). With no
   flag (guide prices / unknown country) only the bare globe shows. */
.ioc-origin-globe {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}
.ioc-origin-globe.has-flag {
	margin-right: 4px;
}
.ioc-origin-world {
	display: block;
	width: 100%;
	height: 100%;
}
.ioc-origin-flag {
	position: absolute;
	right: -3px;
	bottom: 0;
	width: 12px;
	height: 9px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
/* Card language: a flag shown alone at full icon height (so it reads larger
   than the globe's overlaid flag). no-lang.svg stands in when unknown. */
.ioc-origin-lang {
	display: block;
	flex: 0 0 auto;
	height: 12px;
	width: auto;
	max-width: 20px;
	margin-right: 1px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px color-mix(in srgb, #000 18%, transparent);
}
.ioc-price-amount { display: inline-block; }

/* Deep-link highlight: a card reached via the navbar search (?card=…) */
.card-item.is-search-highlight {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--radius-md);
	animation: ioc-search-pulse 1.3s ease-in-out 0s 2;
}
@keyframes ioc-search-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
	70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}