@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

/* FONT FAMILY SYSTEM */
:root {
  --font-primary: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  font-family: var(--font-primary);
}
html {
  scroll-behavior: smooth;
  /* Förhindrar att mobila webbläsare (t.ex. Safari på iPhone) automatiskt
     "boostar" textstorleken på rubriker/element som saknar en egen
     font-size — annars kan t.ex. footerns rubriker se orimligt stora ut
     på vissa mobiler. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* FIX (2026-07): globalt skydd mot horisontell overflow. Ett enda element
   någonstans på sidan som är bredare än viewporten (t.ex. en meny-rad som
   inte radbryter/scrollar) kunde tidigare tvinga HELA sidan att bli
   bredare än skärmen på mobil, vilket klippte av text och knappar på
   höger sida överallt (se .links-fixet längre ner för den konkreta
   bugg som orsakade det). overflow-x:hidden här är ett sista skyddsnät
   så att enskilda breda element klipps bort istället för att expandera
   hela sidan, oavsett var på sajten de dyker upp i framtiden.
   width:100% på body säkerställer att det skyddet faktiskt gäller. */
html, body {
  overflow-x: hidden;
  width: 100%;
}



/* Grundstorlekar för rubriker — så att inget h1-h6 någonstans på sajten
   förlitar sig på webbläsarens (ibland väldigt olika) standardstorlekar.
   Sidospecifika regler nedan kan fortfarande skriva över dessa. */
h1 { font-size: 28px; line-height: 1.3; }
h2 { font-size: 20px; line-height: 1.3; }
h3 { font-size: 17px; line-height: 1.3; }
h4, h5, h6 { font-size: 15px; line-height: 1.3; }

/* Links */
a {
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #ffffff;
}

/* HEADER / NAVBAR */
header {
  width: 100%;
  background-color: #0f1111;
  flex-shrink: 0;
}

.navbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #fff;
  max-width: 1280px;
  margin: 0 auto;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  margin-top: 0;
}

/* Address (fixad struktur) */
.address .deliver {
  margin-left: 20px;
  font-size: 0.75rem;
  color: #ccc;
}

.address .map-icon {
  display: flex;
  align-items: center;
}

/* SEARCH BAR */
.nav-search {
  display: flex;
  justify-content: space-evenly;
  max-width: 620px;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
}

.select-search {
  background: #f3f3f3;
  width: 60px;
  text-align: center;
  border: none;
}

.search-input {
  width: 100%;
  font-size: 1rem;
  border: none;
  outline: none;
  padding-left: 10px;
}

.search-icon {
  width: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  background: #000;
  color: #fff;
  cursor: pointer;
}

/* ACCOUNT / LINKS */
.sign-in p,
.returns p {
  font-size: 0.75rem;

}

.sign-in span,
.returns span {
  font-size: 0.875rem;
  font-weight: 600;
}

/* BANNER */
.banner {
  padding: 10px 20px;
  background: #222f3d;
  color: #fff;
  font-size: 0.875rem;
}

.banner-content {
  margin: 0 auto;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.om
.panel span {
  margin-right: 7px;
}

.links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 15px;
  flex-grow: 1;
  margin-left: 15px;
}

.links a {
  padding: 10px 0;
}

.deals a {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

/* HERO */
.hero-section {
  height: 400px;
  background-image: url("images/hero-img.jpg");
  background-position: center;
  background-size: cover;
}

/* SHOP SECTION */
.shop-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f3f3f3;
  padding: 50px 0;
}

.shop-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1280px;
  width: 100%;
}

.shop-link {
  background-color: #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.shop-link img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  margin-bottom: 10px;
}

.shop-link h3 {
  margin-bottom: 10px;
}

.shop-link a {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: rgb(255, 255, 255);
  font-weight: 500;
}

.shop-link:hover a {
  color: #ffffff;
  text-decoration: underline;
}

/* FOOTER */
footer {
  margin-top: auto;
  background: #000;
  display: flex;
  flex-direction: column;
  min-height: 700px;
}

.footer-title {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #37475a;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  height: 60px;
  margin-bottom: 10px;
}

.footer-items {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin-top: auto; /* 👈 DETTA är det viktiga */
}

.footer-items h3 {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  margin: 20px 0 10px;
}

.footer-items ul {
  list-style: none;
  margin-bottom: 10px;
}

.footer-items li a {
  color: #ddd;
  font-size: 0.875rem;
}

.footer-items li a:hover {
  text-decoration: underline;
}

.omossa {
  max-width: 700px;
  margin: 0 auto;   /* 👈 detta centrerar själva boxen */
  line-height: 1.6;
  text-align: center;
}

.omossa p {
  margin-bottom: 15px;
  text-align: center;
}




.footer-items {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid #fff;
  padding-top: 20px;
}


.ks {

  text-align: center;
}

.footerslogo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.footerslogo img {
  width: 80px;
}

.kontakt{

display: flex;
  justify-content: center;
  margin-top: 70px;
  text-align: center;
}
.box {
  border: 1px solid black;
  padding: 100px;
  color: #000;
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;;
  margin-top: 40px; /* <-- detta centrerar horisontellt */
}

footer {
  background: #070707;
  color: #ddd;
  padding: 60px 20px;
}

.slogan {
  text-align: center;
  margin-bottom: 40px;
}

.slogan h1 {
  margin: 0;
  font-size: 28px;
}

.features {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.feature {
  max-width: 250px;
  text-align: center;
}

.feature h2 {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.feature p {
  font-size: 14px;
  color: #bbb;
  line-height: 1.5;
}


.contact-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
}

.contact-form {
  background: #fff;
  padding: 40px;
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.contact-form h2 {
  margin-bottom: 20px;
  text-align: center;
}

.contact-form label {
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: inherit;
}

.contact-form button {
  margin-top: 20px;
  padding: 12px;
  border: none;
  background: #000;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
}

.contact-form button:hover {
  background: #333;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f3f3f3;
}

/* Login form styling */
.login_form {
    width: 100%;
    max-width: 550px;
    background: #fff;
    border-radius: 6px;
    padding: 41px 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.login_form h3 {
    font-size: 20px;
    text-align: center;
}

/* Google & Apple button styling */

.login_form .login_option {
    display: flex;
    justify-content: center;
    width: 100%;
}


.login_form .login_option .option {
    width: 100%;
    max-width: 260px;
}

.login_form .login_option .option a {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: #F8F8FB;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    margin: 34px 0 24px 0;
    text-decoration: none;
    color: #171645;
    font-weight: 500;
    transition: 0.2s ease;
}

.login_form .login_option .option a:hover {
    background: #ededf5;
    border-color: #222f3d;
}

.login_form .login_option .option a img {
    max-width: 25px;
}

.login_form p {
    text-align: center;
    font-weight: 500;
}

.login_form .separator {
    position: relative;
    margin-bottom: 24px;
}

/* Login option separator styling */
.login_form .separator span {
    background: #fff;
    z-index: 1;
    padding: 0 10px;
    position: relative;
}

.login_form .separator::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    height: 1px;
    background: #C2C2C2;
    display: block;
}

form .input_box label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Input field styling */
form .input_box input {
    width: 100%;
    height: 57px;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    outline: none;
    background: #F8F8FB;
    font-size: 17px;
    padding: 0px 20px;
    margin-bottom: 25px;
    transition: 0.2s ease;
}

form .input_box input:focus {
    border-color: #626cd6;
}

form .input_box .password_title {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

form .input_box {
    position: relative;
}

footer a, .banner a {
  text-decoration: none;
  color: #fff;
}

footer a:hover {
  text-decoration: underline;
}

/* Login button styling */
form button {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #ffffff;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 28px;
    transition: 0.3s ease;
}

form button {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    border: none;
    background: #222f3d;
    color: white;
    font-size: 18px;
    font-weight: 500;
}

/* Centrera login sidan */
.login-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    min-height: 600px;
}


/* Login box */
.login_form {
    width: 100%;
    max-width: 550px;
    
    color: #222f3d;
}

.login_form a {
  color: #222f3d;
}

a {
  color: inherit;
}


/* FAQ PAGE */

.faq-page {

flex:1;
background:#f3f3f3;
padding:60px 20px;

}



.faq-page h1 {

text-align:center;
color:#222f3d;
margin-bottom:40px;

}




.faq-container {

max-width:900px;
margin:auto;

}



.faq-box {

background:white;
padding:30px;
margin-bottom:20px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,.12);

}



.faq-box h2 {

color:#222f3d;
margin-bottom:15px;

}



.faq-box p {

color:#555;
line-height:1.6;

}

/* UTFORSKA */

.explore{

background:#f3f3f3;
min-height:700px;
padding:50px;

}


.explore h1{

font-size:40px;
color:#222f3d;

}


.explore p{

margin:15px 0 30px;

}



.filter-box{

background:white;
padding:20px;
display:flex;
gap:15px;
flex-wrap:wrap;

border-radius:10px;

}



.filter-box input,
.filter-box select{

height:45px;
padding:10px;

border:1px solid #ccc;

border-radius:5px;

}



.products{

margin-top:40px;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}



.card{

background:white;

border-radius:12px;

overflow:hidden;

box-shadow:
0 5px 15px rgba(0,0,0,.15);

}


.nav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
}

/* ===== PROFILE MENU ===== */
.profile-menu {
  position: relative;
  margin-left: 16px;
  display: none; /* visas via JS när inloggad */
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
  transition: 0.2s ease;
}

.profile-trigger:hover {
  background: rgba(255,255,255,0.08);
}

.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d1d5db;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-avatar .material-symbols-outlined {
  font-size: 22px;
  color: #6b7280;
}

.profile-name {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visas i det korta ögonblick innan det riktiga användarnamnet hunnit
   hämtas från Firestore, så att inget gammalt/fel namn hinner blinka till.
   Avataren är alltid samma statiska grå profil-ikon oavsett laddningsstatus,
   så bara namnet behöver en "laddar"-stil. */
.profile-name.profile-name-loading {
  background: rgba(255,255,255,0.15);
  color: transparent;
  border-radius: 4px;
  display: inline-block;
  width: 60px;
  height: 14px;
}

.profile-caret {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.7);
  margin-left: 2px;
  transition: transform 0.2s ease;
}

/* Dropdownen (Mina annonser / Mina köp / Gillade annonser / Logga ut)
   var tidigare helt ostylad, vilket gjorde att den rände in i det
   vanliga sidflödet istället för att döljas och fällas ut som en meny.
   Nu är den dold som standard och visas bara när JS lägger till
   klassen "open" (se auth.js: wireProfileMenu). */
.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 8px;
  flex-direction: column;
  z-index: 1000;
  cursor: default;
}

.profile-dropdown.open {
  display: flex;
}

.profile-dropdown a,
.profile-dropdown .logout-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 6px;
  color: #0f1111;
  font-size: 14px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.profile-dropdown a:hover {
  background: #f3f3f3;
}

.profile-dropdown hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 6px 0;
}

/* ===== KUNDVAGN-IKON (övre navbaren, höger hörn) ===== */
.nav-cart {
  display: flex;
  align-items: center;
  margin-left: 16px;
}

.nav-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  transition: background 0.2s ease;
}

.nav-cart-link:hover {
  background: rgba(255,255,255,0.08);
}

.nav-cart-link .material-symbols-outlined {
  font-size: 24px;
}

.nav-cart-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #e11d48;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

.logout-btn {
  color: #dc2626 !important;
  font-weight: 600 !important;
}

.logout-btn:hover {
  background: #fef2f2 !important;
}

/* ===================== GOOGLE BUTTON ===================== */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #3c4043;
  cursor: pointer;
  letter-spacing: 0.25px;
  transition: background 0.2s, box-shadow 0.2s;
  margin-bottom: 20px;
  text-decoration: none;
}
.google-btn:hover {
  background: #f7f8f8;
  box-shadow: 0 1px 3px rgba(60,64,67,.3);
  color: #3c4043;
}
.google-btn svg {
  flex-shrink: 0;
}

/* ===================== ANNONS FORMULÄR ===================== */
.annons-page {
  flex: 1;
  min-height: 600px;
  background: #f3f3f3;
  padding: 40px 20px;
}
.annons-form-wrapper {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 36px 40px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.annons-form-wrapper h2 {
  font-size: 24px;
  margin-bottom: 28px;
  color: #0f1111;
}
.annons-form-wrapper .form-group {
  margin-bottom: 22px;
}
.annons-form-wrapper label {
  display: block;
  font-weight: 600;
  margin-bottom: 7px;
  color: #222f3d;
  font-size: 14px;
}
.annons-form-wrapper input[type="text"],
.annons-form-wrapper input[type="number"],
.annons-form-wrapper select,
.annons-form-wrapper textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #DADAF2;
  border-radius: 5px;
  font-size: 15px;
  background: #F8F8FB;
  outline: none;
  transition: border-color 0.2s;
  font-family: var(--font-primary);
}
.annons-form-wrapper input:focus,
.annons-form-wrapper select:focus,
.annons-form-wrapper textarea:focus {
  border-color: #626cd6;
}
.annons-form-wrapper textarea {
  height: 110px;
  resize: vertical;
}
.annons-form-wrapper .radio-group,
.annons-form-wrapper .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.annons-form-wrapper .radio-group label,
.annons-form-wrapper .checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  cursor: pointer;
  background: #F8F8FB;
  border: 1px solid #DADAF2;
  border-radius: 20px;
  padding: 6px 14px;
  transition: background 0.15s, border-color 0.15s;
}
.annons-form-wrapper .radio-group label:hover,
.annons-form-wrapper .checkbox-group label:hover {
  background: #ededf5;
}
.annons-form-wrapper .radio-group input[type="radio"],
.annons-form-wrapper .checkbox-group input[type="checkbox"] {
  width: auto;
  padding: 0;
  background: none;
  border: none;
}
.kamera-specs {
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  padding: 18px;
  margin-top: 6px;
}
.kamera-specs h4 {
  font-size: 14px;
  color: #3730a3;
  margin-bottom: 14px;
}
.annons-submit-btn {
  width: 100%;
  height: 52px;
  background: #222f3d;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}
.annons-submit-btn:hover {
  background: #1a2530;
}
.section-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 10px 0 22px;
}

/* ===================== MEDDELANDEN ===================== */
.messages-page {
  flex: 1;
  display: flex;
  min-height: calc(100vh - 120px);
  background: #f3f3f3;
}
.messages-sidebar {
  width: 300px;
  min-width: 300px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
}
.messages-sidebar h3 {
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16px;
  color: #0f1111;
}
.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid #f3f3f3;
  transition: background 0.15s;
}
.conversation-item:hover, .conversation-item.active {
  background: #f0f4ff;
}
.conv-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #222f3d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.conv-info {
  flex: 1;
  min-width: 0;
}
.conv-name {
  font-weight: 600;
  font-size: 14px;
  color: #0f1111;
}
.conv-preview {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-time {
  font-size: 11px;
  color: #aaa;
}
.conv-unread {
  width: 8px;
  height: 8px;
  background: #222f3d;
  border-radius: 50%;
  flex-shrink: 0;
}
.messages-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}
.messages-main-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 16px;
}
.messages-chat-header {
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  font-size: 16px;
  color: #0f1111;
}
.mob-back-btn { display: none; }
.messages-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.msg-bubble-wrap.me {
  flex-direction: row-reverse;
}
.msg-bubble {
  max-width: 65%;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
}
.msg-bubble-wrap.me .msg-bubble {
  background: #222f3d;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-bubble-wrap.other .msg-bubble {
  background: #fff;
  color: #0f1111;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}
.msg-time {
  font-size: 11px;
  color: #aaa;
  padding: 0 4px;
}
.messages-chat-input {
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  align-items: center;
}
.messages-chat-input input {
  flex: 1;
  height: 44px;
  border: 1px solid #DADAF2;
  border-radius: 22px;
  padding: 0 18px;
  font-size: 14px;
  background: #F8F8FB;
  outline: none;
  font-family: var(--font-primary);
}
.messages-chat-input input:focus {
  border-color: #626cd6;
}
.messages-chat-input button {
  height: 44px;
  padding: 0 20px;
  background: #222f3d;
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.messages-chat-input button:hover {
  background: #1a2530;
}
.no-auth-msg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #555;
  font-size: 16px;
}

/* ===================== ANNONS-KORT (UTFORSKA) ===================== */
.explore {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 20px;
}
.explore h1 {
  font-size: 28px;
  color: #0f1111;
  margin-bottom: 6px;
}
.explore > p {
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}
.filter-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.filter-box input,
.filter-box select {
  height: 40px;
  border: 1px solid #DADAF2;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  background: #F8F8FB;
  outline: none;
  font-family: var(--font-primary);
}
.filter-box input { flex: 1; min-width: 140px; }
.filter-box select { min-width: 160px; }

.annonser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}
.annons-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.annons-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  transform: translateY(-2px);
}
.annons-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.annons-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.annons-badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.annons-kategori {
  font-size: 12px;
  color: #666;
  background: #f3f3f3;
  border-radius: 20px;
  padding: 3px 10px;
}
.annons-card-titel {
  font-size: 16px;
  font-weight: 500;
  color: #0f1111;
  line-height: 1.3;
  letter-spacing: 0.1px;
}
.annons-card-marke {
  font-size: 13px;
  color: #444;
  font-weight: 500;
}
.annons-card-beskrivning {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.annons-card-meta {
  font-size: 12px;
  color: #888;
}
.annons-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.annons-pris {
  font-size: 22px;
  font-weight: 600;
  color: #0f1111;
}
.annons-card-seljar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.annons-seljar-namn {
  font-size: 12px;
  color: #888;
}
.kontakta-btn {
  background: #222f3d;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.kontakta-btn:hover { background: #1a2530; }

/* ===================== 3-PRICK-MENY (DOTS MENU) ===================== */
.dots-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
}
.dots-btn {
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: background 0.15s;
  padding: 0;
}
.dots-btn:hover { background: #fff; }
.dots-btn .material-symbols-outlined { font-size: 18px; color: #333; }

.dots-dropdown {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.16);
  min-width: 190px;
  overflow: hidden;
  z-index: 50;
  flex-direction: column;
}
.dots-dropdown.open { display: flex; }

.dots-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #0f1111;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.13s;
}
.dots-item:hover { background: #f5f5f5; }
.dots-item .material-symbols-outlined { font-size: 18px; color: #555; flex-shrink: 0; }
.dots-delete { color: #dc2626; }
.dots-delete .material-symbols-outlined { color: #dc2626; }
.dots-report { color: #ea580c; }
.dots-report .material-symbols-outlined { color: #ea580c; }
.dots-item + .dots-item { border-top: 1px solid #f0f0f0; }

/* ===================== TOAST-NOTIS ===================== */
.sfm-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0f1111;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.sfm-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================== HAMBURGER-MENY (MOBIL) ===================== */

/* Hamburger-knappen — dold på desktop */
.mob-hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  align-items: center;
  justify-content: center;
}
.mob-hamburger .material-symbols-outlined { font-size: 28px; }

/* Sök/skapa-ikoner — bara synliga på mobil (se @media 768px) */
.mob-nav-icons { display: none; }

/* Mörk overlay bakom panelen */
.mob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.mob-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Sidopanelen */
.mob-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  overflow-y: auto;
}
.mob-panel.open { right: 0; }

/* Panelens header med logo + stäng */
.mob-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  background: #0f1111;
  flex-shrink: 0;
}
.mob-panel-logo { width: 90px; }
.mob-close-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.mob-close-btn .material-symbols-outlined { font-size: 24px; }

/* Inloggad användare-sektion */
.mob-panel-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #222f3d;
  color: #fff;
  flex-shrink: 0;
}
.mob-panel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d1d5db;
  color: #6b7280;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.mob-panel-avatar .material-symbols-outlined {
  font-size: 26px;
  color: #6b7280;
}
.mob-panel-username {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav-länklistan */
.mob-nav-links {
  list-style: none;
  padding: 10px 0;
  flex: 1;
}
.mob-nav-links li a,
.mob-nav-links li .mob-logout-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  color: #0f1111;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.mob-nav-links li a:hover,
.mob-nav-links li .mob-logout-btn:hover {
  background: #f3f3f3;
  color: #0f1111;
}
.mob-nav-links li a .material-symbols-outlined,
.mob-nav-links li .mob-logout-btn .material-symbols-outlined {
  font-size: 20px;
  color: #555;
  flex-shrink: 0;
}
.mob-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 6px 16px;
}
.mob-logout-btn { color: #dc2626 !important; }
.mob-logout-btn .material-symbols-outlined { color: #dc2626 !important; }

/* ===================== FILTER-MENY (UTFORSKA, MOBIL) ===================== */
.explore-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Knappen som öppnar filtermenyn — dold på desktop, filtren ligger redan
   synliga i sidan där (se .filter-box ovan). Visas bara under 768px. */
.filter-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #DADAF2;
  color: #222f3d;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.filter-toggle-btn .material-symbols-outlined { font-size: 18px; }
.filter-active-badge {
  background: #e11d48;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Mörk overlay bakom panelen (mobil) */
.filter-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.filter-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Header/footer i panelen finns bara i mobilläget - på desktop är
   .filter-drawer bara en osynlig wrapper runt den vanliga .filter-box. */
.filter-drawer-header,
.filter-drawer-footer { display: none; }

@media (max-width: 768px) {
  .filter-toggle-btn { display: inline-flex; }

  /* Sidopanelen — glider in från vänster */
  .filter-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 320px;
    max-width: 88vw;
    height: 100%;
    background: #fff;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transition: left 0.28s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }
  .filter-drawer.open { left: 0; }

  .filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
  }
  .filter-drawer-header h3 { margin: 0; font-size: 17px; color: #0f1111; }
  .filter-close-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
  }
  .filter-close-btn .material-symbols-outlined { font-size: 22px; }

  /* Själva filterfälten blir en scrollbar kolumn mellan header och footer */
  .filter-drawer .filter-box {
    flex: 1;
    overflow-y: auto;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
    flex-direction: column;
    padding: 16px;
  }
  .filter-drawer .filter-box input,
  .filter-drawer .filter-box select { width: 100%; flex: none; min-width: 0; }

  .filter-drawer-footer {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    background: #fff;
  }
  .filter-clear-btn {
    flex: 0 0 auto;
    background: #f3f3f3;
    border: none;
    color: #333;
    font-weight: 600;
    font-size: 13.5px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
  }
  .filter-apply-btn {
    flex: 1;
    background: #222f3d;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
  }
}

/* ===================== MEDDELANDEN NOTIS-BADGE ===================== */
.msg-notis-badge {
  position: absolute;
  top: -7px;
  right: -10px;
  background: #e11d48;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  animation: badge-pop 0.2s ease;
}
@keyframes badge-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ===================== MOBIL RESPONSIVITET ===================== */
@media (max-width: 768px) {

  /* Visa hamburger-knappen */
  .mob-hamburger { display: flex; }

  /* NAVBAR — kompakt på mobil */
  .navbar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 12px;
    gap: 8px;
  }
  .nav-logo img { height: 32px; width: auto; max-width: 110px; margin-top: 0; }
  .address { display: none; }
  /* Dölj "Om oss" och "Kontakta oss" i navbaren — finns i hamburger-menyn */
  .sign-in, .returns, .nav-item { display: none; }
  /* Dölj profilmenyn i navbaren på mobil — finns i hamburger-menyn */
  .profile-menu { display: none !important; }
  /* Den runda kundvagns-ikonen i övre navbaren ersätts på mobil av
     kundvagns-ikonen bland .mob-nav-icons nedan */
  .nav-cart { display: none !important; }

  /* Sökfältet döljs helt på mobil — ersätts av .mob-nav-icons (se nedan) */
  .nav-search { display: none; }

  /* Sök- och skapa-ikoner (ersätter sökfältet på mobil) */
  .mob-nav-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    order: 1;
    margin-left: auto;
  }
  .mob-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,0.08);
  }
  .mob-nav-icon .material-symbols-outlined { font-size: 22px; }
  .mob-nav-icon:hover { background: rgba(255,255,255,0.16); }
  .mob-nav-icon { position: relative; }
  .mob-nav-icon-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #e11d48;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
  }

  .mob-hamburger { order: 3; }

  /* Den blå länkraden (Vanliga frågor / Sälj / Utforska / meddelanden osv.)
     döljs helt på mobil — samma länkar finns redan i hamburgermenyn. */
  .banner { display: none; }

  /* FOOTER */
  .footer-items {
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px;
  }
  .slogan h1 { font-size: 20px; text-align: center; line-height: 1.35; }
  .features {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px 16px;
  }
  .feature { max-width: 320px; }
  .feature h2 { font-size: 16px; }
  .feature p { font-size: 13.5px; }

  /* LOGIN / REGISTER */
  .login-container { padding: 24px 16px; min-height: auto; }
  .login_form { padding: 28px 20px; }

  /* ANNONS-FORMULÄR */
  .annons-page { padding: 20px 12px; }
  .annons-form-wrapper { padding: 22px 16px; }
  .annons-form-wrapper h2 { font-size: 20px; }
  .annons-form-wrapper .radio-group,
  .annons-form-wrapper .checkbox-group { gap: 8px; }

  /* UTFORSKA */
  .explore { padding: 20px 12px; }
  .explore h1 { font-size: 22px; }
  .filter-box { padding: 12px; gap: 8px; }
  .filter-box input, .filter-box select { width: 100%; flex: none; min-width: 0; }
  .annonser-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

  /* MEDDELANDEN — mobil: visa sidebar ELLER chat, inte båda */
  .messages-page {
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: calc(100vh - 100px);
  }
  .messages-sidebar {
    width: 100%;
    min-width: 0;
    max-height: none;
    height: 100%;
    border-right: none;
    border-bottom: none;
    overflow-y: auto;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fff;
    z-index: 2;
    transition: transform 0.3s ease;
  }
  .messages-sidebar.hidden-mob {
    transform: translateX(-100%);
    pointer-events: none;
  }
  .messages-main {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .messages-main.show-mob {
    transform: translateX(0);
    z-index: 3;
  }
  /* Tillbaka-knapp i chatten på mobil */
  .mob-back-btn {
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #222f3d;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
  }
  .messages-chat-header {
    padding: 12px 16px;
    gap: 6px;
  }
  .messages-chat-body { padding: 12px; gap: 10px; }
  .messages-chat-input { padding: 10px 12px; gap: 8px; }
  .msg-bubble { max-width: 85%; font-size: 13px; }

  /* ANNONS-KORT */
  .annons-card-seljar { flex-direction: column; align-items: flex-start; }
  .kontakta-btn { width: 100%; text-align: center; }

  /* MINA ANNONSER */
  .omossa { padding: 0 12px; }
}

@media (max-width: 480px) {
  .navbar { padding: 8px 10px; }
  .nav-logo img { height: 26px; width: auto; max-width: 90px; }
  .annons-pris { font-size: 18px; }
  .login_form h3 { font-size: 18px; }
}

/* ===================== BILDUPPLADDNING ===================== */
.image-upload-area {
  border: 2px dashed #DADAF2;
  border-radius: 10px;
  min-height: 140px;
  padding: 12px;
  background: #F8F8FB;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.image-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}
.image-upload-placeholder:hover { background: #ededf8; }
.image-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.img-preview-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #DADAF2;
}
.img-preview-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.img-remove-btn {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.img-main-badge {
  position: absolute;
  bottom: 4px; left: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 10px;
  border-radius: 4px;
  padding: 2px 5px;
}

/* ===================== ANNONS-KORT BILD ===================== */
.annons-card-img {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f3f3f3;
  overflow: hidden;
  cursor: pointer;
}
.annons-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.annons-card:hover .annons-card-img img { transform: scale(1.03); }
.annons-no-img {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 48px;
}
.annons-card-body { cursor: pointer; }

/* Gilla-knapp på kort */
.gilla-btn {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.15s, background 0.15s;
  z-index: 2;
}
.gilla-btn:hover { transform: scale(1.1); }
.gilla-btn.gillad { background: #fff0f0; }
.gilla-count { font-size: 12px; color: #555; }

/* Kortet footer med knappar */
.annons-card-footer {
  padding: 12px 18px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.annons-card-btns {
  display: flex;
  gap: 6px;
}
.korg-btn {
  background: #f0f0f0;
  color: #222;
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.korg-btn:hover { background: #e0e0e0; }

/* Mina annonser – gillar-badge */
.mina-gillar-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* ===================== ANNONS-MODAL ===================== */
.annons-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.annons-modal-content {
  background: #fff;
  border-radius: 14px;
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
@media (max-width: 680px) {
  .annons-modal-content { grid-template-columns: 1fr; max-height: 95vh; }
}
.modal-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(0,0,0,0.15);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 14px;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  color: #222;
  transition: background 0.2s;
}
.modal-close-btn:hover { background: rgba(0,0,0,0.3); }
.modal-images {
  background: #f3f3f3;
  border-radius: 14px 0 0 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 680px) { .modal-images { border-radius: 14px 14px 0 0; } }
.modal-main-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.modal-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: #f8f8f8;
  overflow-x: auto;
}
.modal-thumb {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.modal-thumb.active { border-color: #222f3d; }
.modal-no-img {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #ccc; gap: 8px; padding: 40px;
  font-size: 14px;
}
.modal-no-img .material-symbols-outlined { font-size: 64px; }
.modal-info {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-titel { font-size: 22px; font-weight: 800; color: #0f1111; line-height: 1.3; }
.modal-marke { font-size: 14px; color: #555; font-weight: 500; }
.modal-pris { font-size: 30px; font-weight: 900; color: #0f1111; }
.modal-meta { font-size: 13px; color: #888; }
.modal-beskrivning { font-size: 14px; color: #444; line-height: 1.7; white-space: pre-wrap; }
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.modal-btn-korg {
  background: #222f3d;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  flex: 1;
}
.modal-btn-korg:hover { background: #1a2530; }
.modal-btn-kontakta {
  background: #fff;
  color: #222f3d;
  border: 2px solid #222f3d;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  flex: 1;
}
.modal-btn-kontakta:hover { background: #f0f0f0; }
.modal-btn-dela {
  background: #f3f3f3;
  color: #555;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-btn-dela:hover { background: #e5e5e5; }

/* Mina annonser grid */
.mina-grid { margin-top: 0; }
.mina-annons-card .annons-card-body { cursor: pointer; }

/* ===================== HEMSIDA ===================== */

/* HERO */
.home-hero {
  background: linear-gradient(135deg, #0f1111 0%, #222f3d 60%, #1a3a50 100%);
  color: #fff;
  padding: 80px 20px 90px;
  text-align: center;
}
.home-hero-inner {
  max-width: 700px;
  margin: 0 auto;
}
.home-hero h1 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}
.home-hero p {
  font-size: 18px;
  color: #bdd0de;
  margin-bottom: 36px;
  line-height: 1.6;
}
.home-hero-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.home-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #0f1111;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}
.home-btn-primary:hover {
  background: #e8f0f6;
  transform: translateY(-2px);
  color: #0f1111;
}
.home-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  padding: 13px 28px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.45);
  font-weight: 700;
  font-size: 15px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  text-decoration: none;
}
.home-btn-secondary:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
  color: #fff;
}

/* KATEGORIER */
.home-cats {
  background: #f3f3f3;
  padding: 60px 20px;
  text-align: center;
}
.home-cats h2 {
  font-size: 26px;
  font-weight: 700;
  color: #0f1111;
  margin-bottom: 32px;
}
.home-cats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
.home-cat-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0f1111;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: transform 0.18s, box-shadow 0.18s;
  flex: 0 1 130px;
}
.home-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.13);
  color: #0f1111;
}
.home-cat-card .material-symbols-outlined {
  font-size: 32px;
  color: #222f3d;
}

/* HUR DET FUNGERAR */
.home-how {
  background: #fff;
  padding: 70px 20px;
  text-align: center;
}
.home-how h2 {
  font-size: 26px;
  font-weight: 700;
  color: #0f1111;
  margin-bottom: 40px;
}
.home-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 860px;
  margin: 0 auto;
}
.home-how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}
.home-how-num {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background: #222f3d;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-how-step .material-symbols-outlined {
  font-size: 44px;
  color: #222f3d;
  margin-top: 20px;
}
.home-how-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f1111;
}
.home-how-step p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  max-width: 220px;
}

/* CTA-BANNER */
.home-cta {
  background: #222f3d;
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}
.home-cta h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
}
.home-cta p {
  color: #bdd0de;
  font-size: 16px;
  margin-bottom: 28px;
}

/* ── BANNER – knappar kvar till vänster, bredvid hamburgarmenyn, på mobil ──
   FIX (2026-07): .links var "display:flex" utan flex-wrap OCH utan någon
   overflow-hantering. Med 4-5 menyval ("Vanliga frågor", "Sälj",
   "Utforska", "Meddelanden" osv) blev den raden bredare än mobilskärmen,
   och eftersom ingenting i kedjan (.banner-content, .banner, body)
   begränsade det, tvingades HELA SIDAN bli bredare än viewporten - allt
   nedanför (text, kort, knappar på t.ex. kundvagn.html) såg då ut att
   vara avklippt till höger, på alla sidor, inte bara där man märkte det.
   Nu scrollar menyn horisontellt INOM sin egen rad istället, så resten
   av sidan hålls kvar inom skärmens bredd. */
@media (max-width: 768px) {
  .banner-content {
    justify-content: flex-start;
    overflow: hidden;
  }
  .links {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .links::-webkit-scrollbar { display: none; }
  .links a { white-space: nowrap; }

  /* Hemsida mobil */
  .home-hero { padding: 50px 20px 60px; }
  .home-hero h1 { font-size: 26px; }
  .home-hero p { font-size: 15px; }
  .home-hero-btns { flex-direction: column; align-items: center; }
  .home-btn-primary, .home-btn-secondary { width: 100%; max-width: 320px; justify-content: center; }

  .home-cats { padding: 40px 16px; }
  .home-cats-grid { gap: 10px; }
  .home-cat-card { flex-basis: 90px; padding: 18px 8px 14px; font-size: 12px; }
  .home-cat-card .material-symbols-outlined { font-size: 26px; }

  .home-how { padding: 48px 16px; }
  .home-how-grid { grid-template-columns: 1fr; gap: 36px; max-width: 340px; }

  .home-cta { padding: 44px 16px; }
  .home-cta h2 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SFM DIALOG — ersätter webbläsarens alert()/confirm()/prompt()
   (injiceras av auth.js: injectSfmDialog()) så att popupen ser ut som
   en del av sajten istället för en webbläsarruta som säger "sidan säger". */
.sfm-dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sfm-dialog-overlay.open {
  display: flex;
}

.sfm-dialog-box {
  background: #fff;
  border-radius: 10px;
  padding: 32px 28px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.sfm-dialog-icon {
  display: none;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.sfm-dialog-icon .material-symbols-outlined {
  font-size: 40px;
}

.sfm-dialog-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f1111;
  margin-bottom: 8px;
  text-align: center;
}

.sfm-dialog-msg {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
  white-space: pre-wrap;
}

.sfm-dialog-input {
  display: none;
  width: 100%;
  border: 1px solid #DADAF2;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  resize: none;
  outline: none;
  font-family: inherit;
  margin-bottom: 20px;
}

.sfm-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.sfm-dialog-cancel {
  display: none;
  padding: 10px 22px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #f3f3f3;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.sfm-dialog-cancel:hover {
  background: #e9e9e9;
}

.sfm-dialog-ok {
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  background: #222f3d;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.sfm-dialog-ok:hover {
  filter: brightness(1.1);
}

@media (max-width: 500px) {
  .sfm-dialog-box { padding: 26px 20px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SÅLD-märke — visas på ett annonskort/annons-sida i 48 timmar efter
   att säljaren markerat den som såld (se auth.js: rensaUtgangnaSaldaAnnonser). */
.annons-sald-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #0f1111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 5px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
}

.annons-sald-badge .material-symbols-outlined {
  font-size: 14px;
}

.annons-card.ar-sald .annons-card-img img {
  filter: grayscale(60%);
  opacity: 0.75;
}

.annons-card.ar-sald .annons-card-btns .kontakta-btn {
  background: #ccc !important;
  cursor: not-allowed !important;
  color: #666 !important;
}

.dots-item.markera-sald {
  color: #0f1111 !important;
}

.dots-item.markera-sald .material-symbols-outlined {
  color: #16a34a;
}

.dots-item.angra-sald .material-symbols-outlined {
  color: #d97706;
}