/*
 * Köp & sälj — rallytorget (/market/, 2026-10-02)
 * ===============================================
 *
 * Layouten följer Klaravik.se: ett brett sökfält överst, kategorierna som
 * egen rad under, och objekten i ett rutnät av kort med bild, märkning,
 * rubrik, ort och pris. Färgerna är SwedRallys egna ur webbplats.css —
 * marinblått för torgets band, guld som markör, papper som läsyta.
 *
 * Egen fil i stället för tillägg i webbplats.css: torget är olänkat och
 * laddas bara av den som är här, och resten av sajten ska inte bära
 * kilobyte den aldrig använder.
 */

/* --- Torgets eget sidhuvud ------------------------------------------- */

.torghuvud {
  background: linear-gradient(180deg, var(--navy) 0%, var(--natt) 100%);
  color: #fff;
  padding: 1.75rem 0 0;
}

.torghuvud__inre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.torghuvud__titel {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.torghuvud__titel span { color: var(--guld); }

.torghuvud__avgransning {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--guld);
  color: var(--natt);
  font-family: var(--ui);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--radie);
}

.torghuvud__text {
  flex: 1 1 18rem;
  margin: 0;
  color: rgb(255 255 255 / .82);
  font-size: .9375rem;
}

/* Sökfältet. Brett med flit — det är vägen in på ett torg. De sekundära
   länkarna delar rad med det, i stället för att tränga kategorimenyn. */
.torgsokrad {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 0;
}

.torglankar {
  display: flex;
  gap: 1rem;
  flex: 0 0 auto;
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 600;
}

.torglankar a { color: rgb(255 255 255 / .75); text-decoration: none; }
.torglankar a:hover { color: #fff; text-decoration: underline; }

.torgsok {
  display: flex;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.torgsok input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: .8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--black);
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radie);
}

.torgsok input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--guld);
}

.torgsok button {
  flex: 0 0 auto;
  padding: .8rem 1.5rem;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1rem;
  color: var(--natt);
  background: var(--guld);
  border: 0;
  border-radius: var(--radie);
  cursor: pointer;
}

.torgsok button:hover { background: #ffd83d; }

/* Kategorierna som egen rad. **Ingen scrollist på dator** (Lelle
   2026-10-03): raden är ihopdragen, kategorierna skiljs av tunna streck
   i stället för av luft, och det som inte får plats bryts till nästa rad.
   På telefon rullar den i sidled som förut — där är en andra rad värre. */
.torgmeny {
  margin-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / .16);
}

.torgmeny ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.torgmeny a {
  display: block;
  padding: .7rem .55rem;
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 600;
  color: rgb(255 255 255 / .8);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.torgmeny a:hover { color: #fff; }

.torgmeny a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--guld);
}

/* Strecket mellan kategorierna: Torget | Bilar | Delar … */
.torgmeny__kat + .torgmeny__kat {
  border-left: 1px solid rgb(255 255 255 / .22);
}

/* De sekundära länkarna sist, nedtonade så att ögat går till kategorierna. */
.torgmeny__sido { color: rgb(255 255 255 / .6) !important; }
.torgmeny__sido:hover { color: #fff !important; }

.torgmeny .torgmeny__lagg {
  color: var(--guld);
  font-weight: 700;
}

/* --- Sidans stomme --------------------------------------------------- */

.torg {
  background: var(--papper);
  padding: 2rem 0 3.5rem;
}

.torg__rubrikrad {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin: 0 0 1.25rem;
}

.torg__rubrikrad h2 {
  margin: 0;
  font-family: var(--ui);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--navy);
}

.torg__antal { color: var(--grau); font-size: .9375rem; }

/* Kategorirutnätet på ingångssidan. */
.torgkategorier {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .75rem;
  margin: 0 0 2.5rem;
}

.torgkategori {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-left: 4px solid var(--navy);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
  font-family: var(--ui);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

.torgkategori:hover {
  border-left-color: var(--guld);
  color: var(--natt);
}

.torgkategori span {
  font-weight: 600;
  font-size: .8125rem;
  color: var(--grau);
}

/* --- Kortrutnätet ---------------------------------------------------- *
 * Tre storlekar, valbara av besökaren (?vy=). Måttet är satt mot
 * Klaravik vid samma fönsterbredd: i spalten på 1200 px ger `mellan`
 * sex kort i bredd, `stor` fyra och `kompakt` åtta. Det var fyra mot
 * Klaraviks sex som Lelle såg 2026-10-03 — korten var helt enkelt för
 * stora, och bilden drev scrollandet.
 * --------------------------------------------------------------------- */

.torgrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: .75rem;
}

.torgrutnat--stor {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 1rem;
}

.torgrutnat--kompakt {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
}

/* Texten följer med ned i storlek, annars tar rubriken över kortet. */
.torgrutnat--kompakt .annonskort__kropp { gap: .25rem; padding: .6rem .65rem .7rem; }
.torgrutnat--kompakt .annonskort__rubrik { font-size: .875rem; }
.torgrutnat--kompakt .annonskort__ort { font-size: .75rem; }
.torgrutnat--kompakt .annonskort__pris { font-size: .9375rem; padding-top: .35rem; }
.torgrutnat--kompakt .annonsmarke { font-size: .6875rem; padding: .2rem .4rem; }
.torgrutnat--kompakt .annonskort__antalbilder { display: none; }

.torgrutnat--stor .annonskort__rubrik { font-size: 1.0625rem; }
.torgrutnat--stor .annonskort__pris { font-size: 1.1875rem; }

/* Storleksväljaren. Länkar, inte skript — vyn ligger i adressen och går
   därför att spara som bokmärke och dela. */
.vyval {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-family: var(--ui);
  font-size: .8125rem;
}

.vyval span { color: var(--grau); margin-right: .25rem; }

.vyval a {
  padding: .3rem .6rem;
  color: var(--navy);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  font-weight: 600;
}

.vyval a:hover { border-color: var(--navy); }

.vyval a[aria-current="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.annonskort {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.annonskort:hover { border-color: var(--navy); }

.annonskort__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--papper-mork);
}

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

.annonskort__ingenbild {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--ui);
  font-size: .8125rem;
  color: var(--grau);
}

/* Märkningen uppe i vänstra hörnet: Säljes, Köpes, Bytes … */
.annonsmarke {
  position: absolute;
  top: .5rem;
  left: .5rem;
  padding: .25rem .55rem;
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--natt);
  background: var(--guld);
  border-radius: var(--radie);
}

.annonsmarke--kopes,
.annonsmarke--bytes,
.annonsmarke--uthyres,
.annonsmarke--skankes {
  color: #fff;
  background: var(--navy);
}

.annonsmarke--sparrad { color: #fff; background: var(--rod); }
.annonsmarke--sald { color: #fff; background: var(--grau); }

.annonskort__antalbilder {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .15rem .45rem;
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  background: rgb(0 22 54 / .75);
  border-radius: var(--radie);
}

.annonskort__kropp {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .35rem;
  padding: .85rem .9rem 1rem;
}

.annonskort__rubrik {
  margin: 0;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  /* Två rader, sedan klipp — korten ska bli lika höga i rutnätet. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.annonskort__ort {
  font-size: .8125rem;
  color: var(--grau);
}

.annonskort__pris {
  margin-top: auto;
  padding-top: .5rem;
  font-family: var(--ui);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--natt);
}

/* --- Kategorisidan: filter + rutnät ---------------------------------- */

.torglayout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.75rem;
  align-items: start;
}

.torgfilter {
  position: sticky;
  top: 1rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
}

.torgfilter h2 {
  margin: 0 0 .5rem;
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau);
}

.torgfilter h2:not(:first-child) { margin-top: 1.5rem; }

.torgfilter ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.torgfilter li + li { margin-top: .1rem; }

/* `:not(.knapp)` av samma skäl som i kontaktrutan: annars gör den här
   regeln "Rensa"-knappen i avståndsformuläret till en bred flexrad. */
.torgfilter a:not(.knapp) {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem .5rem;
  font-size: .9375rem;
  color: var(--black);
  text-decoration: none;
  border-radius: var(--radie);
}

.torgfilter a:not(.knapp):hover { background: var(--papper); }

.torgfilter a:not(.knapp)[aria-current="true"] {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
}

.torgfilter a:not(.knapp) span { color: var(--grau); font-size: .8125rem; }
.torgfilter a:not(.knapp)[aria-current="true"] span { color: rgb(255 255 255 / .7); }

/* --- Annonssidan ----------------------------------------------------- */

.annonssida {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  gap: 2rem;
  align-items: start;
}

/* Bildytan är ett vågrätt spår med scroll-snap: svep i sidled fungerar
   utan skript. Pilarna, räknaren och helbilden läggs på av
   torggalleri.js (Lelle 2026-10-06). */
.annonsbild {
  position: relative;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  overflow: hidden;
}

.annonsbild__spar {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.annonsbild__spar::-webkit-scrollbar { display: none; }

.annonsbild__ruta {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
}

.annonsbild__ruta img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}

.annonsbild__raknare {
  position: absolute;
  top: .6rem;
  left: .6rem;
  margin: 0;
  padding: .15rem .55rem;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: .8125rem;
  pointer-events: none;
}

.annonsbild__pil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  border: 1px solid var(--papper-mork);
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--skugga);
}

.annonsbild__pil:hover { background: #fff; }
.annonsbild__pil--bak { left: .6rem; }
.annonsbild__pil--fram { right: .6rem; }

/* Exempelstämpeln ligger över bildytan och får inte svälja klicket som
   ska öppna helbilden. */
.annonsbild .exempelmarke { pointer-events: none; }

.annonsbild__ingen {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  color: var(--grau);
  font-family: var(--ui);
}

.annonsminiatyrer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.annonsminiatyrer a {
  display: block;
  width: 84px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  overflow: hidden;
  cursor: pointer;
}

.annonsminiatyrer a[aria-current] {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px var(--navy);
}

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

/* Helbilden. Byggs av torggalleri.js och läggs sist i body, utanför
   torgets spalt. Klick på bilden stänger — samma yta öppnar och stänger. */
.torgljus {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(14, 16, 22, .94);
  flex-direction: column;
}

.torgljus[data-oppen] { display: flex; }

body.har-torgljus { overflow: hidden; }

.torgljus__rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  flex: 0 0 auto;
}

.torgljus__raknare {
  margin: 0;
  color: #fff;
  font-family: var(--ui);
  font-size: .9375rem;
}

.torgljus__stang {
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.torgljus__stang:hover { background: rgba(255, 255, 255, .14); }

.torgljus__scen {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 .9rem;
}

.torgljus__bild {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}

.torgljus__pil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .9);
  color: var(--navy);
  border: 0;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.torgljus__pil--bak { left: .9rem; }
.torgljus__pil--fram { right: .9rem; }

.torgljus__remsa {
  flex: 0 0 auto;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: .7rem .9rem 1rem;
  scrollbar-width: thin;
}

.torgljus__remsa button {
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 4 / 3;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radie);
  overflow: hidden;
  cursor: pointer;
  opacity: .6;
}

.torgljus__remsa button[aria-current] { border-color: #fff; opacity: 1; }
.torgljus__remsa img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 40rem) {
  .annonsbild__pil { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .torgljus__remsa button { width: 64px; }
}

.annonspanel {
  padding: 1.25rem 1.3rem 1.5rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-top: 4px solid var(--navy);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
}

.annonspanel h1 {
  margin: .5rem 0 .35rem;
  font-family: var(--ui);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--navy);
}

.annonspanel__pris {
  margin: .75rem 0;
  font-family: var(--ui);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--natt);
}

.annonsfakta {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--papper-mork);
  font-size: .9375rem;
}

.annonsfakta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--papper-mork);
}

.annonsfakta dt { color: var(--grau); margin: 0; }
.annonsfakta dd { margin: 0; font-weight: 600; text-align: right; }

.annonstext {
  margin-top: 1.5rem;
  padding: 1.25rem 1.3rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  font-family: var(--brod);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* Besökarens egen text: radbrytningar behålls, inget tolkas som HTML. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.annonskontakt {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: var(--papper);
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
}

.annonskontakt h2 {
  margin: 0 0 .5rem;
  font-family: var(--ui);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau);
}

.annonskontakt p { margin: .25rem 0; }

/* De två vägarna in, staplade i den smala panelen. Inloggning först —
   de flesta rallyförare har redan ett konto via anmälan och licens — och
   kontoskapandet under, i tystare färg men lika brett. */
.annonskontakt__vagar {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .75rem;
}

.annonskontakt__vagar .knapp {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.annonskontakt__not {
  margin-top: .65rem !important;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--grau);
}
/* `:not(.knapp)` är poängen: utan det vann den här regeln över
   `.knapp--navy` (en klass mer specifik) och gjorde inloggningsknappens
   text marinblå på marinblå botten — osynlig (Lelle 2026-10-04). */
.annonskontakt a:not(.knapp) { color: var(--navy); }

.annonsnotis {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  background: #fff6f6;
  border-left: 4px solid var(--rod);
  border-radius: var(--radie);
  font-size: .9375rem;
}

.annonsnotis--info {
  background: #fffbe9;
  border-left-color: var(--guld-mork);
}

/* --- Formuläret ------------------------------------------------------ */

.torgformular {
  max-width: 44rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
}

.torgformular p { margin: 0 0 1.1rem; }
.torgformular label { display: block; font-family: var(--ui); font-weight: 600; margin-bottom: .25rem; }
.torgformular .falt {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--black);
  background: #fff;
  border: 1px solid #b9bfca;
  border-radius: var(--radie);
}
.torgformular .falt:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.torgformular .helptext {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  color: var(--grau);
}
.torgformular ul.errorlist {
  margin: .25rem 0;
  padding-left: 1.1rem;
  color: var(--rod);
  font-size: .875rem;
}
/* Annonstypen som knapprad i stället för radioknappar på rad. */
.torgformular #id_typ {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.torgformular #id_typ li { margin: 0; }
.torgformular #id_typ label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .45rem .8rem;
  border: 1px solid #b9bfca;
  border-radius: var(--radie);
  cursor: pointer;
  font-weight: 600;
}

.torgbilder {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  background: var(--papper);
  border: 1px dashed #b9bfca;
  border-radius: var(--radie);
}

.torgbilder__befintliga {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .75rem;
}

.torgbilder__befintliga figure {
  width: 120px;
  margin: 0;
  text-align: center;
}

.torgbilder__befintliga img {
  width: 120px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radie);
  display: block;
}

/* --- Mina annonser --------------------------------------------------- */

.minannons {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .9rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
}

.minannons + .minannons { margin-top: .75rem; }

.minannons img {
  width: 110px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radie);
  display: block;
}

.minannons__tom {
  width: 110px;
  aspect-ratio: 4 / 3;
  background: var(--papper-mork);
  border-radius: var(--radie);
}

.minannons h3 {
  margin: 0 0 .2rem;
  font-family: var(--ui);
  font-size: 1.0625rem;
}

.minannons h3 a { color: var(--navy); text-decoration: none; }
.minannons p { margin: 0; font-size: .875rem; color: var(--grau); }

.minannons__knappar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: flex-end;
}

.torgtomt {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  color: var(--grau);
}

.torgbladdring {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  font-family: var(--ui);
  font-size: .9375rem;
}

.torgbladdring a { color: var(--navy); }

/* --- Taggar ----------------------------------------------------------- */

.annonstaggar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
}

.annonstaggar__etikett {
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau);
  margin-right: .15rem;
}

.annonstaggar a {
  display: inline-block;
  padding: .2rem .6rem;
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: 999px;
}

.annonstaggar a::before { content: "#"; opacity: .45; }

.annonstaggar a:hover {
  border-color: var(--navy);
  background: var(--papper);
}

/* --- Exempelannonser -------------------------------------------------- *
 * Annonser vi själva lagt in för att visa hur RallyFynd ser ut innan det
 * finns riktigt innehåll. Bilden tonas till 80 % och ett svagt "Exempel"
 * läggs över, så att ingen tror att saken är till salu (Lelle 2026-10-04).
 * --------------------------------------------------------------------- */

.annonskort__bild--exempel img,
.annonsbild--exempel img { opacity: .8; }

.annonsbild--exempel { position: relative; }

.exempelmarke {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  padding: .1rem .5rem;
  font-family: var(--ui);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Svag, inte dominerande: texten ska läsas som en stämpel ovanpå
     bilden, inte ersätta den. */
  color: rgb(255 255 255 / .82);
  text-shadow: 0 1px 3px rgb(0 22 54 / .55);
  border: 2px solid rgb(255 255 255 / .6);
  border-radius: var(--radie);
  pointer-events: none;
  white-space: nowrap;
}

.exempelmarke--stor {
  font-size: 2.25rem;
  padding: .25rem 1.25rem;
  letter-spacing: .3em;
  border-width: 3px;
}

.torgrutnat--kompakt .exempelmarke {
  font-size: .8125rem;
  letter-spacing: .12em;
  border-width: 1px;
}

/* Stämpeln är dekor (aria-hidden). Den här raden säger samma sak för den
   som lyssnar på sidan. Klassen fanns inte i något stilark — den används
   i administrationens tabeller utan att vara definierad, vilket gör
   "Åtgärder" synligt där. Det är en egen sak att städa. */
.visuellt-dolt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.exempelnotis {
  margin: 0 0 1.25rem;
  padding: .85rem 1.1rem;
  background: #fffbe9;
  border-left: 4px solid var(--guld-mork);
  border-radius: var(--radie);
  font-size: .9375rem;
  line-height: 1.5;
}

/* --- "På väg till tävlingen" ----------------------------------------- */

/* Märkningen på kortet. Nere till vänster, så att den inte krockar med
   annonstypen uppe till vänster eller bildräknaren nere till höger. */
.annonskort__tavling {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  max-width: calc(100% - 1rem);
  padding: .2rem .5rem;
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: rgb(0 39 95 / .92);
  border-left: 3px solid var(--guld);
  border-radius: var(--radie);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.torgrutnat--kompakt .annonskort__tavling { display: none; }

/* Rutan på annonssidan. */
.annonstavling {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 1rem 0 0;
  padding: .9rem 1rem;
  background: var(--navy);
  color: #fff;
  border-left: 4px solid var(--guld);
  border-radius: var(--radie);
  font-size: .9375rem;
}

.annonstavling strong {
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--guld);
}

.annonstavling span { color: rgb(255 255 255 / .85); }

.annonstavling__text { font-size: .875rem; line-height: 1.45; }

.annonstavling a {
  margin-top: .35rem;
  color: #fff;
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 600;
}

.torgfilter__datum {
  display: block;
  padding: 0 .5rem .3rem;
  font-size: .75rem;
  color: var(--grau);
}

/* --- Efterlysningar: torget baklänges -------------------------------- */

/* "Efterlys" och "+ Lägg upp annons" är handlingar, inte kategorier, och
   försvann i raden av flikar (Lelle 2026-10-03: "den försvinner just nu i
   allt"). De bryts därför ut som knappar: den ena inramad, den andra fylld,
   med en avdelare före. */
.torgmeny__efterlys,
.torgmeny__lagg {
  display: inline-flex;
  align-items: center;
  margin: .3rem .1rem;
  padding: .3rem .7rem !important;
  border-radius: 999px;
  border-bottom: 0 !important;
  font-weight: 700;
  white-space: nowrap;
}

.torgmeny__efterlys {
  color: var(--guld) !important;
  border: 1.5px solid var(--guld);
}

.torgmeny__efterlys:hover,
.torgmeny__efterlys[aria-current="page"] {
  background: var(--guld);
  color: var(--natt) !important;
}

.torgmeny__lagg {
  color: var(--natt) !important;
  background: var(--guld);
  border: 1.5px solid var(--guld);
}

.torgmeny__lagg:hover { background: #ffd83d; border-color: #ffd83d; }

/* Avdelare mellan kategorierna och handlingarna. */
.torgmeny li:has(.torgmeny__efterlys) {
  margin-left: .45rem;
  padding-left: .55rem;
  border-left: 1px solid rgb(255 255 255 / .22);
}

@media (max-width: 48rem) {
  /* Telefon: rulla i sidled i stället för att bryta till flera rader. */
  .torgmeny { overflow-x: auto; scrollbar-width: thin; }
  .torgmeny ul { flex-wrap: nowrap; }
}

.torgsokes__ingress {
  margin: 0 0 1.25rem;
  font-family: var(--brod);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--black);
}

.torgsokes__uppmaning {
  margin: 1rem 0 0;
  padding: .9rem 1.1rem;
  background: #fff;
  border-left: 4px solid var(--guld);
  border-radius: var(--radie);
  font-family: var(--brod);
}

/* Matchningen under en annons: "3 personer söker något liknande". */
.torgmatch {
  margin-top: 2.5rem;
  padding: 1.35rem 1.5rem 1.6rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-top: 4px solid var(--guld);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
}

.torgmatch h2 {
  margin: 0 0 .25rem;
  font-family: var(--ui);
  font-size: 1.25rem;
  color: var(--navy);
}

.torgmatch__text {
  margin: 0 0 1rem;
  font-size: .9375rem;
  color: var(--grau);
}

.torgmatch__mer {
  margin: 1rem 0 0;
  font-family: var(--ui);
  font-size: .875rem;
}

/* --- Avståndsfiltret -------------------------------------------------- */

.torgavstand {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .5rem;
  align-items: center;
  margin-bottom: .5rem;
}

.torgavstand label {
  grid-column: 1 / -1;
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--grau);
  margin-top: .25rem;
}

.torgavstand .falt {
  grid-column: 1 / -1;
  width: 100%;
  padding: .45rem .55rem;
  font: inherit;
  font-size: .9375rem;
  border: 1px solid #b9bfca;
  border-radius: var(--radie);
}

.torgavstand button,
.torgavstand .knapp { margin-top: .5rem; }

.torgavstand__besked {
  margin: .25rem 0 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--grau);
}

/* Avståndet på kortet: guldmarkerat, så att ögat hittar det i rutnätet. */
.annonskort__avstand {
  display: inline-block;
  margin-left: .25rem;
  padding: .05rem .35rem;
  font-family: var(--ui);
  font-size: .75rem;
  font-weight: 700;
  color: var(--natt);
  background: var(--guld);
  border-radius: var(--radie);
  white-space: nowrap;
}

.annonsfakta__avstand {
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--guld-mork);
}

.torgkalla {
  margin: 1.5rem 0 0;
  font-size: .75rem;
  color: var(--grau);
}

.torgkalla a { color: var(--grau); }

/* --- Dela på Facebook ------------------------------------------------ */

.annonsdela {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--papper-mork);
}

.facebookknapp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  font-family: var(--ui);
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  /* Facebooks egen blå. Märket ska se ut som det gör överallt annars,
     annars känns knappen inte igen. */
  background: #1877f2;
  border-radius: var(--radie);
  text-decoration: none;
}

.facebookknapp:hover { background: #0f63d6; }

.facebookknapp:focus-visible {
  outline: 2px solid var(--natt);
  outline-offset: 2px;
}

.facebookknapp svg { flex: 0 0 auto; }

/* På Mina annonser räcker en liten knapp i knapp-raden. */
.minannons .facebookknapp {
  padding: .4rem .7rem;
  font-size: .8125rem;
}

/* --- Rapportera en annons -------------------------------------------- */

/* Länken ska finnas men inte skrika. Den som behöver den letar efter den. */
.annonsrapport {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--papper-mork);
  font-size: .875rem;
}

.annonsrapport a { color: var(--grau); }
.annonsrapport a:hover { color: var(--rod); }

.torgrapport { max-width: 40rem; }

.torgrapport h2 {
  margin: .25rem 0 .35rem;
  font-family: var(--ui);
  font-size: 1.375rem;
  color: var(--navy);
}

.torgrapport__vad { margin: 0 0 .5rem; font-size: .875rem; }
.torgrapport__vad a { color: var(--grau); }

.torgrapport__ingress { color: var(--grau); margin-bottom: 1.25rem; }

.torgrapport__orsaker {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  background: var(--papper);
}

.torgrapport__orsaker legend {
  padding: 0 .4rem;
  font-family: var(--ui);
  font-weight: 700;
  color: var(--navy);
}

.torgrapport__orsaker ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.torgrapport__orsaker li + li { margin-top: .15rem; }

.torgrapport__orsaker label {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .5rem;
  margin: 0;
  font-weight: 500;
  border-radius: var(--radie);
  cursor: pointer;
}

.torgrapport__orsaker label:hover { background: #fff; }

/* --- Instruktionssidan ----------------------------------------------- */

.torghjalp {
  max-width: 48rem;
  padding: 1.75rem 2rem 2.25rem;
  background: #fff;
  border: 1px solid var(--papper-mork);
  border-radius: var(--radie);
  box-shadow: var(--skugga);
}

.torghjalp h3 {
  margin: 2.25rem 0 .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--papper-mork);
  font-family: var(--ui);
  font-size: 1.1875rem;
  color: var(--navy);
}

.torghjalp p,
.torghjalp li {
  font-family: var(--brod);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.torghjalp__ingress {
  font-size: 1.1875rem !important;
  color: var(--black);
}

/* Tre rutor: vem får göra vad. Det är frågan folk kommer med. */
.torghjalp__kort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  margin: 1.5rem 0 .5rem;
}

.torghjalp__kort > div {
  padding: 1rem 1.1rem 1.1rem;
  background: var(--papper);
  border-top: 3px solid var(--guld);
  border-radius: var(--radie);
}

.torghjalp__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: .45rem;
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 800;
  color: #fff;
  background: var(--navy);
  border-radius: 50%;
}

.torghjalp__kort strong {
  display: block;
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--navy);
}

.torghjalp__kort p {
  margin: .2rem 0 0;
  font-size: .9375rem !important;
  line-height: 1.45;
  color: var(--grau);
}

/* Tre steg, stora siffror och en rad var. */
.torghjalp__steg {
  margin: 1rem 0 1.25rem;
  padding-left: 1.4rem;
}

.torghjalp__steg li {
  margin-bottom: .4rem;
  padding-left: .2rem;
}

.torghjalp__steg li::marker {
  font-family: var(--ui);
  font-weight: 800;
  color: var(--guld-mork);
}

/* Faktatabellen: etikett till vänster, svar till höger. */
.torgfakta {
  margin: 1rem 0 1.5rem;
  border-top: 1px solid var(--papper-mork);
}

.torgfakta > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: .5rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--papper-mork);
}

.torgfakta dt {
  margin: 0;
  font-family: var(--ui);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--navy);
}

.torgfakta dd {
  margin: 0;
  font-family: var(--brod);
  font-size: 1rem;
  line-height: 1.5;
}

.torgfakta dd a { color: var(--navy); }

.torghjalp__punkter { margin: 1rem 0 1.25rem; padding-left: 1.3rem; }
.torghjalp__punkter li { margin-bottom: .45rem; }

.torghjalp__noter {
  padding: .9rem 1rem;
  background: var(--papper);
  border-radius: var(--radie);
  font-size: .9375rem !important;
  color: var(--grau);
}

.torghjalp__avslut {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--guld);
}

.torghjalp__avslut .knapp { margin-right: .5rem; }

@media (max-width: 36rem) {
  .torghjalp { padding: 1.25rem 1.1rem 1.75rem; }
  .torghjalp p, .torghjalp li { font-size: 1rem; }
  .torghjalp__ingress { font-size: 1.0625rem !important; }
  /* Etiketten över svaret i stället för bredvid — två smala spalter
     bryter annars varje rad på mitten. */
  .torgfakta > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* --- Småplock som torget behöver ------------------------------------- *
 * `.knapp--liten` och `.hjalp` finns i redaktion.css men inte i
 * webbplats.css. Torget använder båda, så de definieras här i stället för
 * att läggas till i huvudfilen som varje sida laddar.
 * --------------------------------------------------------------------- */

.torg .knapp--liten,
.torgformular .knapp--liten {
  padding: .4rem .75rem;
  font-size: .8125rem;
}

.torg .hjalp {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--grau);
}

/* --- Smala skärmar --------------------------------------------------- */

@media (max-width: 60rem) {
  .torglayout { grid-template-columns: 1fr; }
  .torgfilter { position: static; }
  .annonssida { grid-template-columns: 1fr; }
}

@media (max-width: 36rem) {
  /* På telefon får två kort plats i bredd oavsett vald storlek; kompakt
     ger tre. Minsta måttet styr, annars blir korten en bildremsa. */
  .torgrutnat,
  .torgrutnat--stor { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
  .torgrutnat--kompakt { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4rem; }
  .annonskort__rubrik { font-size: .9375rem; }
  .annonskort__pris { font-size: 1rem; }
  .vyval { font-size: .75rem; }
  .torgsokrad { flex-wrap: wrap; gap: .6rem; }
  .torgsok { flex-wrap: wrap; }
  .torgsok button { width: 100%; }
  .torglankar { width: 100%; justify-content: center; }
  .minannons { grid-template-columns: 84px minmax(0, 1fr); }
  .minannons img, .minannons__tom { width: 84px; }
  .minannons__knappar { grid-column: 1 / -1; justify-content: flex-start; }
}