/* ===========================
   THEME TOKENS (Dark default)
   =========================== */
:root{
  /* Layout */
  --sidebar-width: 24rem;
  --sidebar-pad: 1.25rem;
  --modal-gutter: 24px;

  /* Colors (dark) */
  --viewer-bg:        #0f1117;
  --viewer-surface:   #181a20;
  --viewer-ink:       #ffffff;
  --viewer-muted:     #a7b0bf;
  --viewer-primary:   #3c84f8;
  --viewer-accent:    #1f2229;
  --viewer-border:    #2a2d35;
  --viewer-success:   #6ee7b7;
  
  /* default: srgb (funkar överallt) */
  --bv-pbar-a: color-mix(in srgb, var(--viewer-primary) 88%, white);
  --bv-pbar-b: color-mix(in srgb, var(--viewer-primary) 88%, black);
  
  /* chip buttons */
  --chip-bg:           color-mix(in srgb, var(--viewer-surface) 96%, transparent);
  --chip-ink:          color-mix(in srgb, var(--viewer-ink) 85%, transparent);
  --chip-border:       color-mix(in srgb, var(--viewer-border) 70%, transparent);
  --chip-bg-hover:     color-mix(in srgb, var(--viewer-surface) 98%, transparent);
  --chip-border-hover: color-mix(in srgb, var(--viewer-border) 55%, transparent);

  --chip-active-bg:     var(--viewer-primary);
  --chip-active-ink:    #fff;
  --chip-active-border: var(--viewer-primary);
  
  /* Filter list */
  --filter-vspace: 1.5rem;     /* luft mellan filtergrupper */
  --filter-label-fs: 0.875rem; /* "Boyta", "Pris" osv */
  --range-track-h: 6px;
  --range-thumb: 16px;

  --room-chip-gap: .5rem;
  --room-chip-fs: .9rem;
  --room-chip-pad-y: .45rem;
  --room-chip-pad-x: .8rem;

  --list-pad-y: .75rem;        /* kortens padding */
  --list-title-fs: 1rem;
  --list-meta-fs: .875rem;
  --list-price-fs: 1.125rem;

  /* Mer diskret silver */
  --viewer-silver: color-mix(in srgb, var(--viewer-ink) 40%, var(--viewer-surface));
  --viewer-silver-quiet: color-mix(in srgb, var(--viewer-ink) 14%, var(--viewer-surface));

  /* iOS safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --compass-gap: 0px; /* luft mellan toolbar & kompass */

  /* Fylls i av JS via visualViewport */
  --ui-top: 0px;
  --ui-bottom: 0px;

  /* Spacing för FABs (Lista/Sol) */
  --sunbar-offset: 6.5rem;

  /* Misc */
  --radius: 12px;
  --nav-h: 64px; 
}

/* Om oklab finns → snyggare ljus/mörk-blend */
@supports (color: oklab(0 0 0)) {
  :root{
    --bv-pbar-a: color-mix(in oklab, var(--viewer-primary) 90%, white);
    --bv-pbar-b: color-mix(in oklab, var(--viewer-primary) 84%, black);
    --viewer-silver: color-mix(in oklab, var(--viewer-ink) 40%, var(--viewer-surface));
    --viewer-silver-quiet: color-mix(in oklab, var(--viewer-ink) 12%, var(--viewer-surface));
  }
}

input, select, textarea { accent-color: var(--viewer-primary); }

/* Light mode */
/*body[data-viewer-mode="light"]{
  --viewer-bg:        #f8fafc;
  --viewer-surface:   #ffffff;
  --viewer-ink:       #0f172a;
  --viewer-muted:     #64748b;
  --viewer-primary:   #2563eb;
  --viewer-accent:    #eef2f7;
  --viewer-border:    #e5e7eb;
  --viewer-success:   #16a34a;
}*/

body[data-viewer-mode="light"]{ color-scheme: light; }
body[data-viewer-mode="dark"] { color-scheme: dark; }

/* ===========================
   BASE
   =========================== */
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: var(--viewer-bg);
  color: var(--viewer-ink);
  overscroll-behavior: none;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; }

/* Stabil viewport-höjd */
.container{
  display: flex;
  height: 100vh;      /* fallback */
  height: 100svh;     /* äldre mobiler */
  height: 100dvh;     /* modern */
  overflow: hidden;
  position: relative;
}

/* Lås sidan på mobil så man inte råkar skrolla hela dokumentet */
@media (max-width:1024px){
  body{
    position: fixed;
    inset: 0;
    overflow: hidden;
    width: 100%;
  }
}

/* ===========================
   VIEWER (vänster) & SIDEPANEL (höger)
   =========================== */
.viewer {
  flex: 1;
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background-color: var(--viewer-bg);
  border-radius: 0 !important;
  overflow: hidden;
  order: 1;
}

.sidebar {
  order: 2;
  width: var(--sidebar-width);
  background-color: var(--viewer-surface);
  padding: var(--sidebar-pad);
  border-left: 1px solid var(--viewer-border);
}

.sidebar h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.sidebar label { display: block; font-size: 14px; color: var(--viewer-muted); margin-top: 10px; margin-bottom: 6px; }

/* ===========================
   OFF-CANVAS SIDEBAR (mobil & iPad)
   =========================== */
@media (max-width: 1024px){
  :root{ --sunbar-offset: 7rem; }

  .sidebar {
    position: fixed; inset: 0 0 0 auto;
    height: 100dvh;
    width: min(90vw, 26rem);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1001;
    background-color: var(--viewer-surface);
    border-left: 1px solid var(--viewer-border);
    overflow-y: auto;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-scrim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1000;
  }
  body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
}

/* ===========================
   SELECT / INPUT
   =========================== */
.select-wrapper { position: relative; margin-bottom: 1rem; }
.select-wrapper select,
.select-wrapper input[type="date"]{
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 0.75rem 2.5rem 0.75rem 1rem;
  background-color: var(--viewer-accent);
  border: 1px solid var(--viewer-border);
  border-radius: var(--radius);
  color: var(--viewer-ink); font-size: 1rem; font-family: inherit; box-sizing: border-box;
}
.select-wrapper .icon{
  position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);
  pointer-events: none; color: var(--viewer-muted); width: 1rem; height: 1rem;
}

/* ===========================
   ENHETS-LISTA
   =========================== */
.unit-list { position: relative; overflow-y: auto; max-height: calc(100vh - 350px); padding: 1rem; box-sizing: content-box; }
@supports (height: 100dvh){
  .unit-list { max-height: calc(100dvh - 350px); }
}
ul#unit-list { list-style: none; padding: 0; padding-right: 0.5rem; width: 100%; }

.unit-list-item{
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem; margin-bottom: 0.35rem;
  background-color: var(--viewer-surface);
  border-radius: var(--radius);
  border: 1px solid var(--viewer-border);
  cursor: pointer; transition: border-color 0.2s ease, box-shadow .2s ease;
}
.unit-list-item:hover { border-color: var(--viewer-primary); box-shadow: 0 2px 14px rgba(0,0,0,.14); }
.unit-list-item.selected{
  border-color: var(--viewer-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--viewer-primary) 50%, transparent);
}

.unit-list-item > div:first-child { display: flex; flex-direction: column; gap: 0.125rem; }
.unit-id { font-weight: 600; font-size: 1rem; }
.size, .rooms { font-size: 0.875rem; color: var(--viewer-muted); }
.status { font-size: 0.8125rem; color: var(--viewer-muted); text-align: right; }
.price { font-size: 1.125rem; font-weight: 700; color: var(--viewer-success); margin-top: 0.25rem; text-align: right; }

/* ===========================
   3D-VIEW
   =========================== */
#canvas-container{
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  background: var(--viewer-bg);

  /* iOS/touch skydd */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}
#canvas-container canvas { display: block; width: 100% !important; height: 100% !important; }

/* ===========================
   DIALOG (Modal)
   =========================== */
.dialog-backdrop {
  position: fixed;
  inset: 0;                               /* täck hela viewporten */
  z-index: 1300;
  display: flex;
  justify-content: flex-end;              /* placera modalkortet mot höger */
  align-items: flex-start;                /* uppe */
  padding-top: 1rem;
  /* lämna plats för sidebar + padding + modal-gutter */
  padding-right: calc(var(--sidebar-width) + (2 * var(--sidebar-pad)) + var(--modal-gutter));

  /* DESKTOP: inga klick blockas av backdroppen */
  pointer-events: none;
  background: transparent;
}

/* >>> DESKTOP-SCRIM som bara täcker viewer-ytan (för att stänga på klick i viewer) <<< */
.dialog-scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;       /* default: inaktiv */
  background: transparent;
  z-index: 0;                 /* under .dialog men över viewer */
}

/* Endast desktop: gör scrimen klickbar och låt listkolumnen vara öppen */
@media (min-width:1025px){
    /* Låt 3D-viewern få alla klick/drag/hover */
    pointer-events: none;
    right: calc(var(--sidebar-width) + (2 * var(--sidebar-pad)) + var(--modal-gutter));
    cursor: default;
}

/* Själva kortet */
.dialog{
  background-color: var(--viewer-surface);
  color: var(--viewer-ink);
  padding: 2rem;
  border-radius: var(--radius);
  width: clamp(16rem, 20vw, 22rem);
  max-width: 22rem;
  border: 1px solid var(--viewer-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(-20px) scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: auto;                   /* tillåt interaktion i kortet */
  position: relative;
  z-index: 1;                             /* över scrimen */
  cursor: default;                        /* ingen hand-pekare i kortet */
}

/* Visa/animera in kortet (gäller båda lägen) */
.dialog-backdrop.visible .dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* MOBIL/TABLET: topp-ankrad med scrim + fånga klick för att stänga */
@media (max-width: 1024px){
  .dialog-backdrop{
    justify-content: center;              /* centrera horisontellt */
    align-items: flex-start;              /* topp */
    padding: calc(var(--safe-top) + 12px) 1rem 1rem;
    padding-right: 1rem;                  /* ignorera desktophögerpadding */
    background: rgba(0,0,0,.35);

    /* MOBIL: backdroppen fångar klick (scrim-close) */
    pointer-events: auto;
    cursor: pointer;
  }
  .dialog{
    width: min(92vw, 28rem);
    max-width: 28rem;
    border-radius: 16px;
    margin-top: 0;
  }
}

/* Dialog-innehåll */
.floorplan-wrapper{
  margin: 1.5rem 0;
  background: var(--viewer-accent);
  padding: 12px;
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  text-align: center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: 220px; /* desktop default */
}
.floorplan-image{
  display:block;
  max-width:100%;
  max-height:260px;
  height:auto;
  object-fit:contain;
  border-radius: 8px;
}
.floorplan-ph{
  color: color-mix(in srgb, var(--viewer-ink) 60%, transparent);
  text-align:center;
  font-size:14px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.floorplan-ph .ph-icon{
  width:56px; height:56px;
  border:1px dashed color-mix(in srgb, var(--viewer-border) 70%, #2b3240);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; opacity:.8;
}

.dialog-title{ font-size: 1.5rem; margin-bottom: 1rem; }
.dialog-subtitle{ font-size: 1.1rem; margin-bottom: 0.5rem; }
.dialog-section{ margin-bottom: 1.5rem; }
.dialog-row{
  display: flex; justify-content: space-between;
  padding: 0.4rem 0; border-bottom: 1px solid var(--viewer-border);
  font-size: 0.95rem; color: var(--viewer-ink);
}
.feature-badges{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feature-badge{ background-color: var(--viewer-accent); color: color-mix(in srgb, var(--viewer-ink) 75%, transparent); padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; }
.status-badge{ padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.85rem; text-transform: capitalize; }
.status-badge.till-salu{ background-color: #dcfce7; color: #16a34a; }
.status-badge.såld{ background-color: #fee2e2; color: #dc2626; }
.status-badge.reserverad{ background-color: #fef3c7; color: #d97706; }

/* === Status-färger i listan (matchar JS: statusClass) ==================== */
/* Tokens för konsekvent tema */
:root{
  --status-sale:     #22c55e;  /* Till salu (grön) */
  --status-reserved: #f59e0b;  /* Reserverad (amber) */
  --status-sold:     #ef4444;  /* Såld (röd) */
  --status-coming:   var(--viewer-muted); /* Kommande (muted) */
  --status-booked:   #8b5cf6;  /* Bokad (lila – matcha model UI) */
}

/* Bas */
.status-text{
  font-size: .8125rem;
  text-align: right;
  color: var(--viewer-muted);
}

/* Exakta klasser från main.js → statusClass(...) */
.status-text.is-sale     { color: var(--viewer-muted); }
.status-text.is-reserved { color: var(--status-reserved); }
.status-text.is-sold     { color: var(--status-sold); }
.status-text.is-coming   { color: var(--status-coming); font-style: italic; }
.status-text.is-booked   { color: var(--status-booked); }

/* (Valfritt legacy-stöd om backend ibland skickar svensk klass) */
.status-text['till-salu'],
.status-text.till-salu   { color: var(--status-sale); }
.status-text.reserverad  { color: var(--status-reserved); }
.status-text.såld        { color: var(--status-sold); }
.status-text.kommande    { color: var(--status-coming); font-style: italic; }

/* === Prisfärger ========================================================== */
/* Gör standardpriset neutralt, och styr via de klasser JS redan sätter */
.price{
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--viewer-muted);       /* neutral som bas */
  margin-top: 0.25rem;
  text-align: right;
}

.unit-list-item .price{
  color: var(--viewer-silver);
  font-weight: 400;
  font-size: 1rem;       /* ner från 1.125rem */
}

/* Endast "Till salu" → behåll grön & vikt */
.price.price--green{
  color: var(--status-sale);
  font-weight: 700;
  font-size: 1.125rem;   /* får gärna vara större när aktiv */
}

/* === Modalens badge för Bokad (följ modellen = lila) ===================== */
.status-badge.bokad{
  background-color: color-mix(in srgb, var(--status-booked) 18%, white);
  color: var(--status-booked);
}



/* Hovereffekt för stäng-knappen (X) */
/* Stängknapp (X) – rätt position + hovereffekt + aura-ring */
.dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;

  font-size: 1.5rem;
  color: color-mix(in srgb, var(--viewer-ink) 70%, transparent);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;

  transition:
    transform .15s ease,
    background-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
  position: absolute; /* viktigt: behåll absolut position i dialogen */
  z-index: 2;
}

/* Hover & focus – "pop" + ljus bakgrund + aura */
.dialog-close:hover,
.dialog-close:focus-visible {
  transform: scale(1.1);
  background-color: color-mix(in srgb, var(--viewer-accent) 85%, #fff 10%);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  color: var(--viewer-primary);
}

/* Blå aura-ring */
.dialog-close::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid color-mix(in srgb, var(--viewer-primary) 60%, transparent);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.dialog-close:hover::after,
.dialog-close:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

/* Klickrespons */
.dialog-close:active {
  transform: scale(0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}



/* Footerknappar */
/* === Modal footer: grid överallt + support för 3 synliga === */
.dialog-footer{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 1.5rem;
}
.dialog-footer > *{
  width: 100%;
  justify-content: center;
  min-width: 0;              /* förhindra overflow från lång text */
}
/* När vi har exakt 3 synliga knappar sätter JS klass på sista. */
.dialog-footer.has-3 .is-last{
  grid-column: 1 / -1;       /* helbredd under de två andra */
}


/* 4 knappar: visa 2 × 2 på desktop */
@media (min-width: 769px){
  .dialog-footer.grid-2x2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dialog-footer.grid-2x2 .primary-btn,
  .dialog-footer.grid-2x2 .secondary-btn,
  .dialog-footer.grid-2x2 a.secondary-btn{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px){
  .dialog-footer.grid-2x2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }

  /* (valfritt men bra) låt grid styra storleken */
  .dialog-footer.grid-2x2 .primary-btn,
  .dialog-footer.grid-2x2 .secondary-btn,
  .dialog-footer.grid-2x2 a.primary-btn,
  .dialog-footer.grid-2x2 a.secondary-btn{
    flex: initial;   /* om något flex "hänger kvar" */
    width: 100%;
    justify-content: center;
  }
}

.primary-btn, .secondary-btn{
  flex: 1; padding: 0.7rem; border: none; border-radius: var(--radius); font-size: 0.95rem; cursor: pointer;
}
.primary-btn{ background-color: var(--viewer-primary); color: #fff; }
.secondary-btn{ background-color: var(--viewer-accent); color: var(--viewer-ink); }

/* ===========================
   BUTTON (global)
   =========================== */
button:not(.room-btn):not(.action-chip):not(.sidebar-toggle):not(.sun-toggle):not(.dialog-close):not(.list-fab):not(.canvas-float-btn){
  padding: 10px 16px;
  background-color: var(--btn-bg, var(--viewer-primary));
  color: var(--btn-fg, #fff);
  border: var(--btn-border, none);
  border-radius: var(--btn-radius, var(--radius));
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .02s ease;
}
button:not(.room-btn):not(.action-chip):not(.sidebar-toggle):not(.sun-toggle):not(.dialog-close):not(.list-fab):not(.canvas-float-btn):hover{
  background-color: var(--btn-bg-hover, color-mix(in srgb, var(--viewer-primary) 85%, #000 15%));
}
button:not(.room-btn):not(.action-chip):not(.sidebar-toggle):not(.sun-toggle):not(.dialog-close):not(.list-fab):not(.canvas-float-btn):active{
  transform: translateY(.5px);
}


/* ===========================
   SWITCH
   =========================== */
.switch-wrapper{
  display: inline-flex !important; align-items: center; gap: 0.6rem;
  margin: 0; font-size: 0.9rem; color: var(--viewer-muted);
  cursor: pointer; user-select: none;
}
.switch-wrapper input[type="checkbox"]{ display: none; }
.switch{
  width: 42px; height: 24px; background-color: var(--viewer-border);
  border-radius: 9999px; position: relative; flex-shrink: 0; transition: background-color 0.2s ease, border-color .2s ease;
  border: 1px solid color-mix(in srgb, var(--viewer-border) 80%, #000);
}
.switch::before{
  content: ""; position: absolute; width: 18px; height: 18px; top: 2.5px; left: 2.5px;
  background-color: #fff; border-radius: 9999px; transition: transform 0.2s ease;
}
.switch-wrapper input[type="checkbox"]:checked + .switch{
  background-color: var(--viewer-primary); border-color: var(--viewer-primary);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--viewer-primary) 22%, transparent);
}
.switch-wrapper input[type="checkbox"]:checked + .switch::before{ transform: translateX(18px); }
.switch-label{ display: inline-block; line-height: 1; transform: translateY(1px); }

/* ===========================
   GEMENSAM TOOLBAR (POI + actions)
   =========================== */
.viewer-toolbar{
  position: absolute;
  top:  calc(var(--safe-top) + var(--ui-top) + 10px);
  left: calc(var(--safe-left) + 12px);
  z-index: 30;

  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;

  background: color-mix(in srgb, var(--viewer-surface) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--viewer-border) 70%, transparent);
  border-radius: var(--radius);
  padding: .5rem .6rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  max-width: min(92vw, 680px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.viewer-toolbar::-webkit-scrollbar{ height: 6px; }

.viewer-toolbar .toolbar-seg{
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  margin-right: .3rem;
}

/* Actionchips */
.action-chip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: color-mix(in srgb, var(--viewer-surface) 92%, transparent);
  color: var(--viewer-ink);
  border: 1px solid color-mix(in srgb, var(--viewer-border) 60%, transparent);
  border-radius: 999px;
  padding: .46rem .78rem;
  margin-left: 0.45rem;
  font-size: .9rem;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .02s ease;
}
.action-chip .icon{ width: 1rem; height: 1rem; }
.action-chip:hover{
  background: color-mix(in srgb, var(--viewer-surface) 96%, transparent);
  border-color: color-mix(in srgb, var(--viewer-border) 40%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.action-chip:active{ transform: translateY(0.5px); }
.action-chip:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--viewer-primary) 70%, transparent);
  outline-offset: 1px;
}

/* ===========================
   KOMPASS
   =========================== */
.compass, #compass, .compass-container, #compass-container, #bv-compass {
  position: absolute;
  top: calc(
    var(--safe-top) + var(--ui-top) + var(--toolbar-h, 90px) + var(--compass-gap)
  );
  left: calc(var(--safe-left) + 12px);
  width: 72px; height: 72px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 25;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: #111827;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Mobil: upp till vänstra övre hörnet */
@media (max-width:1024px){
	:root{ --compass-gap: 10px; } /* lite tajtare på mobil */
  .compass, #compass, .compass-container, #compass-container, #bv-compass{
    top:  calc(var(--safe-top) + var(--ui-top) + 10px) !important;
    left: calc(var(--safe-left) + 12px) !important;
    bottom: auto !important;
    right:  auto !important;
    width: 56px; height: 56px;
  }
}
@media (max-width:380px){
  .compass, #compass, .compass-container, #compass-container, #bv-compass{
    width: 52px; height: 52px;
  }
}

/* ===========================
   SOLPANEL
   =========================== */
.sun-slider-container{
  position: absolute;
  left: 1.5rem;
  right: calc(var(--sidebar-width) + 1.5rem);
  bottom: calc(var(--safe-bottom) + var(--ui-bottom) + 2rem);
  display: flex; justify-content: center; z-index: 100;
}
.sun-slider{
  display: flex; align-items: center; gap: 1rem;
  background-color: var(--viewer-surface);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--viewer-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  width: 66%;
  max-width: 980px;
  min-width: 560px;
}
.sun-row{
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .75rem;
}
.sun-row .icon{ color: var(--viewer-muted); width: 20px; height: 20px; }
.sun-row input[type="range"]{
  -webkit-appearance: none; width: 100%; height: 6px;
  background: var(--viewer-border); border-radius: 9999px; outline: none;
}
.sun-row input[type="range"]::-webkit-slider-thumb,
.sun-row input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px; background: var(--viewer-primary); border-radius: 50%;
  border: none; cursor: pointer;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--viewer-primary) 20%, transparent);
}
#sun-time{ font-size: .9rem; color: var(--viewer-muted); min-width: 60px; text-align: right; }

.sun-advanced{
  display: flex; align-items: center; gap: .75rem; justify-content: space-between;
}
.sun-date-wrapper{
  display: flex; align-items: center; gap: 0.5rem;
  background-color: var(--viewer-accent); padding: 0.4rem 0.75rem;
  border-radius: 8px; border: 1px solid var(--viewer-border);
}
.sun-date-wrapper .icon{ color: var(--viewer-muted); width: 1rem; height: 1rem; }
.sun-date-wrapper input[type="date"]{
  background: transparent; border: none; color: var(--viewer-ink);
  font-size: 0.875rem; font-family: inherit; outline: none; cursor: pointer;
}

/* —— Desktop: platta ut raderna —— */
@media (min-width:1025px){
  .sun-row, .sun-advanced{ display: contents; }
}

/* ——— Mobil/Tablet: bottom-sheet ——— */
@media (max-width:1024px){
  .sun-scrim,
  .actions-scrim{
    display: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
  body.sun-open .sun-scrim,
  body.actions-open .sun-scrim{
    opacity: 1; pointer-events: auto;
  }

  .sun-slider-container,
  .actions-panel{
    position: fixed;
    left:  calc(var(--safe-left) + 12px);
    right: calc(var(--safe-right) + 12px);
    bottom: calc(var(--safe-bottom) + 12px + var(--nav-h));
    z-index: 2000;
    pointer-events: none;
    display:block;
  }

  .sun-slider{
    pointer-events: auto;
    background: var(--viewer-surface);
    border: 1px solid var(--viewer-border);
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    transform: translateY(110%);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    gap: .6rem;
    margin: 0 auto;
    flex-direction: column; align-items: stretch; gap: .75rem;
  }
  body.sun-open .sun-slider{ transform: translateY(0); opacity:1; }

  .actions-sheet{
    pointer-events: auto;
    background: var(--viewer-surface);
    border: 1px solid var(--viewer-border);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    transform: translateY(110%);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    max-width: 640px;
    width: auto;
    overflow: visible;
    margin: 0 auto;
  }
  body.actions-open .actions-sheet{ transform: translateY(0); opacity:1; }

  body.sun-open.actions-open .actions-sheet{ transform: translateY(110%); opacity:0; }
  body.sun-open.actions-open .sun-slider { transform: translateY(0);   opacity:1; }

  .sun-row{ width: 100%; margin-bottom: .25rem; min-width: 0; gap: .6rem; }
  .sun-row .icon{ width: 18px; height: 18px; }
  #sun-time{ font-size: .85rem; min-width: 54px; }
  .sun-row input[type="range"]{ height: 8px; }
  .sun-row input[type="range"]::-webkit-slider-thumb,
  .sun-row input[type="range"]::-moz-range-thumb{ width: 22px; height: 22px; }

  .sun-advanced{ display: flex; gap: .75rem; justify-content: space-between; width: 100%; }
  .sun-date-wrapper{ flex: 1 1 auto; }
  .sun-switch{ margin-left: auto; }
}

/* Riktigt små skärmar */
@media (max-width:380px){
  .sun-slider{ padding: 8px 10px; gap: .5rem; }
  .sun-row{ gap: .5rem; }
  .sun-row .icon{ width: 16px; height: 16px; }
  #sun-time{ font-size: .8rem; min-width: 48px; }
  .sun-row input[type="range"]{ height: 6px; }
  .sun-row input[type="range"]::-webkit-slider-thumb,
  .sun-row input[type="range"]::-moz-range-thumb{ width: 18px; height: 18px; }
}

/* ===========================
   FABs: Lista & Sol (mobil)
   =========================== */
.sidebar-toggle{
  position: fixed;
  right: 1rem;
  bottom: calc(var(--safe-bottom) + var(--ui-bottom) + var(--sunbar-offset));
  z-index: 1202;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--viewer-surface); color: var(--viewer-ink);
  border: 1px solid var(--viewer-border); border-radius: 999px;
  padding: .6rem 1rem; font-size: .95rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.sidebar-toggle .icon{ width: 1.2rem; height: 1.2rem; }
@media (min-width:1025px){ .sidebar-toggle{ display:none; } }

.sun-toggle{
  position: fixed;
  right: calc(1rem + 120px);
  bottom: calc(var(--safe-bottom) + var(--ui-bottom) + var(--sunbar-offset));
  z-index: 1202;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--viewer-surface); color: var(--viewer-ink);
  border: 1px solid var(--viewer-border); border-radius: 999px;
  padding: .6rem 1rem; font-size: .95rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.sun-toggle .icon{ width: 1.2rem; height: 1.2rem; }
@media (min-width:1025px){ .sun-toggle{ display:none; } }

/* ===========================
   FILTERGRUPPER + RANGE
   =========================== */
.filter-group{ margin-bottom: 1.5rem; }
.filter-group label{ display: block; font-size: 0.875rem; font-weight: 600; color: var(--viewer-muted); margin-bottom: 0.5rem; }
.range-display{ display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--viewer-muted); margin-bottom: 0.25rem; }



/* ===========================
   RUMSKNAPPAR (pill buttons)
   =========================== */
.room-filter-buttons{
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin: .5rem 0 1.25rem;
}
.room-btn{
  background: color-mix(in srgb, var(--viewer-surface) 96%, transparent);
  color: color-mix(in srgb, var(--viewer-ink) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--viewer-border) 70%, transparent);
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.room-btn:hover{
  background: color-mix(in srgb, var(--viewer-surface) 98%, transparent);
  border-color: color-mix(in srgb, var(--viewer-border) 55%, transparent);
}
.room-btn.active{
  background: var(--viewer-primary);
  border-color: var(--viewer-primary);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.room-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--viewer-primary) 70%, transparent);
  outline-offset: 1px;
}

/* ===========================
   noUiSlider Anpassad Stil
   =========================== */
.noUi-target{ background: var(--viewer-border) !important; border: none !important; border-radius: 9999px !important; height: 3px !important; box-shadow: none !important; }
.noUi-connect{ background: var(--viewer-primary) !important; }
.noUi-handle{
  width: 16px !important; height: 16px !important; top: -6px !important; background: var(--viewer-primary) !important;
  border: 2px solid var(--viewer-surface) !important; border-radius: 50% !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--viewer-primary) 20%, transparent) !important; cursor: pointer !important;
}
.noUi-handle::before, .noUi-handle::after{ display: none !important; }
.noUi-horizontal .noUi-handle{ transform: translateY(-50%); top: 50% !important; }
.range-slider{ margin-bottom: 1.25rem; }
.range-slider .range-label{ font-size: 0.875rem; font-weight: 700; color: var(--viewer-muted); margin-bottom: 1rem; display: block; }
.range-slider .range-values{ display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--viewer-muted); margin-top: 1rem; }

/* ===========================
   GLOBAL SCROLLBAR
   =========================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb{
  background-color: color-mix(in srgb, var(--viewer-border) 90%, #3b3b3d);
  border-radius: 6px; border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ background-color: color-mix(in srgb, var(--viewer-border) 70%, #555); }
*{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--viewer-border) 70%, #555) transparent; }

/* ===========================
   EMBED-LÄGE
   =========================== */

/* ===========================
   Extra robusthet / iOS
   =========================== */
.container { min-height: 100vh; }

@supports (-webkit-touch-callout: none) {
  .viewer-toolbar,
  #bv-loader,
  #bv-compass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.96);
  }
}

/* Dölj vanliga debug-overlays */
#eruda, .eruda-entry-btn, .eruda-container,
#dimensions-overlay, .dimensions-overlay,
.vv-debug, #vv-debug, [data-vv-debug],
.___vb, .devtools-size-overlay{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===========================
   MODAL – MOBIL förfiningar (≤768px)
   =========================== */
@media (max-width: 768px){
  .floorplan-wrapper{ min-height: 140px; padding: 6px; }
  .floorplan-image{ max-height: 140px; }

  /* Dölj feature-badges för kompakt vy */
  .features-section, .feature-badges, .feature-badge { display: none !important; }

  .dialog-footer{
    position: sticky; bottom: 0; z-index: 1;
    margin-top: auto; padding-top: .75rem;
    padding-bottom: max(.25rem, env(safe-area-inset-bottom, 0px));
    gap: .5rem;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--viewer-surface) 100%, transparent) 70%,
      transparent 100%
    );
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .primary-btn, .secondary-btn{
    padding: .55rem .6rem;
    font-size: .9rem;
    border-radius: 10px;
    white-space: nowrap;
  }
}

/* Gör knappar/ankare identiska i modalfotern */
.dialog-footer .primary-btn,
.dialog-footer .secondary-btn,
.dialog-footer a.primary-btn,
.dialog-footer a.secondary-btn{
  display: inline-flex;             /* samma boxmodell */
  align-items: center;              /* vertikal centering */
  justify-content: center;          /* horisontell centering */
  width: 100%;                      /* fyll gridcellen */
  box-sizing: border-box;
  line-height: 1;                   /* jämn höjd */
  font-weight: 600;                 /* <a> matchar <button> */
  -webkit-appearance: none;         /* jämna ut webkit-knas */
  text-decoration: none;            /* säkerställ ingen underline */
}

/* 4 knappar: 2×2-layout på desktop */
@media (min-width: 769px){
  .dialog-footer.grid-2x2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Flexvärdet från tidigare block kan ge ojämnheter i grid — nollställ */
  .dialog-footer.grid-2x2 .primary-btn,
  .dialog-footer.grid-2x2 .secondary-btn,
  .dialog-footer.grid-2x2 a.primary-btn,
  .dialog-footer.grid-2x2 a.secondary-btn{
    flex: initial;
  }
}

/* Hovereffekt på modalknappar */
.dialog-footer .primary-btn,
.dialog-footer .secondary-btn,
.dialog-footer a.primary-btn,
.dialog-footer a.secondary-btn {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Primär knapp (blå) */
.dialog-footer .primary-btn:hover,
.dialog-footer a.primary-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  background-color: color-mix(in srgb, var(--viewer-primary) 85%, #fff 15%);
}

/* Sekundär knapp (ljus) */
.dialog-footer .secondary-btn:hover,
.dialog-footer a.secondary-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  background-color: color-mix(in srgb, var(--viewer-accent) 90%, #fff 10%);
}


/* Modal överst (säkerhetsbälte överallt) */
.dialog{ z-index: 1301; }

/* Göm FABs och kompass när modal är öppen (mobil/iPad) */
@media (max-width:1024px){
  body.modal-open .sidebar-toggle,
  body.modal-open .sun-toggle,
  body.modal-open #bv-compass{
    display: none !important;
  }
}

/* Dölj hover-info på touch-enheter */
@media (hover: none){
  #hover-info-box,
  .hover-info,
  .unit-hover-popover,
  #unit-hover-tip{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Desktop default: göm bottennav + verktygspanel helt */
.bottom-nav{ display: none; }
.actions-panel{ display: none; }

/* ===== Bottennav (mobil) ===== */

/* Dölj FABs helt som default (desktop) */
.list-fab, .sun-fab, .actions-fab{ display:none; }

@media (max-width:1024px){
  .viewer-toolbar{ display:none !important; }

  #bv-nav-sun  { order: 1; }
  #bv-nav-act  { order: 2; }
  #bv-nav-list { order: 3; }

  .bottom-nav{
    position: fixed;
    left:  max(12px, var(--safe-left));
    right: max(12px, var(--safe-right));
    bottom: calc(var(--safe-bottom) + 8px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 10px 12px;
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
  }
  body:is(.sun-open, .actions-open, .sidebar-open) .bottom-nav{
    transform: translateY(150%);
    pointer-events: none;
  }

  .bottom-nav button{
    /* bara färgerna hämtas från chip-paletten */
    --btn-bg:       var(--chip-bg);
    --btn-fg:       var(--chip-ink);
    --btn-border:   1px solid var(--chip-border);
    --btn-bg-hover: var(--chip-bg-hover);

    border-radius: 10px;
    padding: 8px 8px;
    font: 600 .88rem/1.05 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    transition: transform .12s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  }
  .bottom-nav .icon{ width:18px; height:18px; }
  .bottom-nav button.is-active:hover{
    background: var(--chip-active-bg);
    border-color: var(--chip-active-border);
    color: var(--chip-active-ink);
  }
  .bottom-nav button.is-active{
    --btn-bg:     var(--chip-active-bg);
    --btn-fg:     var(--chip-active-ink);
    --btn-border: 1px solid var(--chip-active-border);
  }
  .bottom-nav button.is-active::after{
    content:""; width: 8px; height: 8px; border-radius:999px; margin-top:2px;
    background:#fff; opacity:.9;
  }

  /* Paneler + scrim (same) */
  body.sun-open .sun-scrim{ display: block; pointer-events: auto; }
  body.actions-open .actions-scrim{ display: block; pointer-events: auto; }

  .sun-slider-container,
  .actions-panel{
    display: block;
    position: fixed;
    left:  calc(var(--safe-left) + 12px);
    right: calc(var(--safe-right) + 12px);
    bottom: calc(var(--safe-bottom) + 12px);
    z-index: 1302;
    pointer-events: none;
  }
  .sun-slider,
  .actions-sheet{
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    transform: translateY(110%);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    margin: 0 auto;
  }
  body.sun-open .sun-slider{ transform: translateY(0); opacity: 1; }
  body.actions-open .actions-sheet{ transform: translateY(0); opacity: 1; }
  body.sun-open.actions-open .actions-sheet{ transform: translateY(110%); opacity:0; }
  body.sun-open.actions-open .sun-slider { transform: translateY(0);   opacity:1; }

  /* FABs – mobil */
  :root{
    --fab-in-duration: 520ms;
    --fab-out-duration: 320ms;
    --fab-ease: cubic-bezier(.16,1,.3,1);
    --fab-gap: 68px;
  }

  @keyframes fab-in-pop {
    0%   { transform: translate3d(160%,0,0) scale(.90); opacity: 0; }
    60%  { transform: translate3d(-2%,0,0)  scale(1.06); opacity: 1; }
    100% { transform: translate3d(0,0,0)    scale(1.00); opacity: 1; }
  }

  .list-fab,
  .sun-fab,
  .actions-fab {
    display: grid;
    position: fixed;
    z-index: 1305;
    width: 56px; height: 56px; border-radius: 50% !important; place-items: center;
    border: 1px solid var(--viewer-primary);
    background: var(--viewer-primary); color: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    transform: translate3d(160%,0,0) scale(.9);
    opacity: 0; pointer-events: none;
    transition-property: transform, opacity, background-color, box-shadow;
    transition-duration: var(--fab-out-duration), var(--fab-out-duration), .18s, .18s;
    transition-timing-function: var(--fab-ease), ease, ease, ease;
    will-change: transform, opacity;
  }

  :root{
    --fab-y-list:    calc(var(--safe-bottom) + 16px);
    --fab-y-sun:     var(--fab-y-list);
    --fab-y-actions: var(--fab-y-list);
    --fab-x-sun:     max(12px, var(--safe-right));
    --fab-x-actions: max(12px, var(--safe-right));
  }

  .list-fab{ right: max(12px, var(--safe-right)); bottom: var(--fab-y-list); }
  .sun-fab{ right: var(--fab-x-sun); bottom: var(--fab-y-sun); }
  .actions-fab{ right: var(--fab-x-actions); bottom: var(--fab-y-actions); }

  .list-fab.visible, .sun-fab.visible, .actions-fab.visible{
    pointer-events: auto; animation: fab-in-pop var(--fab-in-duration) var(--fab-ease) both;
  }
  .list-fab.hiding, .sun-fab.hiding, .actions-fab.hiding{
    transform: translate3d(160%,0,0) scale(.92); opacity: 0; pointer-events: none;
  }

  body.modal-open .list-fab,
  body.modal-open .sun-fab,
  body.modal-open .actions-fab{
    transform: translate3d(160%,0,0) scale(.9);
    opacity: 0; pointer-events: none; animation: none;
  }

  body.modal-open .bottom-nav{ transform: translateY(150%); }
}

/* Tillgänglighet: minimera rörelse */
@media (prefers-reduced-motion: reduce){
  .list-fab, .sun-fab, .actions-fab{
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
}

/* === FIX: Solstudie-toolbar ska aldrig sticka ut på mobil === */
@media (max-width:1024px){
  .sun-slider{
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
  }
  .sun-row, .sun-advanced, .sun-date-wrapper{ min-width: 0 !important; }
  .sun-advanced{
    display: grid !important;
    grid-template-columns: 1fr auto; /* datum | switch */
    align-items: center;
    gap: .5rem;
  }
  .sun-date-wrapper input[type="date"]{ width: 100%; min-width: 0; }
  #sun-time{ min-width: 48px; }
}

/* Micro-bump när kortet uppdateras (desktop) */
@keyframes dialog-swap-bump {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-2px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}
.dialog-swap {
  animation: dialog-swap-bump 200ms cubic-bezier(.2,.8,.2,1);
}

/* Tunna highlight-ring som tonar ut */
@keyframes dialog-swap-ring {
  0%   { opacity: .55; }
  100% { opacity: 0; }
}
.dialog-swap::after {
  content:"";
  position: absolute; inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--viewer-primary) 65%, transparent);
  pointer-events: none;
  animation: dialog-swap-ring 360ms ease-out both;
}

/* Respektera “minska rörelse” */
@media (prefers-reduced-motion: reduce){
  .dialog-swap { animation: none; }
  .dialog-swap::after { animation: none; opacity: 0; }
}

/* Riktigt små skärmar: göm texten “Solstudie” */
@media (max-width:380px){
  .sun-switch .switch-label{ display:none !important; }
}

/* === Kontaktmodal (premium) === */
body.contact-modal-open { overflow: hidden; }

.contact-backdrop{
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--viewer-bg,#0f1117) 70%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s ease;
  z-index: 1600;
  display: grid; place-items: center;
  padding: 24px;
}
.contact-backdrop.visible{ opacity: 1; }

.contact-dialog{
  width: min(980px, 94vw);
  max-height: min(86vh, 1000px);
  overflow: auto;
  background: var(--viewer-surface,#181a20);
  color: var(--viewer-ink,#fff);
  border: 1px solid var(--viewer-border,#2a2d35);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.25);
  padding: 28px 28px 22px;
  transform: translateY(10px) scale(.98);
  opacity: 0;
}
.contact-dialog.cm-in{
  animation: cmIn .24s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes cmIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{   opacity:1; transform: none; }
}

.contact-title{
  margin: 0 0 18px 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: .2px;
}

.contact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){ .contact-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .contact-grid{ grid-template-columns: 1fr; } }

.cm-card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--viewer-surface,#181a20) 96%, transparent), var(--viewer-surface,#181a20));
  border: 1px solid var(--viewer-border,#2a2d35);
  border-radius: 16px;
  padding: 18px 16px 14px;
  display: grid; justify-items: center; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cm-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border-color: color-mix(in srgb, var(--viewer-primary,#3c84f8) 40%, var(--viewer-border,#2a2d35));
}

.cm-avatar-wrap{ margin-bottom: 10px; }
.cm-avatar{
  width: 140px; height: 140px; border-radius: 999px; object-fit: cover;
  border: 2px solid var(--viewer-border,#2a2d35);
}
.cm-avatar-fallback{
  width: 140px; height: 140px; border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 42px;
  background: var(--viewer-accent,#1f2229);
  border: 2px solid var(--viewer-border,#2a2d35);
}

.cm-name{ font-weight: 700; font-size: 16px; }
.cm-title{ color: var(--viewer-muted,#a7b0bf); margin-top: 2px; margin-bottom: 8px; }
.cm-title--empty{ visibility: hidden; }

.cm-ctas{ display:flex; gap: 8px; margin-bottom: 8px; }
.cm-meta{ font-size: 12px; color: var(--viewer-muted,#a7b0bf); line-height: 1.35; }

.contact-actions-global{ margin-top: 16px; display:flex; justify-content:center; gap: 10px; }

/* Kontaktmodal – mobil: använd samma “luft” som vanliga modalen */
@media (max-width:1024px){
  .contact-backdrop{
    justify-content: center;
    align-items: flex-start;
    padding: calc(var(--safe-top) + 12px) 1rem 1rem;
    background: rgba(0,0,0,.35);
    pointer-events: auto;
  }
  .contact-dialog{
    width: min(92vw, 28rem);
    max-width: 28rem;
    border-radius: 16px;
    padding: 16px 14px 12px;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
  }
}

/* Stängknapp i kontaktmodalen (återanvänd .dialog-close, ge bra tapp-yta) */
.contact-dialog .dialog-close{
  top: .75rem;
  right: .75rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

/* Kontaktmodal – mobil kort/grid-förfining */
@media (max-width: 768px){
  .contact-grid{ grid-template-columns: 1fr !important; gap: 12px; }
  .cm-card{ padding: 14px 12px; border-radius: 14px; }
  .cm-avatar, .cm-avatar-fallback{ width: 96px; height: 96px; font-size: 32px; }
  .cm-name{ font-size: 15px; }
  .cm-title{ font-size: 13px; margin-bottom: 6px; }
  .cm-ctas{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cm-ctas .btn{ width: 100%; padding-inline: 0; }
  .cm-meta{ font-size: 12px; word-break: break-word; }
}
@media (max-width: 380px){
  .cm-ctas{ grid-template-columns: 1fr; }
}


/* === Hotspot DOM-overlay (TA BORT HELT om du bara kör 3D-hotspots) === */
/* Behåll detta block endast om du fortfarande använder #bv-hotspot-layer i HTML */
#bv-hotspot-layer {
  position: fixed;
  inset: 0;
  pointer-events: none; /* knapparna slår på sin egen */
  z-index: 999;
}
#bv-hotspot-layer .bv-hotspot {
  position: absolute;
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.7);
  background: #3b82f6;
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.25);
  transform: translate(-50%, -50%);
  transition: transform .15s ease, box-shadow .15s ease;
}
#bv-hotspot-layer .bv-hotspot:hover {
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.35);
}

/* === Hotspot-modal (används av openHotspotModal) === */
body.modal-open { overflow: hidden; }

.bv-hs-card{
  width: min(96vw, 960px);
  max-height: 90vh;
}
.bv-hs-body{ padding: 14px 16px; }
.bv-hs-title{ font-size: 18px; }

.bv-hs-media > iframe,
.bv-hs-media > canvas,
.bv-hs-media > img{
  display: block;
  width: 100%;
  height: min(70vh, 700px);
  border: 0;
}

/* Mobilanpassning */
@media (max-width: 768px){
  .bv-hs-card{
    width: min(92vw, 28rem);
    max-height: calc(100dvh - 16px);
  }
}

/* Subtil 360-hjälp i nya panoraman */
.bv-pano-hint{
  position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:10px;
  background:rgba(2,6,23,.65); color:#e5e7eb; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:8px 10px; font: 600 13px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: 0 10px 28px rgba(0,0,0,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity:1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.bv-pano-hint .badge{
  background:#0ea5e9; color:#081018; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:800;
}
.bv-pano-hint .txt{ opacity:.95; }
.bv-pano-hint.hide{ opacity:0; transform: translateY(6px); }

.viewer-toolbar { pointer-events: none; }
.viewer-toolbar .toolbar-seg,
.viewer-toolbar .action-chip,
.viewer-toolbar label { pointer-events: auto; }

/* 100% säkert: allt med [hidden] ska vara helt borta */
#hero-overlay [hidden] { display: none !important; }

#hero-overlay {
  position: absolute; inset: 0;
  background: var(--viewer-surface, #000); /* täcker 3D tills media laddats */
  z-index: 1040;
  transition: opacity .28s ease;
}
#hero-overlay.is-hidden { opacity: 0; pointer-events: none; }

#hero-overlay > video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  z-index:1;                /* ⬅️ Ligger under CTA */
}

#hero-overlay.is-hidden{ opacity:0; pointer-events:none; }
#hero-overlay > img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* === CTA-dock – följer safe areas & iOS UI === */
.hero-cta-dock{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  bottom: auto;                     /* ta bort bottom-ankring */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(92vw, 560px);
  padding: 0 8px;
    z-index:2;   
}

/* Liten justering på riktigt små skärmar – dra upp en aning */
@media (max-width: 420px){
  .hero-cta-dock{
    transform: translate(-50%,-52%);
  }
}

/* Liten etikett under knappen (kan tas bort) */
.hero-cta-hint{
  color:#e5e7eb; opacity:.9; font:600 12px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: rgba(17,24,39,.65);
  border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* === CTA följer temat: var(--viewer-primary) =============================== */
/* Hjälpvariabler (kan läggas i :root om du vill återanvända dem globalt) */
.cta-modern{
  --cta-base: var(--viewer-primary);
  /* lite mörkare ton för gradienten */
  --cta-deeper: color-mix(in srgb, var(--cta-base) 82%, black);
  /* skuggor färgade av temat */
  --cta-shadow-1: color-mix(in srgb, var(--cta-base) 40%, transparent);
  --cta-shadow-2: rgba(0,0,0,.25);

  --cta-h: 52px;
  --cta-pad-x: 18px;
  --cta-radius: 14px;

  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  height: var(--cta-h);
  padding: 0 var(--cta-pad-x);
  border:0; border-radius: var(--cta-radius);
  font: 700 15px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff; cursor:pointer;

  /* fallback om color-mix saknas */
  background-color: var(--cta-base);
  /* tematisk gradient */
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--cta-base) 95%, white),
    var(--cta-deeper)
  );

  box-shadow:
    0 10px 24px var(--cta-shadow-1),
    0 2px 8px var(--cta-shadow-2);

  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease, background-image .2s ease;
}

/* Pulserande aura/attention – tonad av temat */
.cta-modern::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: calc(var(--cta-radius) + 2px);
  background: conic-gradient(from 180deg,
      rgba(255,255,255,.0),
      color-mix(in srgb, var(--cta-base) 45%, white 0%) 45%,
      rgba(255,255,255,.0) 70%);
  filter: blur(6px);
  opacity:.35; z-index:-1;
  animation: cta-glow 2.4s ease-in-out infinite;
}

/* Shine-svep (oförändrat) */
.cta-modern::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(120deg, rgba(255,255,255,.0) 30%,
                           rgba(255,255,255,.45) 48%,
                           rgba(255,255,255,.0) 66%);
  transform: translateX(-140%);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.cta-modern:hover::after,
.cta-modern:focus-visible::after{ transform: translateX(140%); }

/* Hover/focus – använd tema i skugga/ton */
.cta-modern:hover,
.cta-modern:focus-visible{
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--cta-base) 55%, transparent),
    0 3px 10px rgba(0,0,0,.28);
  transform: translateY(-1px);
  outline: none;
  /* subtil ljusning av gradienten */
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--cta-base) 92%, white 8%),
    color-mix(in srgb, var(--cta-base) 78%, black)
  );
}

/* Aktiv-klick */
.cta-modern:active{
  transform: translateY(0);
  filter: saturate(1.05);
}

/* Mjuk fade-in (behåll din klass) */
.cta-modern.cta-in{
  animation: cta-in .24s cubic-bezier(.16,1,.3,1) both;
}

/* Ikonen använder redan currentColor via SVG → funkar med #fff-foreground */


.viewer-toolbar { z-index: 1000; }

.action-chip, .bv-cam-btn {
  touch-action: manipulation;          /* snabbare click, ingen dubbel-tap-zoom */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.bv-cam-btn svg { pointer-events: none; } /* ikon ska inte sno event */

/* viewer-containern måste få faktisk höjd */
#viewer-root, .viewer-container, .viewer-canvas-wrap {
  min-height: 320px;
  height: 100dvh;          /* fyll skärmen */
  max-height: 100dvh;
}

.unit-list-item.flash { animation: bvPulse 0.6s ease; }
@keyframes bvPulse {
  from { background: rgba(59,130,246,.10); }
  to   { background: transparent; }
}


/* ===========================
   FILTER OVERRIDES (kompakt + symmetrisk)
   =========================== */

/* — Basstil — */
.filter-group{ margin-bottom: var(--filter-vspace); }
.filter-group label{ font-size: var(--filter-label-fs); margin-bottom: .4rem; }
.range-display{ font-size: calc(var(--filter-label-fs) - .025rem); margin-bottom: .2rem; }

/* Range (native) storlek via tokens */
.filter-group input[type="range"]{ height: var(--range-track-h); }
.filter-group input[type="range"]::-webkit-slider-thumb,
.filter-group input[type="range"]::-moz-range-thumb{
  width: var(--range-thumb); height: var(--range-thumb);
}

/* Rum-knappar (pills) */
.room-filter-buttons{ gap: var(--room-chip-gap); margin: .4rem 0 calc(var(--filter-vspace) - .25rem); }
.room-btn{
  font-size: var(--room-chip-fs);
  padding: var(--room-chip-pad-y) var(--room-chip-pad-x);
}

/* Lista */
.unit-list{ padding: .75rem; }
.unit-list-item{ padding: var(--list-pad-y); }
.unit-id{ font-size: var(--list-title-fs); }
.size, .rooms, .status{ font-size: var(--list-meta-fs); }
.price{ font-size: var(--list-price-fs); }

/* — noUiSlider: höjd & handtagsplacering — */
.noUi-target{ height: calc(var(--range-track-h) - 2px) !important; }
.noUi-handle{
  width: var(--range-thumb) !important;
  height: var(--range-thumb) !important;
  top: calc(var(--range-thumb)/-2 + var(--range-track-h)/2) !important;
}
/* noUi default har right:-17px → korrigera till -thumb/2 för exakt symmetri */
.noUi-horizontal .noUi-handle{
  right: calc(var(--range-thumb) / -2) !important;
  left: auto !important;
}

/* — Symmetri runt spåret (gäller alla skärmar) — */
:root{
  /* finjustera vid behov (0–4px) */
  --range-gutter: calc(var(--range-thumb) / 2 + 2px);
}
.range-slider{ padding-inline: 0; } /* spåret styr bredden, inte blocket */
.range-slider .noUi-target{
  margin-left:  var(--range-gutter) !important;
  margin-right: var(--range-gutter) !important;
  width: auto !important;
}
/* klipp långa värden under spåren */
.range-slider .range-values span{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* — Rubrik + “Visa endast till salu” i linje — */
.units-header{
  display: flex;
  align-items: baseline;          /* snygg baslinje-linjering */
  justify-content: space-between;
  gap: .75rem;
  margin: .25rem 0 .35rem;
}
.units-header .only-available-switch{ margin: 0; }
.units-header h2{ line-height: 1.2; margin: 0; }
.units-header .switch-label{ transform: none; line-height: 1.2; }

/* — Breakpoints: tokens och kompakta layouter — */

/* Laptop / iPad (≤1200px): lite kompaktare tokens */
@media (max-width: 1200px){
  :root{
    --filter-vspace: 1.1rem;
    --range-track-h: 5px;
    --range-thumb: 16px;
    --room-chip-fs: .86rem;
    --room-chip-pad-y: .38rem;
    --room-chip-pad-x: .72rem;
    --list-pad-y: .65rem;
    --list-title-fs: .95rem;
    --list-meta-fs: .84rem;
    --list-price-fs: 1.05rem;
  }
}

/* Mobil/Tablet (≤768px): kompakt filter + flexad lista */
@media (max-width: 768px){
  :root{
    --filter-vspace: .75rem;
    --filter-label-fs: .8rem;
    --range-track-h: 5px;
    --range-thumb: 20px; /* minst ~20px för bra touch */
    --room-chip-gap: .5rem;
    --room-chip-fs: .84rem;
    --room-chip-pad-y: .35rem;
    --room-chip-pad-x: .75rem;
    --list-pad-y: .5rem;
    --list-title-fs: .9rem;
    --list-meta-fs: .8rem;
    --list-price-fs: 1rem;
  }

  /* gör panelen till kolumn så listan kan växa */
  .sidebar{ display: flex; flex-direction: column; }

  /* Sliders: lite mer luft ovanför spåret, tajtare nedåt */
  .range-slider{ margin-bottom: .25rem; }
  .range-slider .range-label{ margin-bottom: 1rem; line-height: 1.1; }
  .range-slider .noUi-target{ margin-top: .56rem !important; }
  .range-slider .range-values{ margin-top: .45rem; }
  .range-slider + .range-slider{ margin-top: .25rem; }

  /* Mindre aura → ser luftigare ut */
  .noUi-handle{
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--viewer-primary) 20%, transparent) !important;
  }

  /* Rum-chips + rubrik något tajtare */
  .room-filter-buttons{ margin: .3rem 0 .6rem; gap: .4rem; }
  .sidebar h2{ margin: .35rem 0 .4rem; }

  /* Själva listan får ta resterande höjd (korrekt overflow i flex-kolumn) */
  .unit-list{
    flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-y: auto; padding: .5rem; box-sizing: border-box;
  }

  /* Headern lite tajtare på mobil */
  .units-header{ gap: .5rem; margin: .2rem 0 .3rem; }
  .units-header .switch-label{ font-size: .9rem; }
}

/* Riktigt små skärmar (≤380px): extra tajt */
@media (max-width: 380px){
  :root{
    --filter-vspace: .65rem;
    --range-track-h: 4px;
    --room-chip-fs: .82rem;
    --room-chip-pad-y: .3rem;
    --room-chip-pad-x: .58rem;
  }
  /* spara plats: visa bara själva switchen */
  .units-header .switch-label{ display: none; }
}

/* === Kameror: dropdown ==================================================== */
.cam-dropdown{
  position: relative;
  display: inline-block;
}

.cam-trigger{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .46rem .78rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--viewer-surface) 92%, transparent);
  color: var(--viewer-ink);
  border: 1px solid color-mix(in srgb, var(--viewer-border) 60%, transparent);
  font: 600 .9rem/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  cursor: pointer;
}
.cam-trigger:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--viewer-primary) 70%, transparent);
  outline-offset: 1px;
}
.cam-trigger .caret{
  display: inline-block; width: .7rem; height: .7rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .8;
}

.cam-menu{
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px; max-width: 280px; max-height: 320px; overflow: auto;
  background: var(--viewer-surface); color: var(--viewer-ink);
  border: 1px solid var(--viewer-border);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  padding: 6px;
  display: none;
  z-index: 2000;
}
.cam-menu.open{ display: block; }

.cam-item{
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 10px;
  font: 600 .92rem/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color .16s ease, transform .08s ease, box-shadow .16s ease;
}
.cam-item:hover,
.cam-item:focus-visible{
  background: color-mix(in srgb, var(--viewer-surface) 96%, transparent);
  transform: translateX(2px);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.cam-item:focus{ outline: none; }
.cam-item::before{ display: none !important; }       /* ta bort vänster markör */

.cam-item .dot{
  width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px;
  background: var(--viewer-primary); opacity: .85;
  box-shadow: 0 0 0 0 rgba(60,132,248,0);
  transition: box-shadow .25s ease;
}
.cam-item:hover .dot,
.cam-item:focus-visible .dot{
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--viewer-primary) 25%, transparent);
}

/* vald rad */
.cam-item[aria-current="true"]{
  background: color-mix(in srgb, var(--viewer-primary) 14%, var(--viewer-surface));
  color: #fff;
}
.cam-item[aria-current="true"] .dot{
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--viewer-primary) 40%, transparent);
}

/* dölj gamla chip-raden när dropdownen används */
.cam-chips-hidden #cam-chip-row{ display: none !important; }

/* === Mobil: kameraknappar i actions-panel (2 kolumner tills det blir trångt) === */
:root{ --mobile-cam-min: 150px; }  /* justera 150–180px vid behov */

@media (max-width:1024px){
  .actions-panel .viewer-actions [data-mobile-cams]{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mobile-cam-min), 1fr));
    gap: 10px;
    align-items: stretch;
  }

  /* Nollställ ev. wrappers så knapparna fyller cellerna */
  .actions-panel .viewer-actions [data-mobile-cams] > *{
    grid-column: auto !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
  }

  /* Knapparna */
  .actions-panel .viewer-actions [data-mobile-cams] .action-chip,
  .actions-panel .viewer-actions [data-mobile-cams] .bv-cam-btn{
    display: flex !important;
    width: 100% !important;
    height: 48px;
    justify-content: flex-start;
    padding: .7rem .9rem;
    border-radius: 14px;
  }

  /* Ikon + klipp av lång text */
  .actions-panel .viewer-actions [data-mobile-cams] .icon{ width: 18px; height: 18px; opacity: .9; }
  .actions-panel .viewer-actions [data-mobile-cams] span{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Udda antal → sista tar full rad för balans */
  .actions-panel .viewer-actions [data-mobile-cams] > :last-child:nth-child(odd){
    grid-column: 1 / -1;
  }
}

/* Extra små skärmar → 1 kolumn */
@media (max-width:340px){
  .actions-panel .viewer-actions [data-mobile-cams]{ grid-template-columns: 1fr; }
}

.switch-wrapper[hidden] { display: none !important; }

/* Gör kompassen klickbar utan att påverka övrigt */
#bv-compass { pointer-events: none; }         /* du har redan detta implicit */
#bv-compass .compass-hit { pointer-events: auto; }  /* låt knappen få klick */

/* Endast ikon – ingen bakgrund */
.viewer .canvas-float-btn{
  position: absolute;
  top:  calc(var(--safe-top) + var(--ui-top) + 10px);
  right: calc(var(--safe-right) + 12px);
  z-index: 40;

  /* behåll bra tapp-yta men visa bara ikonen */
  width: 36px; height: 36px;
  display: grid; place-items: center;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  color: color-mix(in srgb, var(--viewer-ink) 60%, transparent); /* lågkontrast */
  opacity: .6;
  cursor: pointer;
  transition: opacity .15s ease, color .15s ease, transform .1s ease;
}
.viewer .canvas-float-btn .icon{ width: 18px; height: 18px; }

.viewer .canvas-float-btn:hover,
.viewer .canvas-float-btn:focus-visible{
  opacity: 1;
  color: color-mix(in srgb, var(--viewer-ink) 85%, transparent);
  transform: translateY(-1px);
  outline: none;
}

/* inga labels */
.viewer .canvas-float-btn .label{ display:none !important; }

/* ännu mindre på mini-skärmar */
@media (max-width:380px){
  .viewer .canvas-float-btn{ width:32px; height:32px; }
  .viewer .canvas-float-btn .icon{ width:16px; height:16px; }
}