/* ============================================================
   Samtrygg Design System — Shared Mockup Stylesheet
   Version: 1.2 · April 2026

   Linked from every page in /pages/.
   Tokens mirror assets/_tokens.css exactly.
   Components mirror assets/_button.css, _nav.css, _card.css, _badge.css.

   Page-specific CSS lives in each page's own <style> block.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. TOKENS  (mirror of assets/_tokens.css)
──────────────────────────────────────────────────────────── */
:root {
  /* Primitive colours */
  --sam-red:           #FF6D59;
  --sam-white:         #FFFFFF;
  --sam-dark:          #313131;
  --sam-brown-dark:    #4F4341;
  --sam-brown-medium:  #80706E;
  --sam-brown-light:   #F2ECEB;
  --sam-medium:        #848484;
  --sam-light:         #E9E9E9;
  --sam-confirmation:  #2FCD6F;
  --sam-error:         #D65454;

  /* Semantic — interactive */
  --color-action:        var(--sam-red);
  --color-action-hover:  color-mix(in oklab, var(--sam-red) 88%, black);
  --color-action-active: color-mix(in oklab, var(--sam-red) 78%, black);
  --color-action-fg:     var(--sam-white);
  --color-action-subtle: color-mix(in oklab, var(--sam-red) 10%, white);

  /* Semantic — feedback */
  --color-success:         #1a7a3c;
  --color-success-bg:      #e7f5ed;
  --color-success-border:  #b3e0c4;
  --color-warning:         #8b5a00;
  --color-warning-bg:      #fff4e0;
  --color-warning-border:  #f5d48c;
  --color-danger:          var(--sam-error);
  --color-danger-bg:       #fdecea;
  --color-danger-border:   #f5b9b4;
  --color-info:            #1a4a8a;
  --color-info-bg:         #e8f0fe;
  --color-info-border:     #b8d0f8;

  /* Semantic — text */
  --text-primary:   var(--sam-dark);
  --text-secondary: var(--sam-medium);
  --text-disabled:  var(--sam-light);
  --text-inverse:   var(--sam-white);
  --text-link:      var(--sam-red);
  --text-link-hover: var(--color-action-hover);

  /* Semantic — border */
  --border-default: var(--sam-light);
  --border-strong:  var(--sam-dark);
  --border-focus:   var(--sam-dark);
  --border-error:   var(--sam-error);
  --border-success: var(--color-success);

  /* Typography */
  --font-body: "Nuckle", "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  48px;

  /* Spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9:  128px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px  color-mix(in oklab, var(--sam-dark) 5%,  transparent),
              0 1px 3px  color-mix(in oklab, var(--sam-dark) 6%,  transparent);
  --shadow-2: 0 4px 12px color-mix(in oklab, var(--sam-dark) 6%,  transparent),
              0 2px 4px  color-mix(in oklab, var(--sam-dark) 4%,  transparent);
  --shadow-3: 0 16px 40px color-mix(in oklab, var(--sam-dark) 10%, transparent),
              0 4px  10px color-mix(in oklab, var(--sam-dark) 5%,  transparent);

  /* Surfaces */
  --surface-base:    var(--sam-brown-light);
  --surface-raised:  var(--sam-white);
  --surface-sunken:  #f7f8fc;
  --surface-overlay: rgba(49, 49, 49, 0.50);
  --surface-inverse: var(--sam-dark);
  --surface-warm:    #F5EFE6;

  /* Placeholder gradients */
  --ph-warm-start:   #e8d5c4;  --ph-warm-end:   #c9a382;
  --ph-green-start:  #c5d9c2;  --ph-green-end:  #8aaa85;
  --ph-blue-start:   #c5d2e0;  --ph-blue-end:   #8aa2bc;
  --ph-rose-start:   #f4d3d7;  --ph-rose-end:   #e9aab0;
  --ph-purple-start: #d4c5e2;  --ph-purple-end: #a89fc0;
  --ph-sand-start:   #e0d4c0;  --ph-sand-end:   #bfac92;
  --ph-dark-start:   #2a2822;  --ph-dark-end:   #1a1a1a;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Social/brand */
  --color-facebook:       #1877F2;
  --color-facebook-hover: #166FE5;
  --color-bankid-bg:      var(--surface-inverse);
  --color-bankid-gold:    #FFB800;
  --color-warning-accent: #f5a623;
}


/* ────────────────────────────────────────────────────────────
   2. RESET + BASE
──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family:             var(--font-body);
  color:                   var(--text-primary);
  background:              var(--surface-base);
  -webkit-font-smoothing:  antialiased;
  font-size:               var(--text-base);
  line-height:             1.5;
}
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }

:focus-visible {
  outline:        2px solid var(--border-focus);
  outline-offset: 2px;
  box-shadow:     0 0 0 4px color-mix(in oklab, var(--border-focus) 12%, transparent);
}
:focus:not(:focus-visible) { outline: none; }


/* ────────────────────────────────────────────────────────────
   3. HANDOFF BAR  (mockup-only, remove in production)
──────────────────────────────────────────────────────────── */
.handoff {
  background:    #1a1a1a;
  color:         #ccc;
  font-size:     12px;
  font-family:   var(--font-mono);
  border-bottom: 2px solid var(--sam-red);
}
.handoff .inner {
  max-width:   1440px;
  margin:      0 auto;
  padding:     8px 24px;
  display:     flex;
  gap:         16px;
  align-items: center;
  flex-wrap:   wrap;
}
.handoff .inner > a:last-child { margin-left: auto; }
.handoff .pill {
  background:     var(--sam-red);
  color:          #fff;
  padding:        2px 8px;
  border-radius:  4px;
  font-weight:    700;
  font-size:      10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.handoff b         { color: #fff; }
.handoff a         { color: #9FD3FF; border-bottom: 1px dashed #3d6a96; }
.handoff a:hover   { color: #D4EDFF; }
.handoff .route    { color: #FFB86B; }
.handoff .sep      { color: #555; }
.handoff .controller { color: #98E9A8; }


/* ────────────────────────────────────────────────────────────
   4. TOPBAND  (public/brand surfaces only)
──────────────────────────────────────────────────────────── */
.topband {
  background:  var(--surface-inverse);
  color:       var(--text-inverse);
  font-size:   var(--text-xs);
  line-height: 1.4;
}
.topband .inner,
.topband__inner {
  max-width:       1440px;
  margin:          0 auto;
  padding:         8px var(--s-5);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--s-3);
  flex-wrap:       wrap;
}
.topband .items,
.topband__items {
  display:     flex;
  gap:         var(--s-4);
  align-items: center;
}
.topband .items span,
.topband__item {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  color:       rgba(255, 255, 255, 0.72);
}
.topband svg,
.topband__item svg {
  width:        13px;
  height:       13px;
  stroke:       currentColor;
  fill:         none;
  stroke-width: 1.8;
  flex-shrink:  0;
}
@media (max-width: 768px) { .topband { display: none; } }


/* ────────────────────────────────────────────────────────────
   5. MAIN NAV
──────────────────────────────────────────────────────────── */
.nav,
.site-nav {
  background:    var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
  position:      sticky;
  top:           0;
  z-index:       40;
}
.nav .inner,
.site-nav .inner,
.site-nav__inner {
  max-width:       1440px;
  margin:          0 auto;
  padding:         0 var(--s-5);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--s-4);
  height:          64px;
}
.nav .logo img,
.site-nav__logo img {
  height:  26px;
  width:   auto;
  display: block;
}
.nav ul,
.site-nav__links {
  list-style: none;
  display:    flex;
  gap:        var(--s-5);
  margin:     0;
  padding:    0;
}
.nav ul a,
.site-nav__links a {
  text-decoration: none;
  color:           var(--sam-brown-dark);
  font-weight:     500;
  font-size:       var(--text-base);
  padding:         4px 0;
  border-bottom:   2px solid transparent;
  transition:
    color        var(--transition-fast),
    border-color var(--transition-fast);
}
.nav ul a:hover,
.nav ul a.is-active,
.site-nav__links a:hover,
.site-nav__links a.is-active {
  color:        var(--color-action);
  border-color: var(--color-action);
}
.nav .right,
.site-nav__actions {
  display:     flex;
  align-items: center;
  gap:         var(--s-2);
}
@media (max-width: 768px) {
  .nav .inner,
  .site-nav__inner  { padding: 0 var(--s-3); height: 56px; }
  .nav ul,
  .site-nav__links  { display: none; }
}


/* ────────────────────────────────────────────────────────────
   6. ACCOUNT SUB-NAV
──────────────────────────────────────────────────────────── */
.account-nav {
  background:    var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
}
.account-nav .inner,
.account-nav__inner {
  max-width:        1280px;
  margin:           0 auto;
  padding:          0 var(--s-5);
  display:          flex;
  overflow-x:       auto;
  scrollbar-width:  none;
  -webkit-overflow-scrolling: touch;
}
.account-nav .inner::-webkit-scrollbar,
.account-nav__inner::-webkit-scrollbar { display: none; }
.account-nav a {
  text-decoration: none;
  color:           var(--text-secondary);
  font-size:       var(--text-sm);
  font-weight:     600;
  padding:         14px 0;
  margin-right:    var(--s-5);
  border-bottom:   2px solid transparent;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:
    color        var(--transition-fast),
    border-color var(--transition-fast);
}
.account-nav a:hover    { color: var(--text-primary); }
.account-nav a.is-active {
  color:        var(--text-primary);
  border-color: var(--border-strong);
}
@media (max-width: 768px) {
  .account-nav .inner,
  .account-nav__inner { padding: 0 var(--s-3); }
}


/* ── Authenticated user chip (right side of nav when logged in) ── */
.nav-user {
  display:     inline-flex;
  align-items: center;
  gap:         var(--s-2);
  padding:     6px 14px 6px 6px;
  border:      1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background:  var(--surface-raised);
  cursor:      pointer;
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--text-primary);
  text-decoration: none;
  transition:
    background   var(--transition-fast),
    border-color var(--transition-fast);
}
.nav-user:hover {
  background:   var(--surface-warm);
  border-color: var(--border-strong);
}
.nav-user__avatar {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--surface-inverse);
  color:           var(--text-inverse);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--text-xs);
  font-weight:     800;
  letter-spacing:  .04em;
  flex-shrink:     0;
}
.nav-user__name {
  max-width:    120px;
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}


/* ────────────────────────────────────────────────────────────
   LANDLORD ACCOUNT SUB-NAV
   Tabs: Mina annonser · Visningar · Intresserade · Meddelanden · Inställningar
──────────────────────────────────────────────────────────── */
.landlord-nav {
  background:    var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
}
.landlord-nav .inner,
.landlord-nav__inner {
  max-width:        1280px;
  margin:           0 auto;
  padding:          0 var(--s-5);
  display:          flex;
  overflow-x:       auto;
  scrollbar-width:  none;
  -webkit-overflow-scrolling: touch;
}
.landlord-nav .inner::-webkit-scrollbar,
.landlord-nav__inner::-webkit-scrollbar { display: none; }
.landlord-nav a {
  text-decoration: none;
  color:           var(--text-secondary);
  font-size:       var(--text-sm);
  font-weight:     600;
  padding:         14px 0;
  margin-right:    var(--s-5);
  border-bottom:   2px solid transparent;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:
    color        var(--transition-fast),
    border-color var(--transition-fast);
}
.landlord-nav a:hover     { color: var(--text-primary); }
.landlord-nav a.is-active {
  color:        var(--text-primary);
  border-color: var(--border-strong);
}
@media (max-width: 768px) {
  .landlord-nav .inner,
  .landlord-nav__inner { padding: 0 var(--s-3); }
}
──────────────────────────────────────────────────────────── */
.langsw,
.lang-switch {
  display:       inline-flex;
  border:        1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding:       3px;
  background:    var(--surface-raised);
}
.langsw button,
.lang-switch button,
.lang-switch__btn {
  border:         none;
  background:     transparent;
  padding:        5px 12px;
  border-radius:  var(--radius-pill);
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: .06em;
  color:          var(--text-secondary);
  cursor:         pointer;
  transition:
    background var(--transition-fast),
    color      var(--transition-fast);
  line-height: 1;
}
.langsw button.on,
.lang-switch button.on,
.lang-switch button.is-active,
.lang-btn.is-active,
.lang-switch__btn.is-active {
  background: var(--surface-inverse);
  color:      var(--text-inverse);
}


/* ────────────────────────────────────────────────────────────
   8. BUTTONS  (mirror of assets/_button.css)
──────────────────────────────────────────────────────────── */
.btn {
  --btn-bg:     var(--surface-inverse);
  --btn-fg:     var(--text-inverse);
  --btn-border: transparent;
  --btn-height: 44px;
  --btn-px:     20px;
  --btn-fs:     var(--text-base);

  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--s-2);
  height:           var(--btn-height);
  padding:          0 var(--btn-px);
  font-family:      var(--font-body);
  font-size:        var(--btn-fs);
  font-weight:      700;
  line-height:      1;
  letter-spacing:   -0.01em;
  white-space:      nowrap;
  text-decoration:  none;
  background:       var(--btn-bg);
  color:            var(--btn-fg);
  border:           1.5px solid var(--btn-border);
  border-radius:    var(--radius-pill);
  cursor:           pointer;
  user-select:      none;
  transition:
    background   var(--transition-fast),
    color        var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast),
    transform    var(--transition-fast),
    opacity      var(--transition-fast);
}
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  transform:  translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform:  translateY(0);
  box-shadow: none;
}
.btn:focus-visible {
  outline:        2px solid var(--border-focus);
  outline-offset: 3px;
  box-shadow:     0 0 0 4px color-mix(in oklab, var(--color-action) 20%, transparent);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity:        0.45;
  cursor:         not-allowed;
  transform:      none;
  box-shadow:     none;
  pointer-events: none;
}
.btn svg {
  width:        16px;
  height:       16px;
  flex-shrink:  0;
  stroke:       currentColor;
  fill:         none;
  stroke-width: 2;
}
.btn--loading { position: relative; color: transparent; pointer-events: none; }
.btn--loading::after {
  content:       '';
  position:      absolute;
  inset:         0;
  margin:        auto;
  width:         16px;
  height:        16px;
  border:        2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation:     btn-spin 0.7s linear infinite;
  color:         var(--btn-fg);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Variants */
.btn--primary  { --btn-bg: var(--color-action);   --btn-fg: var(--color-action-fg); --btn-border: var(--color-action); }
.btn--primary:hover:not(:disabled)  { --btn-bg: var(--color-action-hover);  --btn-border: var(--color-action-hover); }
.btn--primary:active:not(:disabled) { --btn-bg: var(--color-action-active); --btn-border: var(--color-action-active); }

.btn--secondary { --btn-bg: var(--surface-raised); --btn-fg: var(--text-primary); --btn-border: var(--border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-warm); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-primary); --btn-border: var(--border-default); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-warm); --btn-border: var(--border-strong); }

.btn--ghost-inverse { --btn-bg: transparent; --btn-fg: var(--text-inverse); --btn-border: rgba(255,255,255,.45); }
.btn--ghost-inverse:hover:not(:disabled) { background: rgba(255,255,255,.10); --btn-border: rgba(255,255,255,.75); }
.btn--ghost-inverse:focus-visible { outline-color: var(--sam-white); box-shadow: 0 0 0 4px rgba(255,255,255,.20); }

.btn--subtle { --btn-bg: var(--surface-warm); --btn-fg: var(--text-primary); --btn-border: transparent; }
.btn--subtle:hover:not(:disabled) { background: color-mix(in oklab, var(--surface-warm) 80%, var(--sam-brown-medium)); }

.btn--danger { --btn-bg: var(--color-danger); --btn-fg: var(--sam-white); --btn-border: var(--color-danger); }
.btn--danger:hover:not(:disabled) { --btn-bg: color-mix(in oklab, var(--color-danger) 88%, black); }

.btn--dark { --btn-bg: var(--surface-inverse); --btn-fg: var(--text-inverse); --btn-border: var(--surface-inverse); }
.btn--dark:hover:not(:disabled) { --btn-bg: color-mix(in oklab, var(--surface-inverse) 85%, white); }

.btn--success { --btn-bg: var(--color-success); --btn-fg: var(--sam-white); --btn-border: var(--color-success); }
.btn--success:hover:not(:disabled) { --btn-bg: color-mix(in oklab, var(--color-success) 88%, black); }

.btn--link {
  --btn-bg: transparent; --btn-fg: var(--text-link); --btn-border: transparent; --btn-px: 0;
  height: auto; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px;
}
.btn--link:hover:not(:disabled) { text-decoration-color: var(--text-link); transform: none; box-shadow: none; }

/* Size modifiers */
.btn--sm { --btn-height: 36px; --btn-px: 14px; --btn-fs: var(--text-sm); }
.btn--lg { --btn-height: 54px; --btn-px: 28px; --btn-fs: var(--text-md); }
.btn--full { width: 100%; justify-content: center; }

/* Social */
.btn--facebook { --btn-bg: #1877F2; --btn-fg: #fff; --btn-border: #1877F2; }
.btn--facebook:hover:not(:disabled) { --btn-bg: #166FE5; --btn-border: #166FE5; }
.btn--bankid   { --btn-bg: var(--surface-inverse); --btn-fg: var(--text-inverse); --btn-border: var(--surface-inverse); }


/* ────────────────────────────────────────────────────────────
   9. FORM FIELDS
──────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--s-3); }
.field label {
  display:      block;
  font-size:    var(--text-sm);
  font-weight:  600;
  color:        var(--sam-brown-dark);
  margin-bottom: 6px;
}
.field .req { color: var(--color-action); }
.field input,
.field select,
.field textarea {
  width:       100%;
  padding:     11px 14px;
  border:      1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  font:        inherit;
  font-size:   var(--text-base);
  color:       var(--text-primary);
  background:  var(--surface-raised);
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  resize: vertical;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--sam-brown-medium); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline:    none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--border-focus) 8%, transparent);
}
.field input.is-error,
.field textarea.is-error { border-color: var(--border-error); }

/* Autocomplete flash fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--surface-raised, #fff) inset !important;
  -webkit-text-fill-color: var(--text-primary, #313131) !important;
  transition: background-color 5000s ease-in-out 0s;
}


/* ────────────────────────────────────────────────────────────
   10. BADGES
──────────────────────────────────────────────────────────── */
.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--s-1);
  padding:        3px 9px;
  border-radius:  var(--radius-pill);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: .04em;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--success { background: var(--color-success-bg);  color: var(--color-success); }
.badge--warning { background: var(--color-warning-bg);  color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-bg);   color: var(--color-danger);  }
.badge--info    { background: var(--color-info-bg);     color: var(--color-info);    }
.badge--neutral { background: var(--border-default);    color: var(--text-primary);  }
.badge--brand   { background: var(--color-action);      color: var(--sam-white);     }
.badge--dark    { background: var(--surface-inverse);   color: var(--text-inverse);  }


/* ────────────────────────────────────────────────────────────
   11. CARDS / MODULES
──────────────────────────────────────────────────────────── */
.card,
.mod {
  background:     var(--surface-raised);
  border:         1px solid var(--border-default);
  border-radius:  var(--radius-xl);
  padding:        var(--s-4);
  position:       relative;
  margin-bottom:  var(--s-4);
  overflow:       hidden;
}
.card--compact,
.mod--compact {
  padding:       var(--s-3);
  border-radius: var(--radius-lg);
}
.card__header,
.mod-head,
.mod__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--s-2);
  padding:         var(--s-3) var(--s-4);
  border-bottom:   1px solid var(--border-default);
  margin:          calc(-1 * var(--s-4));
  margin-bottom:   var(--s-4);
}
.card__title,
.mod-head h2,
.mod__title {
  font-size:      var(--text-md);
  font-weight:    800;
  margin:         0;
  letter-spacing: -0.01em;
}
.card__footer,
.mod__footer {
  display:      flex;
  align-items:  center;
  gap:          var(--s-2);
  margin-top:   var(--s-3);
  padding-top:  var(--s-3);
  border-top:   1px dashed var(--border-default);
}
.card--interactive {
  cursor:          pointer;
  text-decoration: none;
  color:           inherit;
  display:         block;
  transition:
    transform    var(--transition-fast),
    box-shadow   var(--transition-fast),
    border-color var(--transition-fast);
}
.card--interactive:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-2);
}
.card--inverse { background: var(--surface-inverse); color: var(--text-inverse); border-color: transparent; }
.card--warm    { background: var(--surface-warm);    border-color: transparent; }


/* ────────────────────────────────────────────────────────────
   12. LISTING CARD
──────────────────────────────────────────────────────────── */
.listing-card {
  background:      var(--surface-raised);
  border:          1px solid var(--border-default);
  border-radius:   var(--radius-lg);
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           inherit;
  transition:
    transform   var(--transition-fast),
    box-shadow  var(--transition-fast);
}
.listing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.listing-card .thumb,
.listing-card__thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-sunken); }
.listing-card .thumb img,
.listing-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-card .save-btn,
.listing-card__save {
  position:    absolute;
  top:         var(--s-2);
  right:       var(--s-2);
  width:       32px;
  height:      32px;
  border-radius: 50%;
  background:  var(--surface-raised);
  border:      none;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  box-shadow:  var(--shadow-1);
  transition:  background var(--transition-fast);
  z-index:     1;
}
.listing-card .save-btn:hover,
.listing-card__save:hover { background: var(--surface-warm); }
.listing-card .save-btn svg,
.listing-card__save svg { width: 14px; height: 14px; stroke: var(--text-primary); fill: none; stroke-width: 2; }
.listing-card .save-btn.saved svg,
.listing-card__save.is-saved svg { fill: var(--color-action); stroke: var(--color-action); }
.listing-card .info,
.listing-card__body { padding: var(--s-3) var(--s-4) var(--s-4); display: flex; flex-direction: column; flex: 1; }
.listing-card .area,
.listing-card__area { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--s-1); }
.listing-card h3,
.listing-card__title { font-size: var(--text-md); font-weight: 700; margin: 0 0 var(--s-1); letter-spacing: -0.01em; line-height: 1.25; }
.listing-card .specs,
.listing-card__specs { display: flex; gap: var(--s-2); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--s-2); }
.listing-card .price,
.listing-card__price { font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.listing-card .per,
.listing-card__per { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 400; }


/* ────────────────────────────────────────────────────────────
   13. PAGE LAYOUT HELPERS
──────────────────────────────────────────────────────────── */
.page-wrap {
  max-width: 1280px;
  margin:    0 auto;
  padding:   var(--s-5) var(--s-5) var(--s-8);
}

/* Narrow variants — auth/form pages */
.page-wrap--form,
.page-wrap--narrow {
  max-width: 520px;
  margin:    var(--s-7) auto var(--s-8);
  padding:   0 var(--s-4);
}

.page-wrap--wide {
  max-width: 860px;
  margin:    0 auto;
  padding:   var(--s-5) var(--s-5) var(--s-8);
}
.page-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--s-3);
  margin-bottom:   var(--s-5);
}
.page-head h1 {
  font-size:      var(--text-xl);
  font-weight:    800;
  letter-spacing: -0.015em;
  margin:         0;
}
@media (max-width: 768px) {
  .page-wrap { padding: var(--s-4) var(--s-3) var(--s-7); }
}


/* ────────────────────────────────────────────────────────────
   14. FOOTER
──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface-inverse);
  color:      #cfcfcf;
}
.site-footer .inner {
  max-width: 1440px;
  margin:    0 auto;
  padding:   40px 32px 20px;
}
.site-footer .cols {
  display:               grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap:                   36px;
  padding-bottom:        36px;
  border-bottom:         1px solid #3a3a3a;
}
.site-footer h4 {
  color:          #fff;
  font-size:      var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight:    700;
  margin:         0 0 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer a  { color: #cfcfcf; font-size: var(--text-sm); }
.site-footer a:hover { color: #fff; }
.site-footer .brand-col .logo-text { color: #fff; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.site-footer .brand-col p { font-size: var(--text-sm); color: #9a9a9a; margin: 10px 0 0; max-width: 260px; line-height: 1.55; }
.site-footer .bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding-top:     18px;
  font-size:       12px;
  color:           #6a6a6a;
  flex-wrap:       wrap;
  gap:             10px;
}
@media (max-width: 1024px) { .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 768px)  {
  .site-footer .inner  { padding: 28px 16px 12px; }
  .site-footer .cols   { grid-template-columns: 1fr 1fr; gap: 16px; }
  .site-footer .bottom { flex-direction: column; gap: 4px; text-align: center; }
}
@media (max-width: 480px)  { .site-footer .cols { grid-template-columns: 1fr; } }


/* ────────────────────────────────────────────────────────────
   15. PLACEHOLDER IMAGES
──────────────────────────────────────────────────────────── */
.ph { width: 100%; height: 100%; display: block; }
.ph-warm   { background: linear-gradient(135deg, var(--ph-warm-start),   var(--ph-warm-end));   }
.ph-green  { background: linear-gradient(135deg, var(--ph-green-start),  var(--ph-green-end));  }
.ph-blue   { background: linear-gradient(135deg, var(--ph-blue-start),   var(--ph-blue-end));   }
.ph-rose   { background: linear-gradient(135deg, var(--ph-rose-start),   var(--ph-rose-end));   }
.ph-purple { background: linear-gradient(135deg, var(--ph-purple-start), var(--ph-purple-end)); }
.ph-sand   { background: linear-gradient(135deg, var(--ph-sand-start),   var(--ph-sand-end));   }
.ph-dark   { background: linear-gradient(135deg, var(--ph-dark-start),   var(--ph-dark-end));   }


/* ────────────────────────────────────────────────────────────
   16. LANGUAGE TOGGLE UTILITY
──────────────────────────────────────────────────────────── */
[data-lang-root] .en           { display: none !important; }
[data-lang-root].lang-en .sv   { display: none !important; }
[data-lang-root].lang-en .en   { display: initial !important; }


/* ────────────────────────────────────────────────────────────
   17. UTILITY CLASSES
──────────────────────────────────────────────────────────── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-inverse   { color: var(--text-inverse); }
.text-link      { color: var(--text-link); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }

.surface-base    { background: var(--surface-base); }
.surface-raised  { background: var(--surface-raised); }
.surface-sunken  { background: var(--surface-sunken); }
.surface-inverse { background: var(--surface-inverse); color: var(--text-inverse); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.bg-success { background: var(--color-success-bg); color: var(--color-success); }
.bg-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.bg-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  }
.bg-info    { background: var(--color-info-bg);    color: var(--color-info);    }

.container      { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-5); }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-5); }
@media (max-width: 768px) {
  .container,
  .container-wide { padding: 0 var(--s-3); }
}

/* === Dev-handoff bars hidden on public deploy === */
.handoff { display: none !important; }