/* Balkan Junkie – magnet picker. Colours inherit from the theme; override the variables to restyle. */
.bj-mq {
	--bj-mq-border: rgba(0, 0, 0, 0.18);
	--bj-mq-muted: rgba(0, 0, 0, 0.6);
	--bj-mq-surface: #fff;
	--bj-mq-hover: rgba(0, 0, 0, 0.05);
	--bj-mq-accent: currentColor;
	--bj-mq-warn: #a4361d;
	--bj-mq-highlight: rgba(0, 0, 0, 0.07);
	display: block;
	margin: 0.25em 0 1em;
}

.bj-mq__picker {
	position: relative;
	max-width: 32rem;
}

.bj-mq__toggle {
	width: 100%;
	padding: 0.7em 1em;
	border: 1px dashed var(--bj-mq-border);
	border-radius: 6px;
	background: var(--bj-mq-surface);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.bj-mq__toggle:hover { background: var(--bj-mq-hover); }

.bj-mq__list {
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 20rem;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--bj-mq-surface);
	border: 1px solid var(--bj-mq-border);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.bj-mq__option {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
	padding: 6px 8px;
	border-radius: 4px;
	cursor: pointer;
}
.bj-mq__option:hover,
.bj-mq__option:focus { background: var(--bj-mq-hover); outline: none; }
.bj-mq__option:focus-visible { outline: 2px solid var(--bj-mq-accent); outline-offset: -2px; }

.bj-mq__check { margin-left: auto; visibility: hidden; }
.bj-mq__option[aria-selected="true"] .bj-mq__check { visibility: visible; }

.bj-mq__thumb {
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--bj-mq-hover);
}

.bj-mq__name { flex: 1 1 auto; min-width: 0; }

.bj-mq__rows {
	max-width: 32rem;
	margin: 0.75em 0 0;
	padding: 0;
	list-style: none;
}

.bj-mq__row {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--bj-mq-border);
}

.bj-mq__stepper { display: inline-flex; align-items: center; flex: none; }

.bj-mq__step,
.bj-mq__remove {
	width: 2em;
	height: 2em;
	padding: 0;
	border: 1px solid var(--bj-mq-border);
	background: var(--bj-mq-surface);
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}
.bj-mq__step:first-child { border-radius: 4px 0 0 4px; }
.bj-mq__step:last-child { border-radius: 0 4px 4px 0; }
.bj-mq__remove { border-color: transparent; border-radius: 4px; color: var(--bj-mq-muted); }
.bj-mq__step:hover,
.bj-mq__remove:hover { background: var(--bj-mq-hover); }

.bj-mq .bj-mq__qty {
	width: 4.5em;
	height: 2em;
	margin: 0;
	padding: 0 0.25em;
	border: 1px solid var(--bj-mq-border);
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	text-align: center;
	font: inherit;
	-moz-appearance: textfield;
}
.bj-mq__qty::-webkit-outer-spin-button,
.bj-mq__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bj-mq__summary { max-width: 32rem; margin-top: 0.75em; }
.bj-mq__summary p { margin: 0.25em 0; }
.bj-mq__total { font-size: 1.15em; }
.bj-mq__hint,
.bj-mq__note { color: var(--bj-mq-muted); font-size: 0.9em; }
.bj-mq__summary--warn .bj-mq__hint { color: var(--bj-mq-warn); }

.bj-mq__tiers {
	max-width: 22rem;
	margin: 1em 0 0;
	border-collapse: collapse;
	font-size: 0.9em;
}
/* Extra specificity so theme table styles (borders, padding, stripes) don't leak in. */
.bj-mq table.bj-mq__tiers th,
.bj-mq table.bj-mq__tiers td {
	padding: 6px 2.5em 6px 0;
	border: 0;
	border-bottom: 1px solid var(--bj-mq-border);
	background: none;
	text-align: left;
	font-weight: normal;
}
.bj-mq table.bj-mq__tiers th:last-child,
.bj-mq table.bj-mq__tiers td:last-child { padding-right: 0; }
.bj-mq table.bj-mq__tiers th { color: var(--bj-mq-muted); }
.bj-mq table.bj-mq__tiers tr.is-current td { font-weight: 700; }

@media (max-width: 480px) {
	.bj-mq__row { flex-wrap: wrap; }
	.bj-mq__row .bj-mq__name { flex-basis: calc(100% - 5em); }
	.bj-mq__stepper { margin-left: calc(40px + 0.75em); }
}