/* MinaLoppisar - prototyp
   Ingen CSS-ramverk används; allt är handskrivet för att matcha designen
   och för att appen ska fungera helt utan internetuppkoppling/byggsteg. */

:root {
  --bg: #0c110e;
  --surface: #151d18;
  --surface-2: #1c261f;
  --surface-3: #232f26;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f3f0e6;
  --muted: #a7b3ab;
  --muted-2: #7c8983;

  --green: #3f8a5c;
  --green-dark: #2a6144;
  --green-light: #86c49e;
  --amber: #c99a5b;
  --rust: #a35c42;
  /* Guld = framhävd loppis (betald nivå). Medvetet ljusare och kallare än
     --amber, som betyder "ingår i din loppisrunda" - de två får inte gå att
     blanda ihop på kartan. */
  --gold: #e3b341;

  --cream: #f5efe1;
  --cream-text: #201d16;
  --cream-muted: #5c5747;

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  /* Ytan längst ner som telefonen själv använder: hemindikatorn, och på
     nyare iPhone även Safaris adressfält. Sajten ritas ända ner till kanten
     (viewport-fit=cover i index.html), så den ytan måste lämnas fri. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Bottenmenyns hela höjd på mobilen. Sidan och chattens skrivfält lämnar
     så mycket plats längst ner. */
  --bottomnav-h: calc(86px + var(--safe-bottom));
  --maxw: 1180px;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bottomnav-h); /* rum för bottennav på mobil */
  overflow-x: hidden; /* extra skydd mot att enstaka element råkar bli bredare än skärmen på mobil */
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

.muted { color: var(--muted); }

/* ---------- Layout helpers ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 20px;
}
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.section__head--center { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.subhead { margin: 28px 0 12px; font-size: 1.05rem; }

.link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--green-light); font-weight: 600; font-size: 0.92rem;
}

.grid { display: grid; gap: 16px; }
.grid--cards { grid-template-columns: 1fr; }
.grid--sellers { grid-template-columns: 1fr; }
.grid--feature3 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--cards { grid-template-columns: repeat(2, 1fr); }
  .grid--sellers { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--cards { grid-template-columns: repeat(3, 1fr); }
  .grid--feature3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--green); color: white; }
.btn--primary:hover { background: var(--green-dark); }
.btn--outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn--outline:hover { background: var(--surface-2); }
.btn--danger { background: transparent; border: 1px solid var(--rust); color: var(--rust); }
.btn--danger:hover { background: var(--rust); color: white; }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--full { width: 100%; }
.btn--sm { padding: 8px 16px; font-size: 0.85rem; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.35); color: white; border: 1px solid rgba(255,255,255,0.12);
}
.iconbtn--active { background: var(--rust); color: white; }
.iconbtn--float { position: absolute; top: 10px; right: 10px; }
.iconbtn--back { position: absolute; top: 10px; left: 10px; }
.iconbtn--share { position: absolute; top: 10px; right: 54px; }
.iconbtn--edit { position: absolute; top: 10px; right: 98px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 500;
}
.chiprow--hero .chip { font-size: 0.95rem; }
.chip--sm { padding: 5px 12px; font-size: 0.76rem; }
.chip--active { background: var(--green); border-color: var(--green); color: white; }

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chiprow--wrap { flex-wrap: wrap; }
.chiprow--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.chiprow--hero { margin-top: 18px; }
.locationmsg { margin-top: 8px; }
.locationmsg p { margin: 0; font-size: 0.82rem; }

.legalpage { max-width: 720px; }
.legalpage__block { margin-top: 28px; }
.legalpage__block h2 { font-size: 1.05rem; margin-bottom: 8px; }
.legalpage__block p { color: var(--muted); line-height: 1.6; margin: 0 0 4px; }
.legalpage__block p + p { margin-top: 10px; }
.legalpage__block code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: var(--surface-2); padding: 2px 6px; border-radius: 4px; }

.badge {
  display: inline-flex; align-items: center; padding: 5px 10px;
  border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700;
}
.badge--time { position: absolute; left: 10px; bottom: 10px; background: rgba(12,17,14,0.75); color: var(--cream); backdrop-filter: blur(2px); }
.badge--pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--amber); color: #221a0f; }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(12,17,14,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.02rem; min-width: 0; }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand--small { font-size: 0.95rem; }
.navbar__links { display: none; gap: 6px; flex: 1; }
.navlink { padding: 9px 14px; border-radius: var(--radius-pill); color: var(--muted); font-weight: 600; font-size: 1.05rem; }
.navlink--active { color: var(--text); background: var(--surface-2); }
.navbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.navbar__actions .btn--ghost { display: none; }
.navbar__actions .btn--primary { padding: 10px 16px; font-size: 0.88rem; }

@media (min-width: 860px) {
  .navbar__links { display: flex; }
  .navbar__actions .btn--ghost { display: inline-flex; }
  .navbar__actions .btn { font-size: 1.02rem; }
  .navbar__actions .btn--primary { padding: 12px 22px; }
  .brand { font-size: 1.2rem; }
  .navbar__inner { padding: 14px 20px; gap: 20px; }
}

/* ---------- Bottom nav (mobil) ---------- */
/* Grön och lite större än förr, så att den inte går att missa. Den aktiva
   fliken får en ljus platta bakom sig. Bara själva knappraden är grön - ytan
   under den, som telefonen använder för hemindikatorn och Safaris adressfält,
   har sidans egen mörka färg. Annars blev hela nederkanten grön på iPhone. */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-around; align-items: flex-start; gap: 2px;
  background: linear-gradient(
    180deg,
    #2f6d4c 0,
    var(--green-dark) calc(100% - var(--safe-bottom)),
    var(--bg) calc(100% - var(--safe-bottom))
  );
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  padding: 9px 6px calc(9px + var(--safe-bottom));
}
.bottomnav__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(245, 239, 225, 0.82); font-size: 0.74rem; font-weight: 700; white-space: nowrap;
  padding: 7px 2px 6px; border-radius: 14px;
  transition: background .15s ease, color .15s ease;
}
.bottomnav__item svg { flex-shrink: 0; }
.bottomnav__item--active { color: white; background: rgba(255, 255, 255, 0.17); }
.bottomnav__item:active { background: rgba(255, 255, 255, 0.24); }
/* Riktigt smala telefoner: lite mindre text så att "Köp & sälj" och
   "Favoriter" får plats utan att brytas. */
@media (max-width: 370px) {
  .bottomnav { padding-left: 3px; padding-right: 3px; }
  .bottomnav__item { font-size: 0.68rem; }
}

@media (min-width: 860px) {
  .bottomnav { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 64px 20px 46px; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 20% 0%, #1c2a20 0%, var(--bg) 55%),
              linear-gradient(180deg, #0e1310 0%, #0c110e 100%);
  z-index: -1;
}
.hero__content { max-width: var(--maxw); margin: 0 auto; }
.eyebrow { color: var(--green-light); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.08em; }
.hero__title { font-size: clamp(2.4rem, 7vw, 3.9rem); line-height: 1.05; margin: 12px 0 16px; font-weight: 800; }
.hero__sub { color: var(--muted); max-width: 580px; margin: 0 0 24px; font-size: 1.15rem; line-height: 1.5; }

.search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 10px 10px 10px 22px;
  max-width: 620px;
}
.search--compact { max-width: none; margin-bottom: 12px; }
.search__input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); padding: 8px 0; font-size: 1.05rem; }
.search__input::placeholder { color: var(--muted-2); }
.search__btn { flex-shrink: 0; }
.search__gpsbtn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none; color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.search__gpsbtn:hover { background: var(--surface-2); color: var(--green-light); }
.search__gpsbtn:disabled { opacity: 0.5; cursor: default; }

/* Avstängda knappar såg tidigare precis ut som klickbara. Att trycka på
   något som inte svarar känns som att sidan hängt sig - hellre en knapp som
   tydligt ser otillgänglig ut. Gäller hela sajten, inte bara ett ställe. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.6);
}
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; }

/* ---------- Shortcuts ---------- */
.shortcuts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 640px) { .shortcuts { grid-template-columns: repeat(4, 1fr); } }
.shortcut {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 10px; text-align: center; color: var(--text); font-size: 0.95rem; font-weight: 600; line-height: 1.35;
}
.shortcut__icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
}

/* ---------- Listing card ---------- */
.listingcard { display: block; color: var(--text); }
.listingcard__imgwrap { position: relative; aspect-ratio: 4/3; background: var(--surface-2); }
.listingcard__img { width: 100%; height: 100%; object-fit: cover; }
.listingcard__body { padding: 14px 16px 16px; }
.listingcard__title { margin: 0 0 2px; font-size: 1.02rem; }
.listingcard__sub { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }
.listingcard__meta { display: flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--muted); font-size: 0.8rem; }
.listingcard__seller { margin-left: 2px; }

/* ---------- Story banner ---------- */
.storybanner {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: linear-gradient(135deg, #16321f, #101c14);
}
@media (min-width: 760px) { .storybanner { grid-template-columns: 1.1fr 1fr; } }
.storybanner__text { padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.storybanner__text h2 { margin: 0; font-size: 1.5rem; }
.storybanner__text p { margin: 0; color: var(--muted); }
.storybanner__img { width: 100%; height: 220px; object-fit: cover; }
@media (min-width: 760px) { .storybanner__img { height: auto; } }

/* ---------- Feature blocks ---------- */
.feature3 { padding: 22px; }
.feature3__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feature3 h3 { margin: 0 0 8px; font-size: 1.05rem; }
.feature3 p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 760px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.pricecard {
  position: relative; background: var(--cream); color: var(--cream-text);
  padding: 26px 22px; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: visible;
}
.pricecard--highlight { transform: translateY(-6px); box-shadow: var(--shadow); border: 2px solid var(--amber); }
.pricecard__name { margin: 6px 0 0; font-size: 1.1rem; }
.pricecard__price { font-size: 1.9rem; font-weight: 800; }
.pricecard__who { margin: -8px 0 0; color: var(--cream-muted); font-size: 0.85rem; }
.pricecard__features { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 9px; }
.pricecard__features li { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.pricecard .btn--outline { border-color: rgba(0,0,0,0.18); color: var(--cream-text); }
.pricecard .btn--outline:hover { background: rgba(0,0,0,0.06); }
.pricecard__manage { display: block; text-align: center; margin: 10px auto 0; color: var(--cream-text); text-decoration: underline; }

/* Besked om att abonnemanget håller på att ta slut, eller att en betalning
   fastnat. Ligger på det ljusa priskortet, därav de mörka färgerna. */
.plannotis {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(32, 29, 22, 0.08); border: 1px solid rgba(32, 29, 22, 0.16);
  text-align: left;
}
.plannotis strong { display: block; font-size: 0.9rem; font-weight: 800; color: var(--cream-text); }
.plannotis p { margin: 5px 0 0; font-size: 0.85rem; font-weight: 500; line-height: 1.55; color: rgba(32, 29, 22, 0.92); }
.plannotis--varning { background: rgba(163, 92, 66, 0.14); border-color: rgba(163, 92, 66, 0.4); }

/* Spärrad prisnivå: avstängd, men texten är förklaringen och måste gå att
   läsa - därför inte den vanliga genomskinligheten för avstängda knappar. */
.btn--blocked:disabled,
.btn--blocked[disabled] {
  opacity: 1;
  filter: none;
  background: rgba(32, 29, 22, 0.07);
  border-color: rgba(32, 29, 22, 0.22);
  color: rgba(32, 29, 22, 0.78);
  font-weight: 700;
}
.pricecard__msg { max-width: 480px; margin: 16px auto 0; }

.boostcard { margin-top: 18px; padding: 22px 24px; background: var(--surface); }
.boostcard h3 { margin: 0 0 6px; }
.boostcard p { margin: 0; color: var(--muted); }

/* ---------- Sustain banner ---------- */
.sustain { display: flex; align-items: flex-start; gap: 16px; padding: 22px; background: var(--cream); color: var(--cream-text); }
.sustain h3 { margin: 0 0 6px; }
.sustain p { margin: 0; color: var(--cream-muted); font-size: 0.9rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); margin-top: 20px; }
.footer__row { max-width: var(--maxw); margin: 0 auto; padding: 30px 20px 10px; }
.footer__badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .footer__badges { grid-template-columns: repeat(4, 1fr); } }
.footer__badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.footer__badgesub { margin: -2px 0 0; font-size: 0.76rem; font-weight: 400; color: var(--muted-2); line-height: 1.4; max-width: 180px; }
.footer__bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 20px 30px;
  display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center;
  color: var(--muted-2); font-size: 0.82rem;
}
.footer__links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.footer__towns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 0.82rem; }
.footer__townslabel { color: var(--muted-2); font-weight: 600; }
@media (min-width: 640px) { .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }

/* ---------- Map page ---------- */
.mappage { max-width: var(--maxw); margin: 0 auto; padding: 16px 16px 24px; }
.mappage__toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mappage__body { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 960px) { .mappage__body { grid-template-columns: 1.3fr 1fr; } }
.mappage__mapcol { position: relative; }
.mappage__listcol { min-width: 0; }
.maplist { display: flex; flex-direction: column; gap: 12px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.maplist__count { margin: 0 0 4px; }
.maplistitem { display: flex; flex-direction: column; gap: 8px; }
.maplistitem .listingcard { display: grid; grid-template-columns: 96px 1fr; }
.maplistitem .listingcard__imgwrap { aspect-ratio: auto; height: 100%; }
.maplistitem .listingcard__body { padding: 10px 12px; }

.routebar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 8px 8px 8px 16px; margin-bottom: 12px;
  max-width: var(--maxw); font-size: 0.85rem;
}
.routebar span { flex: 1; }

.mapwrap { position: relative; height: 420px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.mapwrap--route { height: 340px; margin-bottom: 20px; }
.mapwrap-inner { position: relative; width: 100%; height: 100%; }
.leafletpin { position: relative; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--green-dark); border: 2px solid rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.leafletpin svg { rotate: 45deg; }
.leafletpin--cluster { background: var(--green); width: 40px; height: 40px; }
.leafletpin--highlight { background: var(--amber); }
.leafletpin__count { position: absolute; top: -8px; right: -8px; rotate: 45deg; background: white; color: #16301f; font-size: 0.66rem; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mapcanvas {
  position: relative; width: 100%; height: 100%;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.18) 1px, transparent 1px),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.14) 1px, transparent 1px),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.14) 1px, transparent 1px),
    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(160deg, #2c4a37 0%, #22392b 55%, #1a2c21 100%);
  background-size: 40px 40px, 60px 60px, 50px 50px, 70px 70px, cover;
}
.mapcanvas__water {
  position: absolute; left: -10%; bottom: -15%; width: 60%; height: 55%;
  background: radial-gradient(closest-side, rgba(60,120,150,0.55), rgba(60,120,150,0));
  border-radius: 50%; filter: blur(2px);
}
.maplabel {
  /* Nålen står ovanför sin punkt, så etiketten läggs tydligt nedanför -
     annars hamnar ortsnamnet bakom nålen och blir oläsligt. Skuggan gör
     texten läsbar även när den råkar hamna ovanpå en annan nål. */
  position: absolute; transform: translate(-50%, 10px);
  font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.62);
  text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75);
  pointer-events: none; white-space: nowrap; z-index: 1;
}
.mappin {
  position: absolute; transform: translate(-50%, -100%);
  background: var(--green-dark); border: 2px solid rgba(255,255,255,0.85);
  width: 34px; height: 34px; border-radius: 50% 50% 50% 0; rotate: -45deg;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.mappin svg { rotate: 45deg; }
.mappin--cluster { background: var(--green); width: 40px; height: 40px; }
.mappin--highlight { background: var(--amber); }

/* ---- Framhävd nål: förmån på Plus och Företag & Arrangör ---- */
.leafletpin--featured,
.mappin--featured {
  background: var(--gold);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.3), 0 6px 14px rgba(0, 0, 0, 0.45);
  width: 38px; height: 38px;
}
.mappin--featured { z-index: 3; }
.leafletpin--featured svg, .mappin--featured svg { stroke: #2a1f06; }

.badge--featured {
  position: absolute; top: 10px; left: 10px;
  background: var(--gold); color: #2a1f06; font-weight: 700;
}

/* ---- Bildgräns i Skapa loppis ---- */
.planhint {
  margin-top: 14px; padding: 14px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.planhint p { margin: 0; color: #cbd5cd; font-size: 0.9rem; font-weight: 500; line-height: 1.6; }
.planhint__left { margin-top: 10px; font-size: 0.85rem; }

/* ---- Tomt läge: inga loppisar att visa ----
   En tom sida är första intrycket för den som kommer tidigt till en ung
   sajt. Då ska den förklara läget och erbjuda något att göra, inte bara
   konstatera att det är tomt. */
.emptystate {
  padding: 28px 24px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.emptystate h3 { margin: 0; font-size: 1.05rem; }
.emptystate p { margin: 0; color: #cbd5cd; font-size: 0.92rem; font-weight: 500; line-height: 1.6; max-width: 44ch; }
.emptystate .btn { margin-top: 4px; }

/* ---- Adressuppslagning i Skapa loppis ---- */
.addrstatus { margin-top: 6px; }
.addrstatus p { margin: 0; font-size: 0.87rem; font-weight: 500; line-height: 1.55; }
.addrfound { display: flex; align-items: center; gap: 6px; color: var(--green-light); }

/* ---- Avslutade loppisar ---- */
.badge--over { background: rgba(12, 17, 14, 0.85); color: var(--muted); }
.overnotice {
  margin: 12px 0 0; padding: 10px 14px;
  background: rgba(163, 92, 66, 0.16); border: 1px solid rgba(163, 92, 66, 0.38);
  border-radius: var(--radius-sm); color: #f0b9a4; font-size: 0.9rem;
}

/* ---- Redigera profil ---- */
.editprofile .field { margin-top: 16px; }
.editprofile__avatarrow { display: flex; align-items: center; gap: 16px; margin: 6px 0 4px; flex-wrap: wrap; }
.editprofile__avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border); background: var(--surface-2);
}
.editprofile__actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

/* ---- Anmäl en annons ----
   Medvetet diskret. De allra flesta annonser är helt i sin ordning och ska
   inte omges av misstänksamhet. */
.reportwrap { margin-top: 26px; }
.reportwrap__open { color: var(--muted); font-size: 0.85rem; text-decoration: underline; }
.reportwrap__open:hover { color: var(--cream); }
.reportwrap__done { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.88rem; }
.reportform { display: flex; flex-direction: column; gap: 12px; }
.reportform h3 { margin: 0; font-size: 1rem; }
.reportform p.muted { margin: 0; font-size: 0.88rem; font-weight: 500; line-height: 1.55; color: #cbd5cd; }
.reportform__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Säljarens egen ruta på loppissidan (visningar + boost) ----
   Bara den som äger annonsen ser den här. Den guldtonade bakgrunden knyter
   ihop rutan med den framhävda nålen på kartan, så att det känns som samma
   sak man köper. */
.ownerbox {
  margin: 18px 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(227, 179, 65, 0.05), transparent 62%);
}
.ownerbox--boosted {
  border-color: rgba(227, 179, 65, 0.45);
  background: linear-gradient(160deg, rgba(227, 179, 65, 0.12), transparent 68%);
}
.ownerbox__top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ownerbox__label {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 700;
}
.ownerbox__badge {
  margin-left: auto; background: var(--gold); color: #2a1f06;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
}
.ownerbox__stat { display: flex; align-items: baseline; gap: 9px; }
.ownerbox__stat strong { font-size: 2.15rem; line-height: 1; font-weight: 800; color: var(--cream); }
.ownerbox__stat span { color: var(--muted); font-size: 0.95rem; }
.ownerbox__hint { margin: 10px 0 0; color: #cbd5cd; font-size: 0.89rem; font-weight: 500; line-height: 1.6; }
.ownerbox__divider { height: 1px; background: var(--border); margin: 16px 0; }
.ownerbox__offer h3 { margin: 0 0 6px; font-size: 1rem; }
.ownerbox__offer p { margin: 0 0 14px; color: #cbd5cd; font-size: 0.9rem; font-weight: 500; line-height: 1.6; }
.ownerbox__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ownerbox__once { color: var(--muted); font-size: 0.79rem; }

/* ---- Statistikpanel på egen profil ---- */
.statspanel__title { font-size: 1.1rem; margin: 0 0 14px; }
.statspanel__totals { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; }
.statspanel__locked { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.statspanel__lockedtext { flex: 1; min-width: 200px; }
.statspanel__lockedtext h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
/* Förklarande text mot mörk bakgrund blir svårläst när den både är tunn och
   nedtonad. Lite tyngd och ljusare färg gör stor skillnad, utan att den
   börjar konkurrera med rubriken. */
.statspanel__lockedtext p.muted { margin: 0; font-size: 0.9rem; font-weight: 500; line-height: 1.55; color: #cbd5cd; }
.stattable { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stattable th, .stattable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.stattable th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stattable td { color: var(--cream); }
.stattable th:nth-child(n+2), .stattable td:nth-child(n+2) { text-align: right; width: 96px; }
.mappin__count {
  position: absolute; top: -8px; right: -8px; rotate: 45deg;
  background: white; color: #16301f; font-size: 0.66rem; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.mapme {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #5aa7ff; border: 3px solid rgba(90,167,255,0.35);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(90,167,255,0.18);
}

.mappreviewwrap { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.mappreview { display: flex; box-shadow: var(--shadow); }
.mappreview__img { width: 96px; object-fit: cover; }
.mappreview__body { padding: 12px 14px; flex: 1; min-width: 0; }
.mappreview__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mappreview__top h3 { margin: 0; font-size: 0.98rem; }
.mappreview__meta { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.8rem; margin: 4px 0 10px; }
.mappreview__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.clusterlist { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.clusterlist li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; }

/* ---------- Listing detail ---------- */
.listingpage__gallery { position: relative; aspect-ratio: 4/3; background: var(--surface-2); }
@media (min-width: 760px) { .listingpage__gallery { aspect-ratio: 16/7; border-radius: var(--radius-lg); overflow: hidden; margin: 16px auto 0; max-width: var(--maxw); } }
.listingpage__img { width: 100%; height: 100%; object-fit: cover; }
.listingpage__navbtns { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; pointer-events: none; }
.listingpage__navbtns .iconbtn { pointer-events: all; }
.dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.dot--active { background: white; width: 16px; border-radius: 4px; }
.listingpage__body { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.listingpage__body h1 { margin: 0; font-size: 2rem; }
.listingpage__body > p.muted { font-size: 1.05rem; }
.listingpage__desc { color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.infolist { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.inforow { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }

.sellercard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--text); }
.sellercard__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sellercard__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* ---------- Profile ---------- */
.profilehead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.profilehead__avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface-2); }
.profilehead h1 { margin: 6px 0 0; font-size: 1.3rem; }
.profilehead__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.profilehead__stats { display: flex; gap: 26px; margin: 14px 0; }
.profilehead__bio { max-width: 480px; color: var(--muted); }
.stat { display: flex; flex-direction: column; align-items: center; font-size: 0.85rem; color: var(--muted); }
.stat strong { font-size: 1.1rem; color: var(--text); }

.tabbar { display: flex; gap: 4px; justify-content: center; border-bottom: 1px solid var(--border); max-width: var(--maxw); margin: 8px auto 0; padding: 0 20px; }
.tabbar__item {
  padding: 12px 16px; color: var(--muted); font-weight: 600;
  background: none; border: none; border-bottom: 2px solid transparent;
  transition: color 0.15s ease;
}
.tabbar__item:hover { color: var(--text); }
.tabbar__item--active { color: var(--green-light); border-color: var(--green); }

/* ---------- Create flow ---------- */
.createpage { max-width: 640px; }
.steprow { display: flex; gap: 6px; margin: 18px 0 26px; overflow-x: auto; }
.stepdot { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 64px; }
.stepdot__num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: var(--muted);
}
.stepdot__label { font-size: 0.66rem; color: var(--muted-2); text-align: center; }
.stepdot--active .stepdot__num { background: var(--green); color: white; }
.stepdot--active .stepdot__label { color: var(--text); }
.stepdot--done .stepdot__num { background: var(--green-dark); color: var(--green-light); }

.formstep { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.formstep h2 { margin: 0; font-size: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.input {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px; color: var(--text); outline: none;
}
.input:focus { border-color: var(--green); }
.textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.row2 .input { min-width: 0; width: 100%; }

.uploadbtn {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 11px 18px; border-radius: var(--radius-pill); border: 1px dashed var(--border);
  color: var(--text); font-weight: 600; font-size: 0.9rem;
}
.imggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.imggrid__item { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; }
.imggrid__item img { width: 100%; height: 100%; object-fit: cover; }

.previewcard { display: flex; flex-direction: column; }
.previewcard__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.previewcard__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }

.formnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }

.fieldhint { margin: -8px 0 0; font-size: 0.8rem; color: var(--muted-2); }

.townfield { position: relative; }
.suggestlist {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow: hidden; max-height: 240px; overflow-y: auto;
}
.suggestitem {
  display: flex; align-items: baseline; gap: 4px; width: 100%; text-align: left;
  padding: 10px 14px; font-size: 0.92rem; color: var(--text); background: none; border: none;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.suggestitem:last-child { border-bottom: none; }
.suggestitem:hover { background: var(--surface-2); }
.suggestempty { padding: 10px 14px; margin: 0; font-size: 0.85rem; }

.ownlistingwrap { display: flex; flex-direction: column; gap: 8px; }
.ownlistingwrap__actions { display: flex; gap: 8px; }
.ownlistingwrap__actions .btn { flex: 1; }

/* ---------- Auth ---------- */
.authpage { display: flex; justify-content: center; padding-top: 60px; }
.authcard { max-width: 380px; width: 100%; padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.authcard h1 { margin: 0; font-size: 1.4rem; }
.authcard__alt { text-align: center; width: 100%; }
.authcard__alt a { color: var(--green-light); font-weight: 600; }
.tabbar--auth { border-bottom: 1px solid var(--border); margin: 4px 0 4px; padding: 0; justify-content: flex-start; gap: 4px; }
.authform { display: flex; flex-direction: column; gap: 14px; }
.authmsg { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.86rem; }
.authmsg--error { background: rgba(163, 92, 66, 0.18); color: #f0b9a4; border: 1px solid rgba(163, 92, 66, 0.4); }
.authmsg--success { background: rgba(63, 138, 92, 0.18); color: var(--green-light); border: 1px solid rgba(63, 138, 92, 0.4); }
.authmsg__action { margin-top: 8px; padding: 0; background: none; border: 0; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--green-light); text-decoration: underline; cursor: pointer; }
.authmsg__action:disabled { opacity: 0.6; cursor: default; }

/* ---------- Loading / error states ---------- */
.loadingscreen {
  min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: var(--muted); padding: 40px 20px;
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--surface-2); border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.errorcard { padding: 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 480px; margin: 40px auto; }
.errorcard h2 { margin: 0; }

/* ---------- Favorites / route list ---------- */
.routelist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.routelist__item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; }
.routelist__num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: white;
  font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.routelist__img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.routelist__info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }

/* ---------- Admin ---------- */
.adminlist { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.adminrow { display: flex; align-items: center; gap: 14px; padding: 12px; }
.adminrow__img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.adminrow__info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.adminrow__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Katalog över företag och arrangörer ---------- */
.companies__search { max-width: 520px; margin: 0 auto 10px; }
.companies__count { text-align: center; margin: 0 0 18px; font-size: 0.86rem; }

.companycard {
  display: flex; gap: 14px; padding: 16px; align-items: flex-start;
  transition: border-color .15s ease, background .15s ease;
}
.companycard:hover { background: var(--surface-2); }
/* Betalande verksamheter märks med samma guld som framhävda loppisar, så att
   det känns som samma sak man köper. */
.companycard--featured { border-color: rgba(227, 179, 65, 0.42); }
.companycard__avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: var(--surface-2);
}
.companycard__body { min-width: 0; flex: 1; }
.companycard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.companycard__top strong { font-size: 1rem; }
.companycard__badge {
  background: var(--gold); color: #2a1f06; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}
.companycard__meta { margin: 3px 0 0; color: #cbd5cd; font-size: 0.85rem; font-weight: 500; }
.companycard__bio {
  margin: 8px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.companycard__count {
  margin: 10px 0 0; display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 0.83rem; font-weight: 500;
}

/* ---------- Köp & sälj ---------- */
/* Saker visas tätare än loppisar - två i bredd redan på mobilen, som på
   andra köp- och säljsajter - eftersom man bläddrar bland många och priset
   och bilden säger det mesta. */
.grid--items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grid--items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) { .grid--items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.itemcard { display: block; color: var(--text); border-radius: var(--radius-md); }
.itemcard__imgwrap { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); }
.itemcard__img { width: 100%; height: 100%; object-fit: cover; }
.itemcard__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted-2); }
.itemcard__body { padding: 10px 12px 12px; }
.itemcard__price { margin: 0; font-weight: 800; font-size: 1.02rem; color: var(--cream); }
.itemcard__title,
.itemcard__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemcard__title { margin: 2px 0; font-size: 0.92rem; font-weight: 600; }
.itemcard__sub { margin: 0; color: var(--muted); font-size: 0.78rem; }
.badge--sold { position: absolute; left: 8px; top: 8px; background: var(--rust); color: white; }

.itemspage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.itemspage__head h1 { margin: 0 0 6px; }
.itemspage__head p { margin: 0; max-width: 60ch; }
.itemspage__cats { margin: 2px 0 12px; }
.itemspage__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.itemspage__bar p { margin: 0; font-size: 0.88rem; }
.input--sm { width: auto; padding: 8px 12px; font-size: 0.88rem; }

.itempage__gallery { aspect-ratio: 1 / 1; background: #0a0d0b; }
@media (min-width: 760px) { .itempage__gallery { aspect-ratio: 4 / 3; max-width: 720px; } }
.itempage__img { object-fit: contain; }
.itempage__noimg { position: absolute; inset: 0; height: auto; }
.itempage__price { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--cream); }
.itempage .listingpage__body h1 { font-size: 1.5rem; margin-top: -10px; }
.itempage__desc { white-space: pre-line; }
.itempage__loppis { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; color: var(--text); }
.itempage__loppis img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.itempage__loppis div { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.88rem; }
.itempage__owneractions { margin-top: 12px; }
.itempage__tips p { margin: 0; color: #cbd5cd; font-size: 0.88rem; line-height: 1.6; }

.contactbox { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.contactbox h2 { margin: 0; font-size: 1.1rem; }
.contactbox .btn { align-self: flex-start; }
.contactbox__note { margin: 0; font-size: 0.82rem; }

.checkrow { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; cursor: pointer; width: fit-content; }
.checkrow input { width: 18px; height: 18px; accent-color: var(--green); }
.imggrid__cover { position: absolute; left: 6px; bottom: 6px; background: rgba(12, 17, 14, 0.8); color: var(--cream); }
.itemform .formstep { margin-top: 18px; }

.itemstab__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.itemstab__head p { margin: 0; }
.listingitems__head { margin: 8px 0 0; }
.listingitems__head h2 { margin: 0; font-size: 1.15rem; }

.itemspage__cats .chip { flex-shrink: 0; white-space: nowrap; }
.itemform .townfield .input { width: 100%; }
.itemform .field .fieldhint { margin: 0; }
/* En tom förslagslista syntes som ett tunt streck under ortfältet. */
.suggestlist:empty { display: none; }

/* ---------- Meddelanden (chatt i Köp & sälj) ---------- */
.navbar__msgs {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--text); flex-shrink: 0;
}
.navbar__msgs:hover, .navbar__msgs--active { background: var(--surface-2); }
.navbar__badge {
  position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--rust); color: white;
  font-size: 0.68rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.inboxpage { max-width: 760px; }
.inbox { display: flex; flex-direction: column; gap: 10px; }
.inboxrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text); border-radius: var(--radius-md); }
.inboxrow__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.inboxrow__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.inboxrow__text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.inboxrow__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 0.78rem; flex-shrink: 0; }
.inboxrow__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-light); }
.inboxrow--unread { border-color: rgba(134, 196, 158, 0.45); }
.inboxrow--unread strong { color: var(--cream); }

.chatwrap { max-width: 760px; padding-top: 16px; padding-bottom: 12px; display: flex; flex-direction: column; gap: 12px; }
.chathead { display: flex; align-items: center; gap: 12px; }
.chathead__who { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.chathead__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chatitem { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; color: var(--text); border-radius: var(--radius-md); }
.chatitem img, .chatitem__noimg { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.chatitem__noimg { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted-2); }
.chatitem > div:not(.chatitem__noimg) { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.9rem; }
.chattip {
  margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5;
  border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 8px 12px;
}
.chatlist { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; min-height: 30vh; }
.chatday { align-self: center; font-size: 0.75rem; color: var(--muted-2); margin: 10px 0 4px; }
.chatmsg { align-self: flex-start; max-width: 80%; background: var(--surface-2); border-radius: 18px 18px 18px 6px; padding: 8px 12px 6px; }
.chatmsg--mine { align-self: flex-end; background: var(--green-dark); border-radius: 18px 18px 6px 18px; }
.chatmsg__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.chatmsg__time { display: block; text-align: right; font-size: 0.68rem; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
/* Skrivfältet följer med nertill, ovanför bottenmenyn på mobilen. */
.chatcomposerwrap { position: sticky; bottom: var(--bottomnav-h); background: var(--bg); padding: 8px 0; z-index: 5; }
@media (min-width: 860px) { .chatcomposerwrap { bottom: 0; } }
.chatcomposer { display: flex; gap: 8px; align-items: flex-end; }
.chatcomposer__input { flex: 1; resize: none; min-height: 44px; max-height: 140px; border-radius: 22px; padding: 11px 16px; line-height: 1.4; }
.chatcomposer__send { width: 44px; height: 44px; padding: 0; flex-shrink: 0; }
.chatblocked { margin: 0; color: var(--muted); font-size: 0.9rem; text-align: center; padding: 10px; }
.chatactions { display: flex; gap: 18px; justify-content: center; }
.chatactions__btn { color: var(--muted); font-size: 0.82rem; text-decoration: underline; background: none; border: none; padding: 4px; }

/* ---------- Egen profil: Mina inlägg och Sparade ---------- */
.profilesection__head { margin: 4px 0 14px; }
.profilesection__head h2 { margin: 0; font-size: 1.15rem; }
.profilesection__head:not(:first-child) { margin-top: 40px; }
.profilepage .statspanel { margin-top: 28px; }
.itemstab__count { margin: 0 0 12px; font-size: 0.88rem; }
.savedcontent > .subhead:first-child { margin-top: 4px; }
/* Platshållaren för annonser utan bild täcker hela bildytan - knapparna
   (tillbaka, dela, spara, redigera) måste ligga ovanpå den. */
.itempage__gallery .iconbtn, .itempage__gallery .listingpage__navbtns { z-index: 2; }