/* Bovallen Auktioner – följer brandbook 2026 */
.bva {
	--bva-green: #366735;
	--bva-green-light: #73AE39;
	--bva-yellow: #F3A421;
	--bva-cream: #FCF5DB;
	--bva-grey: #576073;
	--bva-grey-light: #DCDFE6;
	--bva-ink: #1c241c;
	--bva-head: 'Chakra Petch', 'Roboto', sans-serif;
	display: grid;
	gap: 48px;
	color: var(--bva-ink);
}
.bva *,
.bva *::before,
.bva *::after { box-sizing: border-box; }

/* Objekt: bild till vänster, info till höger */
.bva .bva-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	padding-bottom: 48px;
	border-bottom: 2px solid var(--bva-grey-light);
	scroll-margin-top: 120px;
}
.bva .bva-item:last-child { padding-bottom: 0; border-bottom: 0; }

/* Bilder – hela bilden visas, man sveper eller klickar på miniatyrerna */
.bva .bva-media { position: relative; }
.bva .bva-main {
	display: flex;
	aspect-ratio: 4 / 3;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	background: #eef0f3;
	overscroll-behavior-x: contain;
}
.bva .bva-main::-webkit-scrollbar { display: none; }
.bva .bva-slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.bva .bva-slide img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.bva .bva-counter {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 8px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	background: rgba(28, 36, 28, 0.7);
	pointer-events: none;
}
.bva .bva-noimg { display: flex; align-items: center; justify-content: center; color: var(--bva-grey); }
.bva .bva-thumbs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bva .bva-thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	margin: 0;
	background: none;
	border: 2px solid transparent;
	cursor: pointer;
}
.bva .bva-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bva .bva-thumb.is-active { border-color: var(--bva-green); }
.bva .bva-thumb:focus-visible { outline: 3px solid var(--bva-yellow); outline-offset: 2px; }

/* Text */
.bva .bva-title {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--bva-head);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.15;
	color: var(--bva-green);
}
.bva .bva-desc { max-width: 62ch; margin-bottom: 20px; line-height: 1.6; }
.bva .bva-desc p { margin: 0 0 0.8em; padding: 0; }
.bva .bva-desc p:last-child { margin-bottom: 0; }

/* Prislappen – avfasat hörn som en mutter */
.bva .bva-tag {
	display: grid;
	gap: 14px;
	margin-bottom: 22px;
	padding: 18px 22px 16px;
	background: var(--bva-green);
	color: #fff;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.bva .bva-price-label { display: block; font-size: 0.9rem; opacity: 0.85; }
.bva .bva-price-value {
	display: block;
	font-family: var(--bva-head);
	font-weight: 700;
	font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.bva .bva-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.bva .bva-facts div { margin: 0; }
.bva .bva-facts dt { margin: 0; font-size: 0.8rem; font-weight: 400; opacity: 0.8; }
.bva .bva-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.bva .bva-item.is-soon [data-bva-timer] { padding: 0 6px; background: var(--bva-yellow); color: var(--bva-ink); }
.bva .bva-item.is-ended .bva-tag { background: var(--bva-grey); }

/* Formulär */
.bva .bva-form { display: grid; gap: 14px; margin: 0; }
.bva .bva-field { display: grid; gap: 4px; margin: 0; font-size: 0.9rem; font-weight: 500; }
.bva .bva-opt { font-style: normal; font-weight: 400; color: var(--bva-grey); }
.bva .bva-field input {
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	font: inherit;
	font-size: 1rem;
	font-weight: 400;
	color: var(--bva-ink);
	background: #fff;
	border: 1px solid #b4bac6;
	border-radius: 0;
	box-shadow: none;
}
.bva .bva-field input:focus {
	outline: 3px solid var(--bva-green-light);
	outline-offset: 0;
	border-color: var(--bva-green);
}
.bva .bva-field-amount input {
	max-width: 260px;
	font-family: var(--bva-head);
	font-size: 1.4rem;
	font-weight: 700;
}
.bva .bva-hint { margin: -8px 0 0; padding: 0; font-size: 0.85rem; color: var(--bva-grey); }

.bva .bva-more { display: grid; gap: 14px; }
.bva.bva-js .bva-form:not(.is-open) .bva-more { display: none; }
.bva .bva-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bva .bva-span2 { grid-column: 1 / -1; }

.bva .bva-terms { font-size: 0.85rem; color: var(--bva-grey); }
.bva .bva-terms summary { cursor: pointer; font-weight: 500; color: var(--bva-ink); }
.bva .bva-terms p { margin: 8px 0 0; padding: 0; line-height: 1.5; }
.bva .bva-check { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 0.9rem; line-height: 1.4; }
.bva .bva-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--bva-green); }

.bva .bva-submit {
	justify-self: start;
	margin: 0;
	padding: 12px 30px;
	font-family: var(--bva-head);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bva-ink);
	background: var(--bva-yellow);
	border: 0;
	border-radius: 0;
	cursor: pointer;
}
.bva .bva-submit:hover { background: #e39417; }
.bva .bva-submit:focus-visible { outline: 3px solid var(--bva-green); outline-offset: 3px; }
.bva .bva-submit:disabled { opacity: 0.6; cursor: wait; }

.bva .bva-msg { margin: 0; padding: 0; font-size: 0.95rem; }
.bva .bva-msg:empty { display: none; }
.bva .bva-msg.is-ok { padding: 10px 12px; font-weight: 600; color: var(--bva-green); background: #eef6e6; border-left: 4px solid var(--bva-green-light); }
.bva .bva-msg.is-err { padding: 10px 12px; color: #8a1f11; background: #fdecea; border-left: 4px solid #c0392b; }

.bva .bva-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bva .bva-closed { margin: 0; font-weight: 600; color: var(--bva-grey); }
.bva .bva-empty { margin: 0; padding: 24px; background: var(--bva-cream); }

.bva .bva-price-vat { display: block; margin-top: 4px; font-size: 0.95rem; font-weight: 500; color: #FCF5DB; }
.bva .bva-vatnote {
	margin: 0;
	padding: 14px 18px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--bva-ink);
	background: var(--bva-cream);
	border-left: 5px solid var(--bva-yellow);
}
.bva .bva-ex { padding: 1px 6px; font-weight: 700; color: var(--bva-ink); background: var(--bva-cream); }
.bva .bva-incl { margin: -6px 0 0; padding: 0; font-size: 0.95rem; color: var(--bva-ink); }
.bva .bva-incl strong { color: var(--bva-green); }

/* ---------- Mobil ---------- */
@media (max-width: 820px) {
	.bva .bva-item { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; }

	/* Avslutade auktioner blir kompakta rader så att de pågående syns mest */
	.bva .bva-item.is-ended {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
		padding-bottom: 20px;
	}
	.bva .bva-item.is-ended .bva-media { margin: 0; }
	.bva .bva-item.is-ended .bva-main { aspect-ratio: 1 / 1; overflow: hidden; }
	.bva .bva-item.is-ended .bva-slide img { object-fit: cover; }
	.bva .bva-item.is-ended .bva-thumbs,
	.bva .bva-item.is-ended .bva-counter,
	.bva .bva-item.is-ended .bva-desc,
	.bva .bva-item.is-ended .bva-facts,
	.bva .bva-item.is-ended .bva-closed { display: none; }
	.bva .bva-item.is-ended .bva-title { margin-bottom: 6px; font-size: 1.1rem; }
	.bva .bva-item.is-ended .bva-tag { margin: 0; padding: 8px 12px; gap: 0; clip-path: none; }
	.bva .bva-item.is-ended .bva-price-label { font-size: 0.8rem; }
	.bva .bva-item.is-ended .bva-price-value { font-size: 1.3rem; }
	.bva .bva-item.is-ended .bva-price-vat { font-size: 0.75rem; }
}

@media (max-width: 600px) {
	/* Använd hela skärmbredden – Divis rader tar annars bort 20 % i kanterna */
	.bva {
		box-sizing: border-box;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		padding: 0 16px;
		gap: 40px;
	}

	/* Bilden går kant i kant, miniatyrerna blir en rad man sveper i sidled */
	.bva .bva-media { margin: 0 -16px; }
	.bva .bva-thumbs {
		position: relative;
		flex-wrap: nowrap;
		gap: 6px;
		padding: 0 16px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.bva .bva-thumbs::-webkit-scrollbar { display: none; }
	.bva .bva-thumb { flex: none; width: 56px; height: 56px; scroll-snap-align: start; }

	.bva .bva-tag { padding: 16px 18px 14px; }
	.bva .bva-facts { gap: 8px 22px; }

	/* Formuläret: namnen bredvid varandra, resten i full bredd */
	.bva .bva-contact { grid-template-columns: 1fr 1fr; gap: 10px; }
	.bva .bva-contact > .bva-field:nth-child(n+3) { grid-column: 1 / -1; }
	.bva .bva-field input { padding: 12px; font-size: 16px; } /* 16px hindrar iPhone från att zooma in */
	.bva .bva-field-amount input { max-width: none; font-size: 1.4rem; }
	.bva .bva-terms summary { padding: 6px 0; }
	.bva .bva-check { gap: 12px; }
	.bva .bva-check input { width: 22px; height: 22px; margin-top: 0; }
	.bva .bva-submit { justify-self: stretch; padding: 15px 20px; font-size: 1.1rem; }
}