/* ============================================================
   Adrem Occasions — weergave
   De kleuren komen uit adrem-huisstijl.css. Staat die er niet,
   dan vallen de waarden hieronder in.
   ============================================================ */

.adocc,
.adocc-detail {
	--adocc-roze: var(--adrem-roze, #ED3089);
	--adocc-roze-donker: var(--adrem-roze-donker, #D7136F);
	--adocc-roze-licht: var(--adrem-roze-licht, #FDEBF4);
	--adocc-tekst: var(--adrem-tekst, #2F2F2F);
	--adocc-grijs: #6B6B6B;
	--adocc-lijn: #E4E4E4;
}

/* ---------- Filterbalk ---------- */

.adocc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	padding: 1.25rem;
	margin-bottom: 2rem;
	background: var(--adocc-roze-licht);
	border-radius: 10px;
}

.adocc-filter {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 10rem;
	min-width: 9rem;
}

.adocc-filter__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--adocc-tekst);
}

.adocc-filter select {
	width: 100%;
	padding: 0.55rem 0.7rem;
	font-size: 1rem;
	color: var(--adocc-tekst);
	background: #fff;
	border: 1px solid var(--adocc-lijn);
	border-radius: 6px;
}

.adocc-filter select:focus-visible {
	outline: 2px solid var(--adocc-roze);
	outline-offset: 1px;
}

.adocc-teller {
	flex: 0 0 auto;
	margin: 0;
	padding-bottom: 0.55rem;
	font-weight: 700;
	color: var(--adocc-tekst);
}

/* ---------- Raster met auto's ---------- */

.adocc-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.5rem;
}

.adocc-kaart {
	background: #fff;
	border: 1px solid var(--adocc-lijn);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.adocc-kaart:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.adocc-kaart[hidden] {
	display: none;
}

.adocc-kaart__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.adocc-kaart__foto {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #F4F4F4;
}

.adocc-kaart__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.adocc-foto--leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-weight: 800;
	letter-spacing: 0.15em;
	color: var(--adocc-roze);
	background: var(--adocc-roze-licht);
}

/* Rechtsonder, omdat VWE zelf al een diagonale VERKOCHT-band in de foto bakt
   die van rechtsboven naar linksonder loopt. */
.adocc-badge {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	padding: 0.25rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--adocc-tekst);
	border-radius: 4px;
}

.adocc-badge--groot {
	bottom: 1rem;
	right: 1rem;
	font-size: 0.9rem;
	padding: 0.4rem 0.9rem;
}

.adocc-kaart.is-verkocht .adocc-kaart__foto img {
	opacity: 0.55;
}

.adocc-kaart__tekst {
	padding: 1rem;
}

.adocc-kaart__titel {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--adocc-tekst);
}

.adocc-kaart__prijs {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--adocc-roze);
}

.adocc-kaart__specs {
	margin: 0;
	font-size: 0.9rem;
	color: var(--adocc-grijs);
}

.adocc-leeg,
.adocc-geen-resultaat {
	padding: 1.5rem;
	font-size: 1.05rem;
	text-align: center;
	background: var(--adocc-roze-licht, #FDE6F1);
	border-radius: 10px;
}

/* ---------- Opruimen van het thema op een autopagina ----------
   Twenty Twenty-Five zet boven elke pagina een uitgelichte afbeelding en een
   auteursregel. De foto tonen we zelf in de galerij (anders staat hij dubbel),
   en een auteursregel hoort niet bij een auto — die blijft leeg en leest als
   "Geschreven door in". Alleen actief op een autopagina. */

.adocc-detailpagina .wp-block-post-featured-image,
.adocc-detailpagina .wp-block-post-author,
.adocc-detailpagina .wp-block-post-author-name,
.adocc-detailpagina .wp-block-post-date,
.adocc-detailpagina .wp-block-post-terms,
.adocc-detailpagina .wp-block-post-navigation-link,
.adocc-detailpagina .wp-block-comments {
	display: none;
}

/* ---------- Detailpagina ---------- */

.adocc-detail {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.adocc-kop {
	margin: 0 0 0.75rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--adocc-tekst);
	border-bottom: 3px solid var(--adocc-roze);
	display: inline-block;
	padding-bottom: 0.15em;
}

.adocc-galerij__groot {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #F4F4F4;
}

.adocc-galerij__groot img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.adocc-galerij__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.adocc-galerij__knop {
	padding: 0;
	width: 5.5rem;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.adocc-galerij__knop img {
	width: 100%;
	height: 4rem;
	object-fit: cover;
	display: block;
}

.adocc-galerij__knop.is-actief {
	border-color: var(--adocc-roze);
}

.adocc-detail__prijs {
	margin: 0;
	font-size: 2rem;
	font-weight: 800;
	color: var(--adocc-roze);
}

.adocc-detail__btw {
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--adocc-grijs);
	vertical-align: middle;
}

.adocc-gegevens__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0;
	margin: 0;
}

.adocc-gegevens__rij {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--adocc-lijn);
}

.adocc-gegevens__rij dt {
	color: var(--adocc-grijs);
}

.adocc-gegevens__rij dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	color: var(--adocc-tekst);
}

.adocc-accessoires__groepen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.5rem;
}

.adocc-accessoires__groep h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 700;
}

.adocc-accessoires__groep ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--adocc-tekst);
}

.adocc-accessoires__groep li {
	margin-bottom: 0.2rem;
}

/* ---------- Actieblok en formulier ---------- */

.adocc-actie {
	padding: 1.75rem;
	background: var(--adocc-roze-licht);
	border-radius: 10px;
}

.adocc-actie__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 0;
}

.adocc-knop {
	display: inline-block;
	padding: 0.8rem 1.4rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: var(--adocc-roze);
	border: 2px solid var(--adocc-roze);
	border-radius: 6px;
	cursor: pointer;
}

.adocc-knop:hover,
.adocc-knop:focus {
	background: var(--adocc-roze-donker);
	border-color: var(--adocc-roze-donker);
	color: #fff;
}

.adocc-knop--groot {
	font-size: 1.15rem;
	padding: 1rem 1.75rem;
}

.adocc-knop--outline {
	color: var(--adocc-roze);
	background: transparent;
}

.adocc-knop--outline:hover {
	color: #fff;
}

.adocc-formulier {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.adocc-veld {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0 0 1rem;
}

.adocc-veld label {
	font-weight: 600;
	font-size: 0.9rem;
}

.adocc-veld input,
.adocc-veld textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	border: 1px solid var(--adocc-lijn);
	border-radius: 6px;
}

.adocc-veld input:focus-visible,
.adocc-veld textarea:focus-visible {
	outline: 2px solid var(--adocc-roze);
	outline-offset: 1px;
}

/* Het vangnetveld hoort onzichtbaar te zijn voor mensen, maar wel invulbaar
   voor robots. Daarom weghalen uit beeld in plaats van display:none. */
.adocc-formulier__vangnet {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.adocc-formulier__klein {
	margin: 0;
	font-size: 0.85rem;
	color: var(--adocc-grijs);
}

.adocc-melding {
	padding: 0.9rem 1.1rem;
	margin: 0 0 1rem;
	border-radius: 6px;
	font-weight: 600;
}

.adocc-melding--ok {
	color: #14532D;
	background: #DCFCE7;
}

.adocc-melding--fout {
	color: #7F1D1D;
	background: #FEE2E2;
}

/* ---------- Herkomst en terug ---------- */

.adocc-herkomst {
	padding: 1.75rem;
	background: var(--adocc-roze-licht);
	border-radius: 10px;
}

.adocc-herkomst p {
	margin: 0 0 0.9rem;
}

.adocc-herkomst__naam {
	margin: 0;
	color: var(--adocc-grijs);
}

.adocc-terug {
	margin: 0;
}

.adocc-terug a {
	font-weight: 600;
	color: var(--adocc-roze);
}

/* ---------- Nieuw binnen (homepage) ---------- */

.adocc-nieuw {
	margin: 2.5rem 0;
}

.adocc-nieuw__titel {
	margin: 0 0 1.25rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
	color: var(--adocc-tekst);
}

.adocc-nieuw__meer {
	margin: 1.75rem 0 0;
	text-align: center;
}

/* ---------- Aanvraagformulieren (inkoop en zoekopdracht) ---------- */

.adocc-aanvraag {
	max-width: 44rem;
}

.adocc-groep {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.25rem 0.5rem;
	border: 1px solid var(--adocc-lijn);
	border-radius: 10px;
}

.adocc-groep__kop {
	padding: 0 0.4rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--adocc-roze);
}

.adocc-veld select,
.adocc-veld input[type="file"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--adocc-tekst);
	background: #fff;
	border: 1px solid var(--adocc-lijn);
	border-radius: 6px;
}

.adocc-veld select:focus-visible,
.adocc-veld input[type="file"]:focus-visible {
	outline: 2px solid var(--adocc-roze);
	outline-offset: 1px;
}

.adocc-veld__hulp {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--adocc-grijs);
}

.adocc-veld__hulp:empty {
	display: none;
}

.adocc-veld__optioneel {
	margin-left: 0.35rem;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--adocc-grijs);
}

/* ---------- Mobiel ---------- */

@media (max-width: 600px) {
	.adocc-groep {
		padding: 1rem 1rem 0.25rem;
	}

	.adocc-filters {
		padding: 1rem;
	}

	.adocc-filter {
		flex: 1 1 100%;
	}

	.adocc-detail__prijs {
		font-size: 1.6rem;
	}

	.adocc-knop--groot {
		display: block;
		width: 100%;
		text-align: center;
	}
}