/*
 * Snappat v4 Design System — 2026-06-10
 * Källa: snappmock-mockuperna (torget/mina-sidor/chatt v4).
 * Laddas SIST och overridar Tailwind + snappat-design-system.css.
 * Steg 1: tokens, typografi, header, footer, mobil bottom-nav.
 */

/* ============ TOKENS ============ */
:root{
  --blue:#1f5a96;
  --blue-deep:#143f6c;
  --blue-soft:#e8f0f8;
  --green:#2f9e63;
  --green-hover:#288955;
  --green-soft:#e6f5ec;
  --coral:#d9534a;
  --coral-soft:#fcebe9;
  --amber:#d98b0c;
  --amber-soft:#fdf3e2;
  --violet:#7257b8;
  --violet-soft:#f0ebfa;
  --bg:#f2f4f6;
  --card:#ffffff;
  --border:#e4e8ec;
  --text:#21272e;
  --text-2:#5a636e;
  --text-3:#7e8794;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,40,60,.06),0 4px 14px rgba(20,40,60,.05);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* Legacy-variabler från main.css → ommappade till v4 (chat, modals, m.m. använder dessa) */
  --primary:#1f5a96;
  --primary-dark:#143f6c;
  --primary-light:#27679f;
  --green-dark:#288955;
  --red:#d9534a;
  --red-dark:#c2453c;
  --orange:#d98b0c;
  --purple:#7257b8;
  --text-light:#5a636e;
  --text-muted:#7e8794;
  --radius-sm:8px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(20,40,60,.06);
  --shadow-lg:0 12px 36px rgba(10,30,50,.22);
}

/* ============ GLOBAL ============ */
body{
  font-family:var(--font-body);
  background:var(--bg) !important;
  color:var(--text);
}
h1,h2,h3,h4,.v4-display{font-family:var(--font-display)}
h1{letter-spacing:-.8px;line-height:1.15}
h2{letter-spacing:-.4px;line-height:1.25}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ============ GAMMAL PALETT → V4 (Tailwind-utilities i templates) ============ */
.text-primary{color:var(--blue) !important}
.bg-primary,.hover\:bg-primary:hover{background-color:var(--blue) !important}
.from-primary{--tw-gradient-from:var(--blue) var(--tw-gradient-from-position)}
.bg-sngreen{background-color:var(--green) !important}
.hover\:bg-sngreen:hover,.hover\:bg-green-600:hover{background-color:var(--green-hover) !important}
.hover\:bg-green-700:hover{background-color:#1f7a4c !important}
.bg-emerald-500{background-color:var(--green) !important}
.bg-emerald-600{background-color:var(--green-hover) !important}
.text-emerald-700{color:var(--green) !important}
.bg-emerald-50{background-color:var(--green-soft) !important}
.bg-emerald-100{background-color:var(--green-soft) !important}
.text-snred{color:var(--coral) !important}
.bg-snred{background-color:var(--coral) !important}
.bg-blue-50{background-color:var(--blue-soft) !important}
.bg-gray-50{background-color:var(--bg) !important}
.border-gray-200{border-color:var(--border) !important}

/* ============ V4 HEADER ============ */
.v4-header{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.v4-header-inner{max-width:1180px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:20px}
.v4-logo{font-family:var(--font-display);font-weight:800;font-size:25px;color:var(--text) !important;letter-spacing:-.6px;display:flex;align-items:center;gap:2px;text-decoration:none}
.v4-logo b{color:var(--blue);font-weight:800}
.v4-logo-dot{width:8px;height:8px;border-radius:50%;background:var(--green);margin:10px 0 0 1px;flex-shrink:0}
.v4-main-nav{display:none;align-items:center;gap:2px;margin-left:auto}
@media(min-width:1024px){.v4-main-nav{display:flex}}
.v4-nav-link{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--text-2) !important;padding:9px 14px;border-radius:9px;transition:background .12s,color .12s;text-decoration:none;position:relative;background:none;border:none;cursor:pointer;font-family:inherit}
.v4-nav-link:hover{background:var(--bg);color:var(--text) !important}
.v4-nav-link[aria-current="page"]{color:var(--blue) !important;font-weight:600;background:var(--blue-soft)}
.v4-nav-badge{background:var(--coral);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;line-height:1.5}
.v4-notif-badge{position:absolute;top:2px;right:2px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:10px;line-height:1.4}
.v4-btn-publish{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff !important;font-weight:600;font-size:14px;padding:10px 20px;border:none;border-radius:9px;cursor:pointer;margin-left:10px;transition:background .15s,box-shadow .15s;text-decoration:none;white-space:nowrap}
.v4-btn-publish:hover{background:var(--green-hover);box-shadow:0 3px 10px rgba(47,158,99,.3)}
.v4-hamburger{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto;color:var(--text);width:44px;height:44px;font-size:20px}
@media(min-width:1024px){.v4-hamburger{display:none}}

/* ============ V4 FOOTER ============ */
.v4-footer{background:var(--card);border-top:1px solid var(--border);padding:34px 20px 22px;margin-top:auto}
.v4-footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.v4-footer-col h3{font-family:var(--font-body);font-size:13.5px;font-weight:700;margin:0 0 10px;letter-spacing:0}
.v4-footer-col p{font-size:13px;color:var(--text-2);line-height:1.6;max-width:280px;margin:0}
.v4-footer-col a{display:block;font-size:13px;color:var(--text-2) !important;padding:3px 0;text-decoration:none}
.v4-footer-col a:hover{color:var(--blue) !important}
.v4-footer-bottom{max-width:1180px;margin:22px auto 0;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--text-3);flex-wrap:wrap}
.v4-footer-bottom a{color:var(--text-3) !important;text-decoration:none}
.v4-footer-bottom a:hover{color:var(--blue) !important}
@media(max-width:720px){.v4-footer-inner{grid-template-columns:1fr 1fr}}

/* ============ V4 DASHBOARD (mina-sidor_v4) ============ */
.v4-dash-nav{display:flex;flex-direction:column;gap:14px}
/* lg:w-[264px] finns inte i kompilerade tailwind.css — sätt bredden här */
@media(min-width:1024px){.v4-dash-nav{width:264px;flex-shrink:0}}
.v4-profile-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);text-align:center;position:relative}
.v4-profile-avatar{width:62px;height:62px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.v4-profile-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text)}
.v4-profile-email{font-size:12.5px;color:var(--text-3);word-break:break-all}
.v4-menu-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow)}
.v4-menu-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text-2) !important;transition:background .12s,color .12s;text-decoration:none;width:100%;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left}
.v4-menu-item:hover{background:var(--bg);color:var(--text) !important}
.v4-menu-item[aria-current="page"]{background:var(--blue-soft);color:var(--blue) !important;font-weight:600}
.v4-menu-item i{color:var(--text-3);width:18px;text-align:center;flex-shrink:0}
.v4-menu-item[aria-current="page"] i{color:var(--blue)}
.v4-menu-item.support{color:var(--blue) !important}
.v4-menu-item.support i{color:var(--blue)}
.v4-menu-item.logout{color:var(--coral) !important}
.v4-menu-item.logout i{color:var(--coral)}
.v4-menu-badge{margin-left:auto;background:var(--coral);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}

/* ============ V4 SÖKSIDA (sok-annonser_v4) ============ */
.v4-search-bar{background:var(--card);border-bottom:1px solid var(--border);padding:14px 20px}
.v4-search-bar-inner{max-width:1180px;margin:0 auto;display:flex;gap:8px}
.v4-search-field{flex:1;position:relative;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);transition:border-color .15s,background .15s}
.v4-search-field:focus-within{border-color:var(--blue);background:#fff}
.v4-search-field i{color:#8a94a2;font-size:14px;flex-shrink:0}
.v4-search-field input,.v4-search-field select{flex:1;border:none !important;outline:none !important;background:transparent !important;font-size:15px;font-family:inherit;color:var(--text);min-width:0;padding:0 !important;box-shadow:none !important;height:auto !important}
.v4-search-submit{height:44px;padding:0 24px;background:var(--blue);border:none;color:#fff;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s;flex-shrink:0}
/* plats + radie-väljare (mockens loc-pop) */
.v4loc-wrap{position:relative;flex:0 1 260px}
.v4loc-btn{width:100%;height:44px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:0 14px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap;transition:border-color .15s;font-family:inherit}
.v4loc-btn:hover{border-color:var(--blue)}
.v4loc-btn span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.v4loc-chev{color:#9aa3b0;transition:transform .15s}
.v4loc-wrap.open .v4loc-chev{transform:rotate(180deg)}
.v4loc-pop{position:absolute;top:calc(100% + 8px);right:0;width:300px;background:#fff;border-radius:14px;box-shadow:0 12px 36px rgba(10,30,50,.22);padding:16px;display:none;text-align:left;color:var(--text);z-index:60}
.v4loc-wrap.open .v4loc-pop{display:block}
.v4loc-pop label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:7px}
.v4loc-pop input[type="text"]{width:100%;height:40px;border:1.5px solid var(--border) !important;border-radius:9px;padding:0 12px !important;font-size:14px !important;font-family:inherit;margin-bottom:6px;background:#fff !important}
.v4loc-pop input[type="text"]:focus{border-color:var(--blue) !important;outline:none;box-shadow:none !important}
.v4loc-sugg{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;max-height:180px;overflow-y:auto}
.v4loc-sugg-row{display:flex;align-items:baseline;gap:7px;width:100%;text-align:left;background:none;border:none;padding:7px 9px;border-radius:8px;font-size:13.5px;cursor:pointer;font-family:inherit;color:var(--text)}
.v4loc-sugg-row:hover{background:var(--blue-soft)}
.v4loc-sugg-row b{font-weight:600}
.v4loc-sugg-row span{font-size:11.5px;color:var(--text-3)}
.v4loc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.v4loc-chip{padding:7px 13px;background:var(--bg);border:1.5px solid transparent;border-radius:99px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .12s;font-family:inherit}
.v4loc-chip:hover{background:var(--blue-soft)}
.v4loc-chip.active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.v4loc-apply{width:100%;height:40px;background:var(--blue);color:#fff;border:none;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.v4loc-apply:hover{background:var(--blue-deep)}
@media(max-width:720px){.v4loc-wrap{flex:1 1 100%}.v4loc-pop{left:0;right:0;width:auto}}
.v4-search-submit:hover{background:var(--blue-deep)}
@media(max-width:720px){.v4-search-bar-inner{flex-wrap:wrap}.v4-search-field{flex:1 1 100%}.v4-search-submit{width:100%}}

.v4-watch-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--blue-soft),#fff 75%);border:1.5px solid var(--blue);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.v4-watch-icon{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.v4-watch-body{flex:1;min-width:0}
.v4-watch-title{font-size:14px;font-weight:700;color:var(--text)}
.v4-watch-text{font-size:13px;color:var(--text-2);margin-top:1px}
.v4-watch-cta{display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;border:none;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9px;cursor:pointer;flex-shrink:0;transition:background .15s,transform .15s}
.v4-watch-cta:hover{background:var(--blue-deep);transform:translateY(-1px)}
.v4-watch-cta:disabled{background:var(--green);transform:none;cursor:default}
@media(max-width:720px){.v4-watch-card{flex-wrap:wrap}.v4-watch-cta{width:100%;justify-content:center}}

/* ============ V4 ANNONSSIDA (annons_v4) ============ */
#sn-msg-open-btn{box-shadow:0 2px 8px rgba(31,90,150,.25);transition:background .15s,transform .15s,box-shadow .15s !important;border-radius:10px !important}
#sn-msg-open-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(31,90,150,.35)}
#galleryThumbs img{border-radius:8px}
#galleryThumbs img.border-primary{border-color:var(--blue) !important}
.v4i-price{font-family:var(--font-display);font-size:29px;font-weight:800;color:var(--blue);white-space:nowrap;line-height:1.2}
.v4i-meta{font-size:13px;color:var(--text-3);margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.v4i-meta i{font-size:12px}
.v4i-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px;margin:0}
.v4i-fact{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:8px 0;border-bottom:1px dashed var(--border)}
.v4i-fact dt{color:var(--text-2);margin:0}
.v4i-fact dd{font-weight:600;text-align:right;margin:0;overflow-wrap:anywhere}
@media(max-width:720px){.v4i-facts{grid-template-columns:1fr}}
.v4i-gbadge{position:absolute;top:14px;left:14px;font-size:12px;font-weight:700;padding:5px 13px;border-radius:99px;background:var(--green-soft);color:var(--green);z-index:11}
.v4i-gbadge.free{background:var(--amber-soft);color:var(--amber)}
.v4i-stats{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:12px 0 14px}
.v4i-stat{flex:1;text-align:center;padding:10px 6px}
.v4i-stat+.v4i-stat{border-left:1px solid var(--border)}
.v4i-snum{font-family:var(--font-display);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.v4i-slabel{font-size:11px;color:var(--text-3)}
.v4i-mobile-cta{display:none;position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--border);padding:10px 14px;z-index:119;gap:10px;align-items:center}
.v4i-mobile-cta .price{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--blue);white-space:nowrap}
.v4i-mobile-cta a,.v4i-mobile-cta button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff !important;border:none;font-size:14.5px;font-weight:700;padding:11px;border-radius:10px;cursor:pointer;text-decoration:none}
@media(max-width:720px){.v4i-mobile-cta{display:flex}body.has-item-cta{padding-bottom:128px !important}}

/* ============ V4 AUTH (logga-in_v4) ============ */
.v4-auth-wrap{max-width:440px;margin:36px auto 60px;padding:0 20px}
.v4-auth-head{text-align:center;margin-bottom:18px}
.v4-auth-head h1{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.4px}
.v4-auth-head p{font-size:14px;color:var(--text-2);margin-top:3px}
.v4-auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.v4-auth-tabs{display:flex;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:20px}
.v4-auth-tab{flex:1;padding:9px;border:none;background:none;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-2) !important;cursor:pointer;transition:all .12s;text-align:center;text-decoration:none}
.v4-auth-tab[aria-current="page"]{background:var(--card);color:var(--blue) !important;box-shadow:var(--shadow)}
.v4-field{margin-bottom:14px}
.v4-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.v4-field .help{font-size:12px;color:var(--text-3);margin-top:5px}
.v4-auth-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:16px}
.v4-auth-row label{display:flex;align-items:center;gap:7px;color:var(--text-2);cursor:pointer;margin:0;font-weight:500}
.v4-auth-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--blue)}
.v4-auth-row a{font-weight:600}
.v4-btn-bankid{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue-deep);color:#fff;border:none;font-size:15px;font-weight:700;padding:13px;border-radius:10px;cursor:pointer;transition:background .15s}
.v4-btn-bankid:hover{background:#0e3258}
.v4-bankid-mark{font-family:var(--font-display);font-weight:800;font-style:italic;letter-spacing:-.3px}
.v4-auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12px;color:var(--text-3);font-weight:600}
.v4-auth-divider::before,.v4-auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.v4-btn-go{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border:none;font-size:15px;font-weight:700;padding:13px;border-radius:10px;cursor:pointer;transition:background .15s}
.v4-btn-go:hover{background:var(--blue-deep)}
.v4-terms{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--text-2);line-height:1.5;margin-bottom:16px;cursor:pointer}
.v4-terms input{width:16px;height:16px;accent-color:var(--blue);margin-top:2px;flex-shrink:0}
.v4-auth-props{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.v4-auth-prop{display:flex;gap:9px;font-size:13px;color:var(--text-2);line-height:1.5}
.v4-auth-prop i{color:var(--green);margin-top:2px;font-size:12px}
.v4-auth-prop b{color:var(--text);font-weight:600}

/* ============ V4 404 (404_v4) ============ */
.v4-nf-wrap{max-width:560px;margin:48px auto 30px;padding:0 20px;text-align:center}
.v4-nf-num{font-family:var(--font-display);font-size:clamp(72px,16vw,110px);font-weight:800;letter-spacing:-4px;line-height:1;color:var(--blue);position:relative;display:inline-block}
.v4-nf-num .dot{position:absolute;right:-16px;bottom:14px;width:14px;height:14px;border-radius:50%;background:var(--green)}
.v4-nf-wrap h1{font-family:var(--font-display);font-size:21px;font-weight:800;letter-spacing:-.3px;margin:10px 0 6px}
.v4-nf-wrap>p{font-size:14px;color:var(--text-2);max-width:400px;margin:0 auto 22px}
.v4-nf-search{display:flex;gap:8px;max-width:420px;margin:0 auto 18px}
.v4-nf-field{flex:1;position:relative}
.v4-nf-field i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8a94a2;font-size:14px}
.v4-nf-field input{width:100%;height:46px;padding:0 14px 0 40px;border:1.5px solid var(--border);border-radius:10px;font-size:15px;font-family:inherit;background:var(--card);box-shadow:var(--shadow)}
.v4-nf-field input:focus{border-color:var(--blue);outline:none}
.v4-nf-btn{height:46px;padding:0 22px;background:var(--blue);border:none;color:#fff;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}
.v4-nf-btn:hover{background:var(--blue-deep)}
.v4-nf-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.v4-nf-pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--border);border-radius:99px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--text-2) !important;transition:all .15s;text-decoration:none}
.v4-nf-pill:hover{border-color:var(--blue);color:var(--blue) !important}
.v4-nf-note{font-size:12px;color:var(--text-3);margin-top:22px}

/* ============ V4 SKAPA ANNONS (skapa-annons_v4) ============ */
.v4-free-note{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green);font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:99px}
.v4-free-note i{font-size:11px}
.v4-fc-head{display:flex;align-items:center;gap:11px;font-family:var(--font-display)}
.v4-fc-step{width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.v4-fc-step i{color:var(--blue) !important;margin:0 !important}

/* ============ V4 SÖKRESULTAT (sok-annonser_v4, full) ============ */
.v4s-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.v4s-head h1{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.3px;margin:0}
.v4s-head h1 .q{color:var(--blue)}
.v4s-count{font-size:13px;color:var(--text-3);margin:0 0 14px}
.v4s-tools{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.v4s-tools label{font-size:13px;color:var(--text-2);white-space:nowrap}
.v4s-sortsel{height:38px !important;width:auto !important;border:1.5px solid var(--border) !important;border-radius:9px !important;background-color:var(--card) !important;padding:0 30px 0 10px !important;font-size:13.5px !important;font-family:inherit !important;color:var(--text) !important;cursor:pointer;min-width:0;line-height:normal !important;box-shadow:none !important}
.v4s-viewtoggle{display:flex;border:1.5px solid var(--border);border-radius:9px;overflow:hidden;background:var(--card)}
.v4s-viewbtn{display:flex;align-items:center;gap:6px;background:var(--card);border:none;padding:0 12px;height:38px;font-size:13px;font-weight:600;color:var(--text-2) !important;cursor:pointer;transition:background .12s,color .12s;text-decoration:none}
.v4s-viewbtn+.v4s-viewbtn{border-left:1.5px solid var(--border)}
.v4s-viewbtn:hover{color:var(--text) !important}
.v4s-viewbtn[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue) !important}
/* annonskort */
.v4s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.v4s-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .15s;position:relative;text-decoration:none;color:var(--text)}
.v4s-card:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(31,90,150,.14);transform:translateY(-2px)}
.v4s-img{position:relative;aspect-ratio:4/3;background:var(--bg);overflow:hidden}
.v4s-img img{width:100%;height:100%;object-fit:cover;display:block}
.v4s-badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;padding:4px 11px;border-radius:99px;z-index:2}
.v4s-badge.sell{background:var(--green-soft);color:var(--green)}
.v4s-badge.free{background:var(--amber-soft);color:var(--amber)}
.v4s-premium{position:absolute;top:10px;right:44px;width:26px;height:26px;border-radius:50%;background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;z-index:2}
.v4s-fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;font-size:14px;color:var(--text-2);display:flex;align-items:center;justify-content:center;transition:color .12s,transform .12s;z-index:3}
.v4s-fav:hover{transform:scale(1.1)}
.v4s-fav.is-favorite,.v4s-fav .fas.fa-heart{color:var(--coral)}
.v4f-types{display:flex;flex-direction:column;gap:4px}
.v4f-type{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--text-2) !important;padding:7px 9px;border-radius:8px;border:1.5px solid transparent;text-decoration:none;transition:all .12s}
.v4f-type:hover{background:var(--bg)}
.v4f-type .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.v4f-type.active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue) !important;font-weight:600}
.v4s-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.v4s-title{font-size:14px;font-weight:600;line-height:1.35;color:var(--text)}
.v4s-price{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--blue)}
.v4s-price.free-p{color:var(--amber)}
.v4s-seller{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.v4s-seller i{color:var(--green);font-size:12px}
.v4s-biztag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--green-soft);color:var(--green);padding:2px 8px;border-radius:99px}
.v4s-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-top:auto;padding-top:4px}
.v4s-meta i{font-size:11px}
.v4s-foot{text-align:center;font-size:12.5px;color:var(--text-3);margin-top:10px}
/* listvy: rad-korten som egna kort (mockens listläge) */
.v4s-list{display:flex;flex-direction:column;gap:10px}
/* w-[130px]/sm:w-[180px] i loop-single finns inte i kompilerade tailwind.css */
.v4s-list>a>div:first-child{width:130px;height:100px;flex-shrink:0}
@media(min-width:640px){.v4s-list>a>div:first-child{width:180px;height:135px}}
.v4s-list>a{background:var(--card);border:1px solid var(--border) !important;border-radius:var(--radius);box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.v4s-list>a:hover{border-color:var(--blue) !important;box-shadow:0 6px 20px rgba(31,90,150,.14);background:var(--card)}
@media(max-width:1020px){.v4s-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.v4s-grid{grid-template-columns:repeat(2,1fr)}.v4s-body{padding:10px 11px 12px}.v4s-price{font-size:15px}}
/* filterpanel v4 */
#search-form .v4f-title{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:11px;color:var(--text)}
#search-form .v4f-title a{font-size:12px;font-weight:600;color:var(--blue) !important;text-decoration:none}
#search-form .v4f-title a:hover{text-decoration:underline}
#search-form .filter-section{padding:10px 0;border-top:1px solid var(--border);margin-bottom:0 !important}
#search-form .filter-section:first-of-type{border-top:none;padding-top:0}
#search-form .filter-section h3{font-size:11px !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.06em !important;color:var(--text-3) !important;margin-bottom:9px !important}
#search-form hr{display:none}
.v4f-catrow{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-2) !important;padding:6px;border-radius:8px;transition:background .12s,color .12s;text-decoration:none}
.v4f-catrow:hover{background:var(--bg);color:var(--text) !important}
.v4f-catrow.active{background:var(--blue-soft);color:var(--blue) !important;font-weight:600}
.v4f-catrow .num{margin-left:auto;font-size:12px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.v4f-catall{font-weight:600;color:var(--blue) !important}

/* ============ V4 CHATT (chatt_v4) — synkad mot threads.php:s klasser ============
   main.css stylar en äldre klassgeneration (.msg-bubble, .conv-last m.fl.) som inte
   används av threads.php. Detta block är den gällande chatt-stilen. */
.chat-wrap{max-width:1140px;width:calc(100% - 40px);margin:18px auto;display:grid;grid-template-columns:340px minmax(0,1fr);gap:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;height:calc(100vh - 140px);min-height:480px}
.conv-list{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--card)}
.conv-header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 11px;border-bottom:none}
.conv-header h1,.conv-header h2{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0;letter-spacing:0}
.conv-header .count{font-size:11.5px;font-weight:700;background:var(--blue-soft);color:var(--blue);padding:3px 10px;border-radius:99px}
.conv-search{position:relative;padding:0 16px 12px}
.conv-search i{position:absolute;left:28px;top:11px;color:var(--text-3);font-size:13px}
.conv-search input{width:100%;height:38px;border:1.5px solid var(--border);border-radius:9px;padding:0 12px 0 36px;font-size:13.5px;font-family:inherit;background:var(--bg);outline:none}
.conv-search input:focus{border-color:var(--blue);background:#fff}
.conv-items{overflow-y:auto;flex:1;min-height:0}
.conv-item,.conv-item-support{display:flex;gap:11px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--border);padding:13px 16px;cursor:pointer;transition:background .12s;align-items:flex-start;text-decoration:none;color:var(--text)}
.conv-item:hover{background:var(--bg)}
.conv-item.active{background:var(--blue-soft);border-left:none;padding-left:16px}
.conv-item .conv-avatar,.conv-item-support .conv-avatar{width:42px;height:42px;border-radius:50%;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none}
.conv-body{flex:1;min-width:0}
.conv-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-name span{font-weight:500;color:var(--text-3)}
.conv-preview{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.conv-item.unread .conv-preview{font-weight:600;color:var(--text)}
.conv-meta{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end}
.conv-time{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.conv-unread{margin-top:5px;min-width:18px;height:18px;padding:0 5px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;border-radius:9px;display:flex;align-items:center;justify-content:center}
/* chattyta */
.chat-area{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card)}
.chat-area.hidden{display:none}
.chat-top{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border)}
.chat-top .avatar{width:40px;height:40px;border-radius:50%;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-top .info{min-width:0}
.chat-top .name{font-size:14.5px;font-weight:600}
.chat-top .status{font-size:12px;color:var(--green);display:flex;align-items:center;gap:5px}
.chat-top .status i{font-size:7px}
.item-ref{display:flex;align-items:center;gap:9px;margin-left:auto;border:1.5px solid var(--border);border-radius:9px;padding:6px 10px;transition:border-color .12s;min-width:0;text-decoration:none}
.item-ref:hover{border-color:var(--blue)}
.item-ref img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--bg)}
.item-ref .ref-info{min-width:0}
.item-ref .ref-title{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.item-ref .ref-price{font-size:12.5px;font-weight:700;color:var(--blue)}
/* meddelandeflöde */
.messages{flex:1;overflow-y:auto;min-height:0;padding:18px 16px;display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.msg-date{align-self:center;font-size:11px;font-weight:700;color:var(--text-3);background:var(--card);border:1px solid var(--border);padding:3px 12px;border-radius:99px;margin:10px 0 6px}
.msg{max-width:72%;display:flex;flex-direction:column}
.msg.sent{align-self:flex-end;align-items:flex-end}
.msg.received{align-self:flex-start;align-items:flex-start}
.msg .bubble{padding:9px 13px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.msg.sent .bubble{background:var(--blue);color:#fff;border-radius:16px 16px 5px 16px}
.msg.received .bubble{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:16px 16px 16px 5px}
.msg .time{font-size:10.5px;color:var(--text-3);margin-top:2px;display:flex;align-items:center;gap:4px}
.msg .bubble img{max-width:100%;border-radius:10px;display:block}
/* input */
.chat-input{padding:12px 16px;border-top:1px solid var(--border);background:var(--card)}
.chat-input textarea{flex:1;padding:10px 16px;border:1.5px solid var(--border) !important;border-radius:21px !important;font-size:14px;font-family:'Inter',sans-serif;outline:none;resize:none;max-height:120px;line-height:1.4;background:var(--bg)}
.chat-input textarea:focus{border-color:var(--blue) !important;background:#fff}
.btn-send{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;transition:background .15s}
.btn-send:hover{background:var(--blue-deep)}
/* mobil */
@media(max-width:768px){
  .chat-wrap{grid-template-columns:1fr;width:calc(100% - 20px);height:calc(100vh - 190px)}
  .conv-list.hidden{display:none}
  .conv-list{border-right:none}
  .chat-back{display:inline-flex !important}
  .item-ref .ref-title{max-width:110px}
  .msg{max-width:85%}
}

/* ============ V4 SKAPA ANNONS — layout + förhandsgranskning ============ */
.v4c-wrap{max-width:1180px;margin-left:auto;margin-right:auto}
.v4c-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.v4c-form{min-width:0;counter-reset:v4step}
.v4c-form .v4-fc-step i{display:none}
.v4c-form .v4-fc-step::before{counter-increment:v4step;content:counter(v4step);font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--blue)}
.v4c-publish{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;border:none;font-size:15px;font-weight:700;padding:13px 26px;border-radius:10px;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(47,158,99,.3)}
.v4c-publish:hover{background:#288955;transform:translateY(-1px);box-shadow:0 4px 14px rgba(47,158,99,.4)}
.v4c-note{font-size:12.5px;color:var(--text-3);margin:0}
.v4c-note a{font-weight:600}
.v4c-sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:80px}
.v4c-side-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.v4c-side-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:11px}
.v4c-side-title i{color:var(--blue)}
.v4c-preview{border:1.5px dashed var(--blue);border-radius:11px;padding:14px;background:linear-gradient(140deg,var(--blue-soft),#fff 70%)}
.v4c-pv-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px}
.v4c-pv-av{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.v4c-pv-name{font-weight:600;font-size:13.5px}
.v4c-pv-meta{font-size:11.5px;color:var(--text-3)}
.v4c-pv-badge{margin-left:auto;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--green-soft);color:var(--green);white-space:nowrap}
.v4c-pv-badge.free{background:var(--amber-soft);color:var(--amber)}
.v4c-pv-img{aspect-ratio:16/9;border-radius:8px;background:var(--bg);border:1px solid var(--border);overflow:hidden;margin-bottom:8px}
.v4c-pv-img img{width:100%;height:100%;object-fit:cover;display:block}
.v4c-pv-title{font-size:13.5px;font-weight:600;line-height:1.4;margin-bottom:3px;overflow-wrap:anywhere}
.v4c-pv-text{font-size:12.5px;color:var(--text-2);line-height:1.5;margin-bottom:8px;overflow-wrap:anywhere}
.v4c-pv-price{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--blue)}
.v4c-pv-price.free-p{color:var(--amber);font-size:14px}
.v4c-pv-note{font-size:11.5px;color:var(--text-3);margin-top:10px;text-align:center}
.v4c-tips{display:flex;flex-direction:column;gap:9px}
.v4c-tip{display:flex;gap:9px;font-size:13px;line-height:1.5;color:var(--text-2)}
.v4c-tip i{color:var(--green);margin-top:3px;font-size:11px}
.v4c-tip b{color:var(--text);font-weight:600}
@media(max-width:960px){
  .v4c-grid{grid-template-columns:1fr}
  /* Enkolumnsläge: cappa formuläret så fälten inte spänner över hela skärmen */
  .v4c-form{max-width:720px;width:100%;margin:0 auto}
  .v4c-sidebar{position:static;max-width:720px;width:100%;margin:0 auto}
}
@media(min-width:961px) and (max-width:1180px){
  /* Mellanbredder: behåll 2 kolumner men låt formuläret andas */
  .v4c-grid{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
}

/* ============ V4 DASHBOARD-HUVUDKOLUMN (mina-sidor_v4) ============ */
.v4d-match{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--blue-soft),#fff 75%);border:1.5px solid var(--blue);border-radius:var(--radius);padding:15px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.v4d-match-icon{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.v4d-match-body{flex:1;min-width:0}
.v4d-match-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue)}
.v4d-match-text{font-size:14px;margin-top:1px}
.v4d-match-cta{display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff !important;border:none;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9px;cursor:pointer;flex-shrink:0;transition:background .15s;text-decoration:none}
.v4d-match-cta:hover{background:var(--blue-deep)}
.v4d-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.v4d-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.v4d-stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.v4d-stat-icon.blue{background:var(--blue-soft);color:var(--blue)}
.v4d-stat-icon.green{background:var(--green-soft);color:var(--green)}
.v4d-stat-icon.amber{background:var(--amber-soft);color:var(--amber)}
.v4d-stat-icon.coral{background:var(--coral-soft);color:var(--coral)}
.v4d-stat-num{font-family:var(--font-display);font-size:21px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.v4d-stat-label{font-size:12px;color:var(--text-2)}
@media(max-width:960px){.v4d-stats{grid-template-columns:repeat(2,1fr)}}

/* min-w-[200px]/min-w-[44px] (dashboard-åtgärdsmenyn) saknas i kompilerade tailwind.css */
@media(max-width:1023px){.sn-actions-menu{min-width:200px}.sn-actions-trigger{min-width:44px;min-height:44px}}

/* ============ MOBIL-FIXAR (genomgång 2026-06-11) ============ */
@media(max-width:767px){
  /* Cookie-bannern ovanför bottom-nav istället för över den */
  #snappat-cookie-banner{bottom:calc(60px + env(safe-area-inset-bottom)) !important}
  body.has-cookie-banner{padding-bottom:210px !important}
  /* Back-to-top krockar med mobil-CTA:n på annonssidan */
  #backToTop{display:none !important}
  /* Sticky filterknapp: headern är 64px, inte 68 */
  #sn-mobile-filter-btn{top:64px !important}
  /* iOS zoomar in på fält under 16px — håll 16px på mobil */
  .v4loc-pop input[type="text"],.v4-auth-card input:not([type="checkbox"]),.v4-field input,
  #search-form input[type="number"],#search-form input[type="text"]{font-size:16px !important}
  /* Annonssidans pris-rad: vänsterställ under rubriken */
  .v4i-price{font-size:24px}
  /* Sökresultatens verktygsrad: en rad under H1, ingen brytning */
  .v4s-tools{width:100%;flex-wrap:nowrap}
  .v4s-tools .v4s-sortsel{flex:1;min-width:0}
  .v4s-tools label{margin-left:auto}
}

/* ============ FLASH-MEDDELANDEN ============ */
.v4-flash{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius);border:1px solid var(--border);font-size:14px;margin-bottom:8px;background:var(--card);box-shadow:var(--shadow)}
.v4-flash.ok{background:var(--green-soft);border-color:#bfe5cf;color:#1d6b42}
.v4-flash.error{background:var(--coral-soft);border-color:#f2c6c2;color:#a73930}
.v4-flash.warning{background:var(--amber-soft);border-color:#f0ddb8;color:#9c6508}
.v4-flash.info{background:var(--blue-soft);border-color:#c8daed;color:var(--blue-deep)}

/* ===== Torget-heron: v4loc-pickern på mörkblå hero (radie-modellen sajtbrett) ===== */
.tg-hero-search .v4loc-wrap{flex:0 1 240px}
.tg-hero-search .v4loc-btn{height:46px;background:#fff;border:none;border-radius:10px;box-shadow:0 3px 12px rgba(10,30,50,.18)}
.tg-hero-search .v4loc-btn:hover{background:#f8f9fa}
.tg-hero-search .v4loc-wrap.open{z-index:100}
.tg-hero:has(.v4loc-wrap.open){overflow:visible;position:relative;z-index:200}
@media(max-width:768px){.tg-hero-search .v4loc-wrap{flex:1 1 100%;width:100%}}

/* ===== Mina sidor: formulärknappar — gamla main.css stylade bara .submit-row .btn-submit,
   och .submit-row-wrappern försvann i v4-omstylingen → knapparna blev ren text ===== */
.btn-submit{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;border:none;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:background .15s;margin-top:6px}
.btn-submit:hover{background:#288955}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}
.btn-cancel{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);border:1.5px solid var(--border);border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer}
.btn-cancel:hover{background:var(--bg)}

/* ===== Mina sidor: Inställningar (togglar, direkt-spar) ===== */
.v4set-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin-top:20px}
.v4set-title{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:4px}
.v4set-title i{color:var(--blue);margin-right:6px}
.v4set-group{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6b7684);margin:18px 0 4px}
.v4set-row{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid #f0f2f4}
.v4set-row:last-of-type{border-bottom:none}
.v4set-tgl{width:42px;height:24px;border-radius:99px;background:#cfd6dd;position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;margin-top:1px}
.v4set-tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.v4set-tgl.on{background:var(--green)}
.v4set-tgl.on::after{left:21px}
.v4set-tgl:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.v4set-label{font-size:14px;font-weight:600;color:var(--text)}
.v4set-hint{font-size:12px;color:var(--muted,#6b7684);margin-top:1px}
.v4set-saved{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-weight:700;font-size:13px;padding:9px 20px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:90}
.v4set-saved.show{opacity:1}