.bv-peptide-calc {
	/*border: 1px solid rgba(0,0,0,0.1);
	border-radius: 3px;
	padding: 1rem;*/
}

.bv-peptide-calc__header { margin-bottom: 14px; }

.bv-peptide-calc__title {
	margin: 0 0 6px;
	font-size: 1.25rem;
	line-height: 1.2;
}

.bv-peptide-calc__subtitle { margin: 0; opacity: 0.8; }

.bv-peptide-calc__sections { display: grid; gap: 14px; }

/* Inputs grid: left syringe, right rest */
.bv-peptide-calc__inputs {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 14px;
	align-items: start;
}

@media (max-width: 900px) {
	.bv-peptide-calc__inputs { grid-template-columns: 1fr; }
}

.bv-peptide-calc__inputs-right {
	display: grid;
	gap: 14px;
}

.bv-section {
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 12px;
	padding: 1rem;
}

.bv-section__title { font-weight: 800; margin-bottom: 10px; }

.bv-btn-group { display: inline-flex; flex-wrap: wrap; gap: 10px; }

.bv-btn-radio { display: inline-flex; align-items: center; }

.bv-btn-radio input { position: absolute; opacity: 0; pointer-events: none; }

.bv-btn-radio__text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.22);
	background: #fff;
	cursor: pointer;
	font-weight: 700;
	user-select: none;
	color:rgba(var(--pep-dark),1);
}

.bv-btn-radio input:checked + .bv-btn-radio__text {
	border-color: rgba(var(--pep-main),1);
	background: rgba(var(--pep-main),1);
	color: #fff;
}

.bv-other { margin-top: 0; display: inline-flex;}

.bv-field__label { display: block; font-weight: 700; margin-bottom: 6px; }

.bv-field__input {
	width: 100%;
	max-width: 120px;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 3px;
}

/* Syringe image options */
.bv-syringe-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.bv-syringe-card {
	display: grid;
	grid-template-rows: auto auto;
	gap: 0;
	border: 2px solid rgba(0,0,0,0.12);
	border-radius: 12px;
	padding: 0;
	cursor: pointer;
	background: #fff;
	position: relative;
}

.bv-syringe-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bv-syringe-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	border-radius: 3px;
	/*border: 1px solid rgba(0,0,0,0.08);*/
	background: rgba(0,0,0,0.0);
	overflow: hidden;
}

.bv-syringe-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bv-syringe-card__placeholder {
	font-weight: 800;
	opacity: 0.6;
}

.bv-syringe-card__label {
	font-weight: 700;
	font-size:0.825rem;
	opacity: 0.9;
	position: absolute;
	left: 1rem;
  	top: 1rem;
}

.bv-syringe-card:has(input:checked) {
	border-color: rgba(var(--pep-main),1);
}

.bv-syringe-note {
	margin: 10px 0 0;
	opacity: 0.65;
	font-size: 0.95rem;
}

/* Buttons */
.bv-peptide-calc__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.bv-btn {
	cursor: pointer;
	border: 1px solid rgba(var(--pep-dark), 0.2);
	background: transparent;
	padding: 10px 14px;
	border-radius: 3px;
	font-weight: 700;
}

.bv-peptide-calc__error {
	padding: 10px 12px;
	border-radius: 3px;
	background: rgba(255, 0, 0, 0.08);
	border: 1px solid rgba(255, 0, 0, 0.2);
}

.bv-peptide-calc__hint {
	border: 1px dashed rgba(0,0,0,0.2);
	border-radius: 3px;
	padding: 1rem;
	opacity: 0.85;
}

.bv-peptide-calc__results { display: grid; gap: 12px; }

.bv-resultline {
	/*border: 1px solid rgba(0,0,0,0.1);*/
	border-radius: 3px;
	/*padding: 1rem;*/
/*	font-size: 1.05rem;*/
	line-height: 1.35;
	margin-bottom: 30px;
}

/* Draw bar + IU scale */
.bv-bar {
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 12px;
	padding: 1rem;
}

.bv-bar__head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
	margin-bottom: 30px;
}

.bv-bar__title { font-weight: 900; }



.bv-bar__meta {
	opacity: 0.75;
	font-weight: 700;
	font-size: 0.95rem;
}

.bv_bar__container{
	position: relative;
}

.bv-bar__track {
	position: relative;
	height: 18px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.18);
	background: rgba(0,0,0,0.03);
	overflow: hidden;
}

.bv-bar__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	background: rgba(var(--pep-main), 1);
	transition: width 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bv-bar__marker {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	left: 0%;
	background: rgba(var(--pep-sec), 1);
	transform: translateX(-1px);
	transition: left 750ms cubic-bezier(0.22, 1, 0.36, 1);
	border-radius: 2px;
}

.bv-bar__ticks {
	position: absolute;
	height: 26px;
	width:100%;
	/*margin-top: 8px;*/
}

.bv-bar__tick {
	position: absolute;
	bottom: 13px;
	width: 2px;
	height: 8px;
	background: rgba(0,0,0,0.18);
	transform: translateX(-0.5px);
}

.bv-bar__tick.is-major {
	height: 14px;
	width: 2px;
	background: rgba(0,0,0,0.28);
	transform: translateX(-1px);
	bottom: 10px;
}

.bv-bar__tick.is-major:first-of-type, .bv-bar__tick.is-major:last-of-type{
	background: rgba(0,0,0,0);
}

.bv-bar__tick-label {
	position: absolute;
	left: -1px;
	bottom: 18px;
	font-size: 12px;
	opacity: 0.75;
	font-weight: 800;
	white-space: nowrap;
}

.bv-bar__tick:last-of-type .bv-bar__tick-label{
	left: auto;
	right:0;
}

@keyframes bvBarMarkerPulse {
	0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0.00); }
	35%  { box-shadow: 0 0 0 10px rgba(0,0,0,0.10); }
	100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.00); }
}
.bv-bar__marker.is-pulse { animation: bvBarMarkerPulse 800ms ease-out; }

.bv-bar__caption { margin-top: 10px; font-weight: 800; }

.bv-bar.is-over .bv-bar__marker { background: rgba(255,0,0,0.85); }
.bv-bar.is-over .bv-bar__fill { background: rgba(255,0,0,0.12); }

.bv-peptide-calc__footnote { opacity: 0.75; margin-top: 6px; font-size: 0.95rem; }

/* Fallback for older browsers without :has() */
@supports not selector(:has(*)) {
	.bv-syringe-card input:checked ~ .bv-syringe-card__media,
	.bv-syringe-card input:checked ~ .bv-syringe-card__label {
		opacity: 1;
	}
	.bv-syringe-card input:checked {
		/* can't style parent without :has; leave as-is */
	}
}