/* FINN Annonser - frontend og admin-styling. Alltid ekstern CSS, ingen inline styles. */

.finn-annonser-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2rem;
	align-items: start;
}

@media (max-width: 800px) {
	.finn-annonser-layout {
		grid-template-columns: 1fr;
	}
}

.finn-annonser-filters {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 1.25rem;
	background: #fafafa;
}

.finn-annonser-filter-group {
	margin-bottom: 1.25rem;
}

.finn-annonser-filter-group h4 {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #444;
}

.finn-annonser-filter-row {
	display: flex;
	gap: 0.5rem;
}

.finn-annonser-filter-row input[type="number"],
.finn-annonser-filter-row input[type="search"],
.finn-annonser-sort select {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	font-size: 0.9rem;
	box-shadow: none !important;
}

.finn-annonser-checkbox-list,
.finn-annonser-checkbox-list li {
	list-style: none !important;
	list-style-type: none !important;
}

/* !important trengs siden temaets egne selektorer (f.eks. ".sidebar ul")
   ofte har høyere spesifisitet enn en enkel klasse og ellers legger til
   sitt eget venstre-innrykk igjen (samme årsak som list-style over). */
.finn-annonser-checkbox-list {
	margin: 0 !important;
	padding: 0 !important;
}

.finn-annonser-checkbox-list li {
	margin: 0 0 0.4rem !important;
	padding: 0 !important;
	font-size: 0.9rem;
}

.finn-annonser-checkbox-list li::marker,
.finn-annonser-checkbox-list li::before {
	content: none !important;
}

.finn-annonser-checkbox-list label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
}

/* !important trengs siden temaets egne ".button"-stiler (farge, tykk
   kant/skygge) ellers slår igjennom - samme årsak som andre steder i
   dette stilarket. Stilen er satt lik resten av filterboksens felt i
   stedet for temaets kraftige knappe-utseende. */
.finn-annonser-reset {
	display: block;
	width: 100%;
	padding: 0.5rem 0.5rem;
	background: #fff !important;
	color: #333 !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
}

.finn-annonser-reset:hover,
.finn-annonser-reset:focus {
	background: #f2f2f2 !important;
	color: #333 !important;
}

.finn-annonser-load-more {
	display: block;
	margin: 1.5rem auto 0;
}

/* [hidden] tvinges eksplisitt, siden enkelte temaer nullstiller den native
   hidden-attributt-oppførselen i sin egen reset-CSS. */
.finn-annonser-grid [hidden] {
	display: none !important;
}

.finn-annonser-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1.5rem;
	margin: 0 0 1.5rem;
}

/* Grid-elementer har "min-width: auto" som standard, som lar langt,
   ubrytbart innhold (f.eks. en tittel med "ord/ord/ord" uten mellomrom)
   presse kortet bredere enn kolonnen i stedet for å brytes - dette
   nullstiller det slik at bredden på cellen alltid vinner. */
.finn-annonser-grid > * {
	min-width: 0;
}

.finn-annonser-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.finn-annonser-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.finn-annonser-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 700px) {
	.finn-annonser-grid {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

.finn-annonser-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: box-shadow 0.15s ease;
}

.finn-annonser-card:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.finn-annonser-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f2f2;
}

.finn-annonser-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.finn-annonser-card-body {
	padding: 0.9rem 1rem 1.1rem;
}

/* !important trengs her siden temaets egne "container h3"/"container p"-
   utvalg (f.eks. .entry-content p) har høyere spesifisitet enn en enkel
   klasse alene, og ellers overstyrer marginene våre med sine egne. */
.finn-annonser-card-title {
	font-size: 1rem;
	line-height: 1.3;
	margin: 0 0 0.2rem !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

.finn-annonser-card-meta {
	font-size: 0.85rem;
	color: #666;
	line-height: 1.3;
	margin: 0 0 0.2rem !important;
}

.finn-annonser-card-price {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 !important;
}

.finn-annonser-empty {
	grid-column: 1 / -1;
	color: #666;
	font-style: italic;
}

/* Enkeltannonse-side */

/* Grunn-typografi satt likt sidens egen brødtekst (f.eks. Butikken-siden:
   Roboto 18px/31px, farge rgb(61, 68, 75)) - elementer som allerede har sin
   egen font-size/farge (tittel, pris, nøkkelfakta, spesifikasjons-etiketter
   osv.) beholder sitt eget utseende, dette gjelder bare vanlig løpetekst
   som ikke setter noe eget. */
.finn-annonser-detail {
	max-width: 900px;
	margin: 1.5rem 0;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 31px;
	color: #3d444b;
}

.finn-annonser-detail-back {
	display: inline-block;
	margin-bottom: 1rem;
	text-decoration: none;
}

.finn-annonser-detail-main-wrap {
	position: relative;
}

.finn-annonser-detail-main-image {
	width: 100%;
	height: 420px;
	max-height: 60vh;
	object-fit: contain;
	border-radius: 6px;
	background: #f2f2f2;
	display: block;
}

@media (max-width: 700px) {
	.finn-annonser-detail-main-image {
		height: 260px;
		max-height: 45vh;
	}
}

/* !important trengs siden temaets egne knappe-stiler (farge, bakgrunn,
   hover-tilstand) ellers slår igjennom her - samme årsak som andre steder
   i dette stilarket. */
.finn-annonser-detail-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 50% !important;
	width: 2.25rem;
	height: 2.25rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
}

.finn-annonser-detail-nav svg {
	width: 1.1rem;
	height: 1.1rem;
	display: block;
}

.finn-annonser-detail-nav:hover,
.finn-annonser-detail-nav:focus {
	background: rgba(0, 0, 0, 0.75) !important;
	color: #fff !important;
}

.finn-annonser-detail-prev {
	left: 0.75rem;
}

.finn-annonser-detail-next {
	right: 0.75rem;
}

.finn-annonser-detail-count {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.8rem;
}

.finn-annonser-detail-thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.finn-annonser-detail-thumbs img {
	width: 90px;
	height: 65px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	border: 2px solid transparent;
	flex-shrink: 0;
}

.finn-annonser-detail-thumbs img.is-active {
	border-color: #333;
}

.finn-annonser-detail-title {
	margin: 1.25rem 0 0.25rem;
	font-size: 1.5rem;
	line-height: 1.3;
	color: #000 !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

.finn-annonser-detail-price {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

.finn-annonser-detail-meta {
	color: #666;
	margin-bottom: 1.25rem;
}

.finn-annonser-detail-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0 0 1.5rem;
	padding: 1rem 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.finn-annonser-detail-fact {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 100px;
}

.finn-annonser-detail-fact-icon {
	display: flex;
	flex-shrink: 0;
	color: #666;
}

.finn-annonser-detail-fact-icon svg {
	width: 22px;
	height: 22px;
}

.finn-annonser-detail-fact-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.finn-annonser-detail-fact-label {
	font-size: 0.8rem;
	line-height: 1.2;
	color: #666;
}

.finn-annonser-detail-fact-value {
	font-weight: 600;
	line-height: 1.2;
}

.finn-annonser-detail-description h2,
.finn-annonser-detail-specs-section h2,
.finn-annonser-detail-equipment h2,
.finn-annonser-detail-location h2 {
	font-size: 1.15rem;
	margin: 0 0 0.75rem;
	color: #000 !important;
}

.finn-annonser-detail-description,
.finn-annonser-detail-specs-section,
.finn-annonser-detail-equipment,
.finn-annonser-detail-location {
	margin-bottom: 1.5rem;
}

/* !important på font-weight trengs siden temaet tvinger gjennom sin egen
   halvfete (600) vekt på <p>/<li> ellers - samme årsak som andre steder i
   dette stilarket. Størrelsen er satt mindre enn den generelle brødteksten
   i .finn-annonser-detail, siden 18px/31px viste seg for stort her. */
.finn-annonser-detail-description p {
	white-space: pre-line;
	font-size: 0.95rem;
	line-height: 1.2;
	font-weight: 400 !important;
}

/* Punktlister inni selve beskrivelsen (f.eks. "Tilvalg:" etterfulgt av en
   liste), til forskjell fra .finn-annonser-detail-equipment-list som er den
   separate "Utstyr"-seksjonen lenger ned - denne er bevisst i én kolonne
   siden den ofte står midt i løpende tekst. */
.finn-annonser-detail-description-list {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
	font-size: 0.95rem;
}

.finn-annonser-detail-description-list li {
	margin-bottom: 0.3rem;
	line-height: 1.2;
	font-weight: 400 !important;
}

/* "Vis mer/Vis mindre" for lange beskrivelser (likt finn.no sin egen
   annonseside). JS (data-finn-description-toggle) legger til/fjerner
   "is-collapsed" etter å ha målt om innholdet faktisk er høyt nok til å
   trenge det - uten JS vises hele beskrivelsen alltid i sin helhet. */
.finn-annonser-detail-description-body.is-collapsed {
	max-height: 220px;
	overflow: hidden;
	position: relative;
}

/* Fjerner bunnmarginen på siste element (f.eks. en punktliste) inni den
   klippede boksen - ellers kan selve marginen ligge synlig som tomrom over
   nedtoningen/knappen når kuttet havner midt i den. */
.finn-annonser-detail-description-body.is-collapsed > *:last-child {
	margin-bottom: 0;
}

.finn-annonser-detail-description-body.is-collapsed::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.75rem;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), #fff );
}

/* Samme knappestil som .finn-annonser-reset (Nullstill), slik at "Vis
   mer/Vis mindre" tydelig fremstår som en klikkbar knapp i stedet for en
   ren tekstlenke. */
.finn-annonser-description-toggle {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.4rem 1rem;
	background: #fff !important;
	color: #333 !important;
	border: 1px solid #ccc !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.finn-annonser-description-toggle:hover,
.finn-annonser-description-toggle:focus {
	background: #f2f2f2 !important;
}

.finn-annonser-detail-equipment-list {
	columns: 2;
	column-gap: 2rem;
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.95rem;
}

.finn-annonser-detail-equipment-list li {
	break-inside: avoid;
	margin-bottom: 0.4rem;
	line-height: 1.2;
	font-weight: 400 !important;
}

@media (max-width: 500px) {
	.finn-annonser-detail-equipment-list {
		columns: 1;
	}
}

.finn-annonser-detail-location p {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	line-height: 1.2;
	font-weight: 400 !important;
}

.finn-annonser-detail-map {
	position: relative;
	width: 100%;
	padding-top: 45%;
	border-radius: 6px;
	overflow: hidden;
	background: #f2f2f2;
}

.finn-annonser-detail-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.finn-annonser-detail-external,
.finn-annonser-detail-external:visited {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.65rem 1.25rem;
	background: #f68429;
	color: #1e1e1e !important;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
}

.finn-annonser-detail-external:hover,
.finn-annonser-detail-external:focus {
	background: #e37519;
	color: #1e1e1e !important;
}

.finn-annonser-detail-specs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem 1.5rem;
	margin: 1rem 0 1.5rem;
}

@media (max-width: 700px) {
	.finn-annonser-detail-specs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.finn-annonser-detail-specs-grid {
		grid-template-columns: 1fr;
	}
}

.finn-annonser-detail-spec-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.finn-annonser-detail-spec-label {
	font-size: 0.8rem;
	line-height: 1.2;
	color: #666;
}

.finn-annonser-detail-spec-value {
	font-weight: 600;
	line-height: 1.3;
}

/* Admin */

.finn-annonser-admin .finn-annonser-views-table td {
	vertical-align: top;
	padding: 0.75rem;
}

.finn-annonser-admin .finn-status-ok {
	color: #1a7a1a;
	font-weight: 600;
}

.finn-annonser-admin .finn-status-error {
	color: #b32d2e;
	font-weight: 600;
}

.finn-annonser-admin-notice {
	background: #fff3cd;
	border: 1px solid #ffe69c;
	padding: 0.75rem 1rem;
	border-radius: 4px;
}