/* ========================================================================== */
/* IBO – FRONTEND STYLES (STRUKTURERET)                                       */
/* Bemærk: Indhold er uændret – kun omorganiseret og indrykket for overblik.  */
/* ========================================================================== */


/* ==========================================================================
   1) FOUC GUARD
   ========================================================================== */

.ibo-frontend-wrapper:not(.is-ready) .ibo-frontend-svg .ibo-polygon { visibility: hidden !important; }
.ibo-frontend-wrapper.is-ready .ibo-frontend-svg .ibo-polygon { visibility: visible !important; }


/* Infopunkt FOUC-guard: gem punkt + label indtil JS er færdig */
.ibo-frontend-wrapper:not(.ibo-infopunkt-ready) .ibo-infopunkt-group,
.ibo-frontend-wrapper:not(.ibo-infopunkt-ready) .ibo-infopunkt-label {
  visibility: hidden;
}

.ibo-frontend-wrapper.ibo-infopunkt-ready .ibo-infopunkt-group,
.ibo-frontend-wrapper.ibo-infopunkt-ready .ibo-infopunkt-label {
  visibility: visible;
}


/* ==========================================================================
   2) GLOBALE CSS-VARIABLER
   ========================================================================== */

 /* =========================================================
    Globale CSS-variabler (kan overrides pr. oversigt via inline style)
    ========================================================= */
:root{
  /* Statusfarver */
  --ibo-status-ledig: #08642D; /* ← NY standardgrøn */
  --ibo-status-reserveret: #CA9A14;
  --ibo-status-solgt: #640808; /* bruges også til 'udlejet' */
  --ibo-status-ekstern: #ffffff;
  --ibo-status-default: #000000;

  /* Samme farver som RGB-komma-lister (til transparente baggrunde m.v.) */
  --ibo-status-ledig-rgb: 8,100,45; /* ← opdateret til #08642D */
  --ibo-status-reserveret-rgb: 202,154,20;
  --ibo-status-solgt-rgb: 100,8,8;
  --ibo-status-ekstern-rgb: 255,255,255;
  --ibo-status-default-rgb: 0,0,0;

  /* Standard gennemsigtighed for polygon-fill */
  --ibo-status-opacity: 0.25;

  /* Diverse UI-variabler */
  --ibo-highlight-stroke: #ffffff; /* “Vis på oversigt” kantfarve */
  --ibo-highlight-width: 2px;
  --ibo-filter-accent: #08642D; /* ← slider/checkbox accent (ny grøn) */
  --ibo-bg-gray: #F5F5F5; /* diskret grå baggrund, fx headerbånd */
  --cta-accent: #1C7C54; /* Slider-sporets neutrale baggrund */
  --ibo-slider-track: #e5f5ed;
}


/* ==========================================================================
   3) POLYGON-OVERSIGT (SVG + INTERAKTION)
   ========================================================================== */

.ibo-frontend-wrapper{
  position:relative;
  display:flow-root;
  isolation:isolate;
  width:100%;
  max-width:100%;
  margin:0 auto 16px;
  background:#f8f8f8;
  overflow:visible;
  overflow-x:clip;
}

.ibo-frontend-image{width:100%;height:auto;display:block;}

.ibo-frontend-svg{
  position:relative;
  width:100%;
  height:auto;
  display:block;
  pointer-events:auto;
  z-index:0;
}

.ibo-frontend-svg a,
.ibo-frontend-svg polygon,
.ibo-frontend-svg text{ pointer-events:auto; }

/* Polygoner – fallback til CSS-variabler hvis der ikke er inline style */
.ibo-frontend-svg .ibo-polygon{
  transition:fill-opacity .2s ease;
  cursor:pointer;
  vector-effect: non-scaling-stroke;
  stroke-width:1px;
  fill:var(--ibo-status-default);
  stroke:var(--ibo-status-default);
  fill-opacity:var(--ibo-status-opacity);
}

/* Status-afhængige farver (bruges hvis ikke overskrevet af inline style) */
.ibo-frontend-svg .ibo-polygon[data-status="ledig"]{
  fill:var(--ibo-status-ledig); stroke:var(--ibo-status-ledig);
}
.ibo-frontend-svg .ibo-polygon[data-status="reserveret"]{
  fill:var(--ibo-status-reserveret); stroke:var(--ibo-status-reserveret);
}
.ibo-frontend-svg .ibo-polygon[data-status="solgt"],
.ibo-frontend-svg .ibo-polygon[data-status="udlejet"]{
  fill:var(--ibo-status-solgt); stroke:var(--ibo-status-solgt);
}
.ibo-frontend-svg .ibo-polygon[data-status="ekstern"]{
  fill:var(--ibo-status-ekstern); stroke:var(--ibo-status-ekstern);
}

/* Fallback for polygoner der linker til en anden oversigt (bliv altid hvid) */
.ibo-frontend-svg .ibo-polygon[data-link-type="oversigt"],
.ibo-frontend-svg .ibo-polygon[data-target-oversigt-id]{
  fill:#fff !important; stroke:#fff !important;
  fill-opacity: var(--ibo-status-opacity, .25) !important;
}

.ibo-polygon:hover,
.ibo-polygon.hovered{ fill-opacity:.30 !important; }

/* Label (valgfri) */
.ibo-label{
  font-size:18px;font-family:inherit;font-weight:700;
  pointer-events:none; dominant-baseline:middle; text-anchor:middle;
  paint-order:stroke fill; stroke:#fff; stroke-width:.5;
  opacity:0 !important;
}

/* Highlight ved “Vis på oversigt” – brug variabel farve */
.ibo-frontend-svg .ibo-polygon.is-highlight,
.ibo-frontend-svg .ibo-polygon:target {
  stroke: var(--ibo-highlight-stroke, #ffffff) !important;
  stroke-width: var(--ibo-highlight-width, 2px) !important;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.2));
  transition: stroke .2s ease, filter .2s ease;
}

/* Mindre kant på små skærme */
@media (max-width:767px){
  .ibo-frontend-svg .ibo-polygon{ stroke-width:1.25; }
}

#ibo-bg-image,#ibo-svg{
  position:absolute; top:0; left:0; width:100%; height:100%; display:block;
}

#ibo-editor-container{ position:relative; width:100%; height:auto; }

@media (max-width:768px){
  .ibo-frontend-wrapper{ margin-bottom:20px; }
}


/* ==========================================================================
   4) FOKUS/ACCESSIBILITY (SVG/links)
   ========================================================================== */

 /* Remove default focus ring on SVG polygons and link wrappers */
.ibo-frontend-svg .ibo-polygon,
.ibo-frontend-svg a {
  outline: none;
  -webkit-tap-highlight-color: transparent; /* mobile */
}

.ibo-frontend-svg .ibo-polygon:focus,
.ibo-frontend-svg .ibo-polygon:focus-visible,
.ibo-frontend-svg .ibo-polygon:active,
.ibo-frontend-svg a:focus,
.ibo-frontend-svg a:focus-visible,
.ibo-frontend-svg a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Optional: if some themes inject focus shadows on links inside SVG */
.ibo-frontend-svg a *:focus,
.ibo-frontend-svg a *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* ==========================================================================
   5) OVERSIGT-NAVIGATION (KNAPPER)
   ========================================================================== */

.ibo-oversigt-nav{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin: 8px 0 12px;
  font-family: inherit, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.ibo-oversigt-nav__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 99px;
color: #000000;
  font-family: inherit, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  font-size: 1em;
  padding: 6px 12px; /* svarer til .lukknap + plads uden ikon */
  font: inherit;
  line-height: 1.2;
  cursor: pointer;

  transition:
    box-shadow .25s ease,
    border-color .25s ease,
    transform .15s ease,
    background .15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Hover: let løft + mørkere kant */
.ibo-oversigt-nav__btn:hover {
  border-color: rgba(0,0,0,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  color: #000000;
   background: #f5f5f5;
}

/* Aktiv/klik: “tryk ned” */
.ibo-oversigt-nav__btn:active {
 box-shadow: 0 0 0 1px var(--ibo-filter-accent);
}

/* Fokus – matcher Elementor/XD stil */
.ibo-oversigt-nav__btn:focus,
.ibo-oversigt-nav__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--ibo-filter-accent);
  background: #f5f5f5;
    background-color: #f5f5f5;
    border-color: #f5f5f5 !important;
    color: #000000;
}

/* Disabled */
.ibo-oversigt-nav__btn[disabled],
.ibo-oversigt-nav__btn[aria-busy="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Aktiv side (aria-current) */
.ibo-oversigt-nav__btn[aria-current="true"],
.ibo-oversigt-nav__btn.is-active {
  background: #f5f5f5;
    background-color: #f5f5f5;
    border-color: 1px solid rgba(0,0,0,0.12);
    color: #000000;
}


/* ==========================================================================
   6) KRYDSFADE-OVERLAY (TRANSITION)
   ========================================================================== */

 /* =========================================================
    KRYDSFADE-OVERLAY (failsafe – JS injicerer også CSS)
    ========================================================= */
.ibo-frontend-wrapper.ibo-xfade-out{
  filter:blur(6px); transform:scale(.985);
  transition:filter .28s ease, transform .28s ease;
}
.ibo-frontend-wrapper.ibo-xfade-in{
  filter:blur(0); transform:scale(1);
  transition:filter .28s ease, transform .28s ease;
}
.ibo-xfade-overlay{
  position:absolute; inset:0; background:rgba(255,255,255,.0);
  pointer-events:none; opacity:0;
}
.ibo-xfade-overlay.show{ opacity:1; transition:opacity .18s ease; }


/* ==========================================================================
   7) BOLIGLISTE WRAPPER + FILTER-PLACERING
   ========================================================================== */

 /* =========================================================
    BOLIGLISTE WRAPPER + FILTER-PLACERING
    ========================================================= */
.ibo-boligliste-wrapper{
  position:relative; display:flow-root; clear:both; z-index:auto; margin-top:0;
}

/* Filter – fuld bredde, knap til højre, menu i viewport */
.ibo-filter-wrapper{
  position:relative; display:flex; justify-content:flex-end; align-items:center;
  width:100%; max-width:100%; margin:8px 0 12px; z-index:auto; clear:both;
}
.ibo-filter-toggle{
  background:#fff; border:1px solid #ccc; padding:.5em 1.2em; border-radius:6px;
  font-size:1.1em; cursor:pointer; font-weight:400; color:#222; box-shadow:0 2px 10px #0001; position:relative;
}
.ibo-filter-toggle .ibo-chevron{ margin-left:.3em; font-size:1.1em; color:#999; transition:transform .2s; }
.ibo-filter-toggle.open .ibo-chevron{ transform:rotate(180deg); }
.ibo-filter-toggle .ibo-close{
  margin-left:.8em; font-size:1.1em; color:#ff6363; vertical-align:middle; cursor:pointer; display:none;
}
.ibo-filter-menu{
  position:absolute; top:calc(100% + 8px); right:0; left:auto;
  width:min(420px, calc(100vw - 24px));
  max-height:clamp(240px, 50vh, 520px); overflow:auto;
  background:#fff; border:1px solid #e6e6e6; border-radius:10px;
  padding:1.2em 1.6em 1em; box-shadow:0 10px 32px #0002; margin-top:0; z-index:1200; display:none;
}
.ibo-filter-group{ margin-bottom:1em; }
.ibo-filter-checkboxes{ display:flex; flex-wrap:wrap; gap:.7em; margin-top:.2em; }
.ibo-filter-checkboxes label{ font-weight:400; font-size:1em; display:flex; align-items:center; gap:.2em; }

/* Brug accent-color til checkbox/radio */
.ibo-filter-wrapper input[type="checkbox"],
.ibo-filter-wrapper input[type="radio"]{ accent-color: var(--ibo-filter-accent); }

.ibo-noui-slider-wrap{ margin-top:.3em; margin-bottom:1em; }
.ibo-slider-values{
  display:flex; justify-content:space-between; font-size:1em; margin-top:.2em; color:#333;
}
.ibo-filter-reset{
  background:#f5f5f5; color:#666; border:none; padding:.3em 1.2em; border-radius:5px; cursor:pointer; transition:background .15s;
}
.ibo-filter-reset:hover{ background:#f0f0f0; color:#222; }


/* ==========================================================================
   8) BOLIGLISTE – GENEREL OPSÆTNING
   ========================================================================== */

 /* =========================================================
    BOLIGLISTE – GENEREL OPSÆTNING
    ========================================================= */
.ibo-boligliste{
  width:100%; overflow-x:hidden; /* tablet/mobil scroller i WRAPPEREN */ margin-top:0;
}
.ibo-row, .ibo-bolig-item{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; background:#fff;
  border-bottom:1px solid #eee; /* desktop divider pr. række */
  padding:10px 0; transition:background .15s, border-color .15s;
  border-left:2px solid transparent; border-right:2px solid transparent;
}
.ibo-row:last-child, .ibo-bolig-item:last-child{ border-bottom:none; }

/* Header */
.ibo-row.ibo-header-row, .ibo-bolig-item.ibo-header-row{
  background:var(--ibo-bg-gray); font-weight:600; border-left:none; border-right:none;
}
.ibo-header-row .ibo-bolig-col{
  /* Ingen ellipsis i overskrifter, og plads til sorteringspil */
  white-space:nowrap; overflow:visible; text-overflow:clip; cursor:pointer; box-sizing:border-box;
}

/* Celler (basis) */
.ibo-bolig-col{
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:.5em 1em; font-size:16px; text-align:left; box-sizing:border-box;
}

/* Status-dot – ingen ellipsis/dobbelte prikker */
.ibo-bolig-col.ibo-col-statusdot{ flex:0 0 28px; overflow:visible !important; text-overflow:clip !important; }
.ibo-status-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--ibo-status-color,#bbb);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);
}

/* Actions – højrejuster og hold kompakt */
.ibo-bolig-col.ibo-col-actions{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.ibo-bolig-col.ibo-col-actions a{ display:inline-block; margin-left:10px; }

/* Hover/aktiv – farver efter status (brug RGB-variabler til transparente baggrunde) */
.ibo-bolig-item.hovered,
.ibo-bolig-item.active{ background:transparent; }

.ibo-bolig-item.status-ledig.hovered,
.ibo-bolig-item.status-ledig.active{
  background: rgba(var(--ibo-status-ledig-rgb), .12) !important;
  border-left: 2px solid var(--ibo-status-ledig) !important;
  border-right:2px solid var(--ibo-status-ledig) !important;
}

/* Reserveret */
.ibo-bolig-item.status-reserveret.hovered,
.ibo-bolig-item.status-reserveret.active{
  background: rgba(var(--ibo-status-reserveret-rgb), .12) !important;
  border-left: 2px solid var(--ibo-status-reserveret) !important;
  border-right:2px solid var(--ibo-status-reserveret) !important;
}

/* Solgt / Udlejet deler farve */
.ibo-bolig-item.status-solgt.hovered,
.ibo-bolig-item.status-solgt.active,
.ibo-bolig-item.status-udlejet.hovered,
.ibo-bolig-item.status-udlejet.active{
  background: rgba(var(--ibo-status-solgt-rgb), .12) !important;
  border-left: 2px solid var(--ibo-status-solgt) !important;
  border-right:2px solid var(--ibo-status-solgt) !important;
}

/* Ekstern (hvid) – subtil markering */
.ibo-bolig-item.status-ekstern.hovered,
.ibo-bolig-item.status-ekstern.active{
  background: rgba(var(--ibo-status-ekstern-rgb), .6) !important;
  border-left: 2px solid var(--ibo-status-ekstern) !important;
  border-right:2px solid var(--ibo-status-ekstern) !important;
}

/* Default / andre nye (inkl. “anden”, “renovering”, “under-renovering”) */
.ibo-bolig-item.status-default.hovered,
.ibo-bolig-item.status-default.active,
.ibo-bolig-item.status-anden.hovered,
.ibo-bolig-item.status-anden.active,
.ibo-bolig-item.status-renovering.hovered,
.ibo-bolig-item.status-renovering.active,
.ibo-bolig-item.status-under-renovering.hovered,
.ibo-bolig-item.status-under-renovering.active{
  background: rgba(var(--ibo-status-default-rgb), .12) !important;
  border-left: 2px solid var(--ibo-status-default) !important;
  border-right:2px solid var(--ibo-status-default) !important;
}

/* Sorteringspil – kun én pil, styret af data-attributter */
.ibo-header-row .ibo-sort-indicator{
  display:inline-block; margin-left:6px; min-width:1.2em; opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.ibo-header-row [data-sortable="1"]:hover .ibo-sort-indicator,
.ibo-header-row [data-sort-active="1"] .ibo-sort-indicator{ opacity:1; }
.ibo-header-row .ibo-sort-indicator::before{ content:"▾"; }
.ibo-header-row [data-sort-dir="asc"] .ibo-sort-indicator::before{ content:"▴"; }
.ibo-header-row [data-sort-dir="desc"] .ibo-sort-indicator::before{ content:"▾"; }


/* ==========================================================================
   9) RESPONSIV: DESKTOP/LAPTOP (≥960px)
   ========================================================================== */

 /* =========================================================
    DESKTOP/LAPTOP (≥960px) - Adresse vokser, øvrige faste bredder -> stabil alignment
    ========================================================= */
@media (min-width:960px){
  .ibo-header-row, .ibo-bolig-item{
    display:flex; flex-wrap:wrap; /* så actions kan hoppe på linje 2 ved behov */
    align-items:center; column-gap:12px;
  }
  .ibo-bolig-col{
    flex:0 0 auto; /* endelige bredder sættes via JS pr. kolonne */
    min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:.5em 1em;
  }
  /* Header ellipser ikke (vi måler også headerens naturlige bredde) */
  .ibo-header-row .ibo-bolig-col{ overflow:visible; text-overflow:clip; }
  /* Dot & actions identificeres via klasse (JS sætter også width) */
  .ibo-col-statusdot{ flex:0 0 28px; min-width:28px; }
  .ibo-col-statusdot::before{ content:none !important; }
  .ibo-col-actions{ text-align:right; white-space:nowrap; }
  /* Adresse må bryde i hele ord og må fylde resten (JS giver flex:1) */
  .ibo-bolig-col[data-col-key="kort_adresse"]{
    flex:1 1 320px; min-width:240px; white-space:normal; overflow-wrap:break-word; word-break:normal; hyphens:auto;
  }
}


/* ==========================================================================
   10) RESPONSIV: TABLET (768–959px)
   ========================================================================== */

 /* =========================================================
    TABLET (768–959px) – Wrapper styrer scroll (uden indre padding)
    ========================================================= */
@media (min-width:768px) and (max-width:959.98px){
  .ibo-boligliste-wrapper{
    position:relative; max-width:100%; overflow-x:auto !important; /* <- scroll-container */
    overflow-y:visible; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; /* siden “overtager” ikke scroll */
    contain:layout paint; /* isolér overflow til wrapper */
    box-sizing:border-box; background:#fff; /* hvid baggrund under hele tabellen */
    border-radius:4px;
  }
  .ibo-boligliste{
    display:inline-table; min-width:max-content; /* udvid efter indhold; wrapper scroller */
    overflow:visible !important; /* overstyr basis: overflow-x:hidden */
    border-collapse:separate; border-spacing:0; background:transparent; /* baggrund håndteres af wrapperen */
  }
  .ibo-header-row, .ibo-bolig-item{ display:table-row; background:transparent; border-bottom:0; /* undgå dobbeltlinjer (cellernes border styrer) */ }
  .ibo-bolig-col{
    display:table-cell; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important;
    padding:.6em .8em; vertical-align:middle; border-bottom:1px solid #eee;
  }
  .ibo-header-row .ibo-bolig-col{ background:var(--ibo-bg-gray); /* går nu helt til venstre/højre kant */ font-weight:600; }
  .ibo-col-statusdot{ width:28px; min-width:28px; }
  .ibo-col-statusdot::before{ content:none !important; }
  /* Lange adresser -> lad kolonnen vokse horisontalt (vi scroller) */
  .ibo-bolig-col[data-col-key="kort_adresse"]{ white-space:nowrap !important; }
  /* “Vis på oversigt” holder sig inde i tabellen og højrestilles */
  .ibo-bolig-col.ibo-col-actions{ white-space:nowrap !important; text-align:right; width:160px; min-width:160px; }
  /* Ingen pseudo-labels i “tabel”-layoutet */
  .ibo-bolig-col::before{ content:none !important; }
  /* Skjul kolonner markeret "Skjul på mobil" (MOBIL) */
  .ibo-boligliste .ibo-header-row .ibo-col--hide-mobile,
  .ibo-boligliste .ibo-bolig-item .ibo-col--hide-mobile{ display:none !important; }
}


/* ==========================================================================
   11) RESPONSIV: MOBIL (≤767px)
   ========================================================================== */

 /* =========================================================
    MOBIL (≤767px) – Wrapper styrer scroll (uden indre padding)
    ========================================================= */
@media (max-width:767px){
  .ibo-boligliste-wrapper{
    position:relative; max-width:100%; overflow-x:auto !important; /* <- scroll-container */
    overflow-y:visible; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    contain:layout paint; box-sizing:border-box; background:#fff; border-radius:4px;
  }
  .ibo-boligliste{
    display:inline-table; min-width:max-content; overflow:visible !important; /* overstyr basis: overflow-x:hidden */
    border-collapse:separate; border-spacing:0; background:transparent;
  }
  .ibo-header-row, .ibo-bolig-item{ display:table-row; background:transparent; border-bottom:0; /* undgå dobbeltlinjer */ }
  .ibo-bolig-col{
    display:table-cell; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important;
    padding:.6em .8em; vertical-align:middle; border-bottom:1px solid #eee;
  }
  .ibo-header-row .ibo-bolig-col{ background:var(--ibo-bg-gray); font-weight:600; }
  .ibo-col-statusdot{ width:28px; min-width:28px; }
  .ibo-col-statusdot::before{ content:none !important; }
  .ibo-bolig-col[data-col-key="kort_adresse"]{ white-space:nowrap !important; }
  .ibo-bolig-col.ibo-col-actions{ white-space:nowrap !important; text-align:right; width:160px; min-width:160px; }
  .ibo-bolig-col::before{ content:none !important; }
  /* Skjul kolonner markeret "Skjul på mobil" (MOBIL) */
  .ibo-boligliste .ibo-header-row .ibo-col--hide-mobile,
  .ibo-boligliste .ibo-bolig-item .ibo-col--hide-mobile{ display:none !important; }
}


/* ==========================================================================
   12) RESPONSIV: TOUCH-ENHEDER (960–1200px)
   ========================================================================== */

 /* =========================================================
    TOUCH-ENHEDER (iPad Pro m.fl.) 960–1200px
    - Desktop-lignende grid + ubrudt vandret divider
    - "Vis på oversigt" på linje 2, højrestillet
    - Understøtter ekstra kolonner via grid-auto-columns
    ========================================================= */
@media (min-width:960px) and (max-width:1200px){
  .ibo-is-touch .ibo-header-row, .ibo-is-touch .ibo-bolig-item{
    display:grid;
    grid-template-columns:
      28px /* status dot */
      minmax(220px, 1fr) /* adresse */
      130px /* værelser */
      110px /* areal */
      180px /* status (lidt bredere til 'Under renovering') */
      130px /* husleje */
      160px; /* actions (header tom) */
    grid-auto-flow:column;
    grid-auto-columns:minmax(110px, max-content); /* ekstra ukendte kolonner */
    column-gap:12px; align-items:center; border-bottom:1px solid #eee; /* ÉN ubrudt divider pr. række */
  }
  /* Ingen ellipsis på header */
  .ibo-is-touch .ibo-header-row .ibo-bolig-col{
    overflow:visible; text-overflow:clip; white-space:nowrap; background:var(--ibo-bg-gray); font-weight:600;
  }
  /* Række-celler: én divider via række, derfor ingen celle-border */
  .ibo-is-touch .ibo-bolig-col{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:.6em .8em; border-bottom:0;
  }
  /* adresse må bryde i ORD (ikke midt i ord) – presser ikke andre */
  .ibo-is-touch .ibo-bolig-col[data-col-key="kort_adresse"]{
    white-space:normal; overflow-wrap:break-word; word-break:normal; hyphens:auto;
  }
  /* actions på egen linje, helt til højre */
  .ibo-is-touch .ibo-bolig-item .ibo-col-actions{
    grid-column:1 / -1; justify-self:end; white-space:nowrap; padding-top:.2em;
  }
  /* statusdot-kolonnen må ikke vise pseudoindhold */
  .ibo-is-touch .ibo-col-statusdot{ width:28px; min-width:28px; }
  .ibo-is-touch .ibo-col-statusdot::before{ content:none !important; }
  /* Touch 960–1200: lad gridet bestemme */
  .ibo-is-touch .ibo-boligliste{ overflow-x:visible; }
  .ibo-is-touch .ibo-bolig-col{ min-width:0; }
  .ibo-is-touch .ibo-bolig-col[data-col-key="kort_adresse"]{ min-width:0; }
}


/* ==========================================================================
   13) IKON + FILTER-BUTTON
   ========================================================================== */

 /* =========================================================
    IKON + FILTER-BUTTON
    ========================================================= */
.ibo-icon{ display:inline-block; width:1.1em; height:1.1em; vertical-align:-0.15em; flex:0 0 auto; }

/* — Standard: brug baggrundsbillede (fallback) — */
.ibo-icon--filter{
  background-image: var(--ibo-icon-filter);
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

/* — “Opgrader” til mask når støttet — */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .ibo-icon--filter{
    background-image:none !important;
    background-color: currentColor !important; /* fyld farve */
    -webkit-mask-image: var(--ibo-icon-filter); mask-image: var(--ibo-icon-filter);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
  }
}

/* Knaplayout (kun tekst + ikon) */
.ibo-filter-toggle{
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: .2em .2em !important; display:inline-flex; align-items:center; gap:.45em;
  font-weight:400; color:#222; /* sikrer synlig farve til currentColor */
}
.ibo-filter-toggle .ibo-chevron, .ibo-filter-toggle .ibo-close{ display:none !important; }
.ibo-filter-toggle:hover, .ibo-filter-toggle:focus{ font-weight:400; color:#222; }

/* Basis for inline filter-ikonet */
.ibo-filter-toggle .ibo-icon-filter-animated svg {
  display: inline-block; vertical-align: middle; /* gør scale-anim glat uden at påvirke layout */
  transform: translateZ(0); will-change: transform; transition: transform .18s ease; backface-visibility: hidden;
}

/* Filter-ikon: hvid udfyldning + accent-outline, som sliderens cirkler
   + glidende transform-anim for knapperne */
.ibo-filter-toggle .ibo-icon-filter-animated .knob {
  fill: #fff !important;
  stroke: var(--ibo-accent, var(--ibo-filter-accent, currentColor)) !important;
  stroke-width: 1.8px !important; vector-effect: non-scaling-stroke; paint-order: stroke fill;
  stroke-linecap: round; stroke-linejoin: round; /* smooth move */
  transform: translateX(0); /* definer baseline */
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform .24s cubic-bezier(.22,.61,.36,1), stroke .18s ease, fill .18s ease;
}

/* (valgfrit) samme outline-farve – bevarer nuancen ved hover/åben */
.ibo-filter-toggle:hover .ibo-icon-filter-animated .knob,
.ibo-filter-toggle.open .ibo-icon-filter-animated .knob {
  stroke: var(--ibo-accent, var(--ibo-filter-accent, currentColor)) !important;
}

/* Ved HOVER eller når menuen er ÅBEN (.open), flytter vi top og bot fra højre -> venstre,
   og midt fra venstre -> højre. */
.ibo-filter-toggle:hover .ibo-icon-filter-animated .knob.top,
.ibo-filter-toggle.open .ibo-icon-filter-animated .knob.top,
.ibo-filter-toggle:hover .ibo-icon-filter-animated .knob.bot,
.ibo-filter-toggle.open .ibo-icon-filter-animated .knob.bot { transform: translateX(-8px); }

.ibo-filter-toggle:hover .ibo-icon-filter-animated .knob.mid,
.ibo-filter-toggle.open .ibo-icon-filter-animated .knob.mid { transform: translateX(8px); }

/* (Valgfrit) Skaler en anelse for “taktil” følelse */
.ibo-filter-toggle:hover .ibo-icon-filter-animated svg,
.ibo-filter-toggle.open .ibo-icon-filter-animated svg { transform: translateZ(0) scale(1.02); }

/* Respektér brugerens preferencer (ingen motion) */
@media (prefers-reduced-motion: reduce) {
  .ibo-filter-toggle .ibo-icon-filter-animated .knob,
  .ibo-filter-toggle .ibo-icon-filter-animated svg { transition: none !important; }
}

/* Hvis du tidligere brugte mask-ikon til filterknappen, neutralisér det her: */
.ibo-filter-toggle .ibo-icon, .ibo-filter-toggle .ibo-icon--filter { display: none !important; }


/* ==========================================================================
   14) SLIDER (noUiSlider)
   ========================================================================== */

 /* =========================================================
    SLIDER (noUiSlider)
    ========================================================= */
/* Basis (neutral) – gælder alle sliders */
.noUi-target{
  background: var(--ibo-slider-track, #e5f5ed); /* ← behold fallback */
  border-radius: 8px; border: 1px solid #ccc;
}
.noUi-horizontal .noUi-handle{
  background: #fff; box-shadow: 0 2px 8px #0001; pointer-events: auto; touch-action: none; cursor: grab;
}
.noUi-horizontal .noUi-handle:active{ cursor: grabbing; }

/* Filter-slidere: accent sættes pr. felt via inline style på .ibo-filter-group */
.ibo-filter-group[data-filter-type="slider"]{
  /* fallback hvis JS ikke når at sætte variablen */
  --ibo-accent: var(--ibo-filter-accent, #08642D);
}
/* Sporet forbliver neutralt (IKKE brandfarvet) */
.ibo-filter-group[data-filter-type="slider"] .noUi-target{
  background: var(--ibo-slider-track, #e5f5ed) !important; /* ← med fallback */
}
/* Det udfyldte stykke + handle-kant bruger accent */
.ibo-filter-group[data-filter-type="slider"] .noUi-connect{
  background: var(--ibo-accent, var(--ibo-filter-accent, #08642D)) !important;
}
.ibo-filter-group[data-filter-type="slider"] .noUi-horizontal .noUi-handle{
  border: 2px solid var(--ibo-accent, var(--ibo-filter-accent, #08642D)) !important;
}

/* =========================== IBO Filter slider – slim + round handles =========================== */
.ibo-filter-group[data-filter-type="slider"] .noUi-target {
  /* slank skin */
  height: var(--ibo-slider-track-h, 10px);
  border: 0; border-radius: 999px; box-shadow: none; background: transparent; /* vi styrer farver på base/connect separat */
}
/* selve “basen” */
.ibo-filter-group[data-filter-type="slider"] .noUi-horizontal,
.ibo-filter-group[data-filter-type="slider"] .noUi-base,
.ibo-filter-group[data-filter-type="slider"] .noUi-connects {
  height: var(--ibo-slider-track-h, 10px); border-radius: 999px;
}
/* grå bagspor (rail) */
.ibo-filter-group[data-filter-type="slider"] .noUi-connects { background: var(--ibo-slider-rail, #e9e9e9); }
/* udfyldt del (accent) – matcher din eksisterende accent-variabel */
.ibo-filter-group[data-filter-type="slider"] .noUi-connect{
  background: var(--ibo-accent, var(--ibo-filter-accent, #0E412B)) !important;
}
/* runde handles */
.ibo-filter-group[data-filter-type="slider"] .noUi-handle {
  width: var(--ibo-slider-handle, 18px); height: var(--ibo-slider-handle, 18px);
  border-radius: 50%; border: 2px solid var(--ibo-accent, var(--ibo-filter-accent, #0E412B));
  background: #fff; box-shadow: 0 0 0 0 rgba(0,0,0,.0); cursor: pointer;
  /* centrér vertikalt på den slanke track */
  top: 50%; transform: translate(-50%, -50%);
}
/* noUi’s små streger i håndtaget – væk */
.ibo-filter-group[data-filter-type="slider"] .noUi-handle::before,
.ibo-filter-group[data-filter-type="slider"] .noUi-handle::after { display: none; content: none; }
/* større usynlig touchzone for bedre UX */
.ibo-filter-group[data-filter-type="slider"] .noUi-handle .noUi-touch-area {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%;
}
/* hover/active feedback (diskret) */
.ibo-filter-group[data-filter-type="slider"] .noUi-handle:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ibo-accent, #0E412B) 20%, transparent);
}
.ibo-filter-group[data-filter-type="slider"] .noUi-active {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ibo-accent, #0E412B) 25%, transparent);
}
/* keyboard focus – tydelig ring */
.ibo-filter-group[data-filter-type="slider"] .noUi-handle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ibo-accent, #0E412B) 35%, transparent);
}
/* disabled */
.ibo-filter-group[data-filter-type="slider"] .noUi-disabled .noUi-connect { background: #cfcfcf !important; }
.ibo-filter-group[data-filter-type="slider"] .noUi-disabled .noUi-handle {
  border-color: #cfcfcf; background: #f5f5f5; cursor: not-allowed;
}
/* small screens – lidt mindre håndtag hvis du vil */
@media (max-width: 480px) {
  .ibo-filter-group[data-filter-type="slider"] .noUi-handle { width: 16px; height: 16px; }
}

/* Centrer runde handles præcist på en slank (10px) track */
.ibo-filter-group[data-filter-type="slider"] .noUi-horizontal .noUi-handle {
  box-sizing: border-box; /* gør at height/width inkluderer border */
  width: var(--ibo-slider-handle, 18px);
  height: var(--ibo-slider-handle, 18px);
  border-radius: 50%;
  border: 2px solid var(--ibo-accent, var(--ibo-filter-accent, #0E412B));
  background: #fff;
  /* Horisontalt: center over origin */
  left: auto; right: calc(var(--ibo-slider-handle, 18px) / -2);
  /* Vertikalt: præcis centrering ift. track-højde */
  top: calc( (var(--ibo-slider-track-h, 10px) - var(--ibo-slider-handle, 18px)) / 2 );
  /* sørg for at en evt. tidligere transform ikke skubber den */
  transform: none;
}

/* Gruppetitler: "Areal (m²)", "Værelser", "Husleje", "Status" */
.ibo-filter-menu .ibo-filter-group > label { font-weight: 400 !important; }
/* Valg-labels inde i fx status-checkboxes */
.ibo-filter-menu .ibo-filter-checkboxes label { font-weight: 400 !important; }


/* ==========================================================================
   15) FILTER – TOM BESKED
   ========================================================================== */

 /* =========================== Filter ved tom besked =========================== */
.ibo-filter-empty{ padding:.75rem 1rem; background:var(--ibo-bg-gray, #f5f5f5); border-radius:8px; font-size:.95rem; }
.ibo-filter--empty .ibo-filter-toggle{ opacity:.9; }


/* ==========================================================================
   16) GALLERY / SWIPER (STABLE VIEWPORT)
   ========================================================================== */

 /* =========================== IBO GALLERY – stable viewport, no flicker, max 400px =========================== */
:root { --ibo-gallery-h: 400px; }

.gallery, .ibo-swiper {
  /* stabilt viewport fra første paint */
  --ibo-gallery-h: 400px; position: relative; width: 100%;
  min-height: var(--ibo-gallery-h);
  /* peek på næste slide – virker i både fallback og swiper */
  overflow: visible; padding-right: 30px; box-sizing: border-box; visibility: visible !important; opacity: 1 !important;
}

/* wrapper – lodret centrering af slides */
.gallery .swiper-wrapper, .ibo-swiper .swiper-wrapper {
  align-items: center; justify-content: flex-start; min-height: var(--ibo-gallery-h); visibility: visible !important; opacity: 1 !important;
}

/* slides har fast (visuel) højde = viewport */
.gallery .swiper-slide, .ibo-swiper .swiper-slide {
  height: var(--ibo-gallery-h); width: auto !important; display: flex; align-items: center; justify-content: flex-start;
  background: none; box-sizing: border-box;
}

/* link fylder hele slide-højden */
.gallery .swiper-slide > a, .ibo-swiper .swiper-slide > a {
  display: flex; align-items: center; height: 100%; width: auto; text-decoration: none;
}

/* billede skalerer ind i viewport – aldrig over 400px i højden */
.gallery .swiper-slide img, .ibo-swiper .swiper-slide img {
  display: block; max-height: var(--ibo-gallery-h); /* ⟵ hårdt loft */
  height: 100%; width: auto; object-fit: contain; background: #fff; border-radius: 12px;
}

/* Vis ALLE slides – inkl. duplicate (hvis loop utilsigtet skulle slå til) */
.gallery .swiper-slide-duplicate, .ibo-swiper .swiper-slide-duplicate { visibility: visible !important; opacity: 1 !important; }

/* skjul pagination dots hvis temaet tilfører dem */
.gallery .swiper-pagination, .ibo-swiper .swiper-pagination { display: none !important; }

/* pæne pil-knapper over indholdet */
.gallery .swiper-button-next, .ibo-swiper .swiper-button-next,
.gallery .swiper-button-prev, .ibo-swiper .swiper-button-prev { top: 50%; transform: translateY(-50%); z-index: 5; }

/* responsive højde – kan tilpasses efter behov */
@media (max-width: 1024px) { .gallery, .ibo-swiper { --ibo-gallery-h: 320px; } }
@media (max-width: 640px)  { .gallery, .ibo-swiper { --ibo-gallery-h: 260px; } }
@media (max-width: 600px)  { .gallery, .ibo-swiper { --ibo-gallery-h: 220px; } }


/* ==========================================================================
   17) ELEMENTOR LIGHTBOX – LOADERS / PRELOADERS
   ========================================================================== */

 /* Elementor lightbox: skjul loader overlay + ikon */
.elementor-lightbox .dialog-lightbox-loading,
.elementor-lightbox .dialog-lightbox-loading *,
.elementor-lightbox .elementor-slideshow__preloader,
.elementor-lightbox .elementor-slideshow__preloader * {
  display: none !important; pointer-events: none !important;
}

/* Swiper: skjul lazy-preloader (også den hvide variant) */
.elementor-lightbox .swiper-lazy-preloader,
.elementor-lightbox .swiper-lazy-preloader-white {
  display: none !important; pointer-events: none !important;
}

/* (valgfrit) hvis temaet bruger eicon-spinner i lightboxen */
.elementor-lightbox .eicon-spinner,
.elementor-lightbox .eicon-loading,
.elementor-lightbox .eicon-animation {
  display: none !important; pointer-events: none !important;
}


/* ==========================================================================
   18) SWIPER NEXT-PIL (MASK + FALLBACK)
   ========================================================================== */

 /* ========================================= SWIPER NEXT-PIL (mask + fallback) ========================================= */
/* Skjul forrige-knappen helt */
.gallery .swiper-button-prev, .ibo-swiper .swiper-button-prev { display:none !important; }

/* Beholderen (hvid cirkel) */
.gallery .swiper-button-next, .ibo-swiper .swiper-button-next{
  width:40px; height:40px; border:none; border-radius:50%;
  background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.09);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10; opacity:.95; color:#333;
}

/* — Fallback: brug baggrundsbillede — */
.gallery .swiper-button-next::after, .ibo-swiper .swiper-button-next::after{
  content:""; display:block; width:20px; height:20px;
  background-image: var(--ibo-icon-next); background-repeat:no-repeat; background-position:center; background-size:contain;
}

/* — Opgrader til mask når støttet — */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .gallery .swiper-button-next::after, .ibo-swiper .swiper-button-next::after{
    background-image:none !important; background-color: currentColor !important;
    -webkit-mask-image: var(--ibo-icon-next); mask-image: var(--ibo-icon-next);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
  }
}


/* ==========================================================================
   19) POST OVERLAY KNAPPER (CTA VARIANTS)
   ========================================================================== */

 /* ========================================= Post overlay knapper ========================================= */
.plan-cta .elementor-button .elementor-button-content-wrapper,
.address-cta .elementor-button .elementor-button-content-wrapper,
.con-cta .elementor-button .elementor-button-content-wrapper {
  position: relative; z-index: 1;
}

/* === fælles pill layout med præcis 2.5px “luft” omkring cirklen === */
.plan-cta .elementor-button,
.address-cta .elementor-button,
.con-cta .elementor-button {
  --circle-size: 40px; /* hvid cirkel diameter */
  --inset-left: 2.5px; /* afstand fra venstre kant til cirkel */
  --edge-gap: 2.5px; /* top/bund luft omkring cirkel */
  --gap-to-text: 16px; /* afstand fra cirkel til tekst */
  position: relative; display: inline-flex; align-items: center;
  block-size: calc(var(--circle-size) + (2 * var(--edge-gap)));
  padding-inline-start: calc(var(--inset-left) + var(--circle-size) + var(--gap-to-text)) !important;
  padding-inline-end: 16px !important;
  border-radius: 9999px; border: 0.5px solid transparent; /* sættes pr. variant */
  box-sizing: border-box; text-decoration: none;
}

/* Elementor wrapper sikres over pseudo-elementer */
.plan-cta .elementor-button .elementor-button-content-wrapper,
.address-cta .elementor-button .elementor-button-content-wrapper,
.con-cta .elementor-button .elementor-button-content-wrapper {
  display: inline-flex; align-items: center; position: relative; z-index: 2;
}

.plan-cta .elementor-button .elementor-button-text,
.address-cta .elementor-button .elementor-button-text,
.con-cta .elementor-button .elementor-button-text {
  white-space: nowrap; line-height: 1.2;
}

/* Venstre hvid cirkel (baggrundslag) */
.plan-cta .elementor-button::before,
.address-cta .elementor-button::before,
.con-cta .elementor-button::before {
  content: ""; position: absolute; inset-inline-start: var(--inset-left); inset-block-start: var(--edge-gap);
  inline-size: var(--circle-size); block-size: var(--circle-size);
  border-radius: 50%; background-color: #fff !important; /* hvid cirkel */
  z-index: 0; pointer-events: none;
}

/* Sort ikon ovenpå den hvide cirkel (mask) */
.plan-cta .elementor-button::after,
.address-cta .elementor-button::after,
.con-cta .elementor-button::after {
  content: ""; position: absolute; inset-inline-start: var(--inset-left); inset-block-start: var(--edge-gap);
  inline-size: var(--circle-size); block-size: var(--circle-size);
  border-radius: 50%; z-index: 1; pointer-events: none; background-color: #000; /* ikonfarve */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 18px auto; mask-size: 18px auto;
}

/* Knyt hvert ikon til ::after */
.plan-cta .elementor-button::after { -webkit-mask-image: var(--ibo-icon-plan); mask-image: var(--ibo-icon-plan); }
.address-cta .elementor-button::after{ -webkit-mask-image: var(--ibo-icon-loc); mask-image: var(--ibo-icon-loc); }
.con-cta .elementor-button::after { -webkit-mask-image: var(--ibo-icon-phone); mask-image: var(--ibo-icon-phone); }

/* Skjul ikonlag hvis mask ikke understøttes (graceful degrade) */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .plan-cta .elementor-button::after,
  .address-cta .elementor-button::after,
  .con-cta .elementor-button::after { display:none; }
}

/* Fokus/hovers fælles */
.plan-cta .elementor-button:focus-visible,
.address-cta .elementor-button:focus-visible,
.con-cta .elementor-button:focus-visible { outline: 2px solid rgba(0,0,0,0.35); outline-offset: 2px; }
.plan-cta .elementor-button:focus,
.address-cta .elementor-button:focus,
.con-cta .elementor-button:focus { outline: none !important; box-shadow: none !important; }

@media (max-width: 1024px) {
  .plan-cta .elementor-button, .address-cta .elementor-button, .con-cta .elementor-button { --gap-to-text: 12px; }
}
@media (max-width: 767px) {
  .plan-cta .elementor-button, .address-cta .elementor-button, .con-cta .elementor-button { --gap-to-text: 6px; }
}

/* Varianter */
.plan-cta .elementor-button {
  color: #000 !important; /* tekstfarve */
  background: #f5f5f5 !important; border-color: #f5f5f5 !important;
}
.plan-cta .elementor-button:hover { background: #efefef !important; border-color: #f5f5f5; color: #000; }

.address-cta .elementor-button {
  color: #000 !important; /* tekstfarve */
  background: #f5f5f5 !important; border-color: #f5f5f5 !important;
}
.address-cta .elementor-button:hover { background: #efefef !important; border-color: #f5f5f5; color: #000; }

/* Brug Elementors globale accent – fallback til #3B301C */
.con-cta .elementor-button { color: #000; background: #0E412B !important; border-color: var(--e-global-color-accent, #0E412B) !important; }
/* Simpel hover (let nedtoning) */
.con-cta .elementor-button:hover { opacity: 0.92; color: #000; }

/* ========== Post-overlay CTA – fixes ========== */
/* Desktop/Tablet: hold linje- og baseline-align ens med de andre knapper */
.con-cta{
  display:inline-flex; align-items:center; justify-content:center; vertical-align: middle; /* vigtig ift. søskende inline-knapper */
  min-height: 45px; /* match dine andre knappers højde */ line-height: 1; /* undgå baseline-drift */
}
/* Mobil: perfekt centreret “accent-ring” + hvid kerne */
@media (max-width: 767.98px){
  .con-cta{
    width: var(--cta-size, 46px); height: var(--cta-size, 46px);
    padding: 0 !important; gap: 0 !important; /* nulstil fra desktop */
    border-radius: 50%; background: var(--cta-accent, #0E412B); border: none; display: grid; /* stabil centering */
    place-items: center; box-sizing: border-box; overflow: hidden; /* klip evt. wrapper-artefakter */
  }
  /* Sørg for at Elementor wrapperen ikke “skubber” højre side */
  .con-cta > .elementor-button-content-wrapper{
    width: 100%; height: 100%; padding: 0 !important; margin: 0 !important; display: grid; place-items: center; box-sizing: border-box;
  }
  .con-cta .elementor-button-icon{ margin:0 !important; }
  /* Hvid kerne + accent-ring (symmetrisk) */
  .con-cta::after{
    content: ""; position: absolute; inset: var(--cta-ring, 2.5px);
    background: #fff; border-radius: 50%; pointer-events: none;
  }
  /* Ikon over kernen; farve = accent */
  .con-cta svg, .con-cta .cta-icon{
    position: relative; z-index: 1; width: var(--cta-icon, 22px); height: var(--cta-icon, 22px);
    fill: currentColor; color: var(--cta-accent, #0E412B);
  }
  /* Skjul tekst visuelt men bevar a11y */
  .con-cta .elementor-button-text, .con-cta .cta-text{
    position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap; border:0;
  }
}

/* Luk-knap med ikon før teksten + 90° rotation på hover */
.lukknap .elementor-button {
  position: relative; display: inline-flex; align-items: center; padding-left: 13px !important; /* plads til ikon (7px) + 6px mellemrum */
}
.lukknap .elementor-button::before {
  content: ""; display: inline-block; inline-size: 7px; /* ikonbredde */ block-size: 7px; /* ikonhøjde */
  margin-right: 6px; /* afstand til tekst */
  -webkit-mask-image: var(--ibo-icon-close); mask-image: var(--ibo-icon-close);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background-color: currentColor; /* ikon følger tekstfarven */
  transition: transform .25s ease;
}
.lukknap .elementor-button:hover::before { transform: rotate(90deg); }
.lukknap .elementor-button:focus, .lukknap .elementor-button:active { outline: none !important; box-shadow: none !important; }
.lukknap .elementor-button:focus-visible { outline: none !important; box-shadow: none !important; }
.lukknap .elementor-button { -webkit-tap-highlight-color: transparent; }


/* ==========================================================================
   20) ELEMENTOR LIGHTBOX – LAYERING
   ========================================================================== */

 /* ========================================= Elementor Lightbox layering (over egen loader) ========================================= */
.elementor-lightbox { z-index: 999999 !important; }
/* Undgå at evt. plugin-loader lægger sig over lightboxen */
.elementor-lightbox ~ .ibo-overlay-loader,
.elementor-lightbox .ibo-overlay-loader { display: none !important; }


/* ==========================================================================
   21) STATUS-PILL (SHORTCODE)
   ========================================================================== */

 /* =========================================================
    STATUS-PILL (shortcode)
    ========================================================= */
.ibo-status-label-pill{
  display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:6px 12px;
  font-size:11px; background:var(--ibo-bg-gray); font-weight:400; letter-spacing:.01em; line-height:1; min-height: 30px;
}
.ibo-status-label-circle{ width:12px; height:12px; border-radius:50%; display:inline-block; flex-shrink:0; }
.ibo-status-label-text{ display:inline-block; vertical-align:middle; }

/* Kompakt status-pill */
.ibo-status-pill {
  display: inline-flex; align-items: center; gap: .4em; /* hvis du viser en farvedot + tekst */
  padding: 4px 10px; /* <- genskabt ‘luft’ */ border-radius: 9999px; font-size: 12px; line-height: 1;
  white-space: nowrap; background: #F2F2F2; /* justér hvis du farver via status */ color: #111; border: 1px solid rgba(0,0,0,.08);
}
/* Lille farve-dot inde i pill (valgfri, hvis du bruger den) */
.ibo-status-pill .ibo-status-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }


/* =========================================================
   22 HOVERBOKS (frontend)
   - Host lægger et absolut lag oven på SVG'en.
   - Inner er selve boksen, som vi flytter med left/top.
   ========================================================= */

.ibo-frontend-wrapper { position: relative; }

.ibo-hoverbox-host {
  position: absolute;
  inset: 0;                 /* dækker hele wrapperen */
  pointer-events: none;     /* hover skal komme fra polygonen, ikke boksen */
  z-index: 99999;
}

.ibo-hoverbox-host .ibo-hoverbox--inner {
  position: absolute;       /* NØGLEN: så left/top virker */
  left: -9999px;
  top: -9999px;
  max-width: 280px;
  will-change: transform, left, top;
}

.ibo-hoverbox-host .ibo-hoverbox {
  background:#fff !important;
  border-radius:6px;
  box-shadow:0 2px 16px rgba(0,0,0,.12);
  padding:8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms ease-in-out, transform 500ms ease-in-out;
}

/* Aktiv tilstand */
#ibo-label-float.is-visible,
.ibo-hoverbox-host[data-visible="1"] .ibo-hoverbox {
  opacity: 1;
  transform: translateY(0);
}

.ibo-hoverbox-table {
  width:100%;
  margin-top:6px;
  border-collapse:collapse;
}
.ibo-hoverbox-label { opacity:.7; white-space:nowrap; }
.ibo-hoverbox-value { text-align:right; }

/* Selve boksen */
.ibo-frontend-wrapper > .ibo-hoverbox-host .ibo-hoverbox--inner .ibo-hoverbox {
  background: #fff !important;
  border-radius: 6px !important;
  padding: 6px !important;
  box-shadow: none;
}

/* Overskrift/adresse: brødtekst, normal, 1em */
.ibo-frontend-wrapper .ibo-hoverbox .info-tekst {
  font-family: inherit;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.25;
  color: #000;
  margin: 0 0 6px 0;
  white-space: nowrap;
}

/* Tabel: brødtekst 0.9em, ingen gitter/outline */
.ibo-frontend-wrapper .ibo-hoverbox-table {
  width: 100%;
  border-collapse: collapse;       /* kontinuerlige zebrastriber */
  border-spacing: 0;
  margin: 0;
  font-size: 0.9em;
  border: none;
}

.ibo-frontend-wrapper .ibo-hoverbox-table td {
  padding: 6px;
  border: 0;                        /* ingen outlines */
  vertical-align: middle;
}

/* Zebra – første række grå (#f5f5f5), derefter hvid, gentag */
.ibo-frontend-wrapper .ibo-hoverbox-table tbody tr:nth-child(odd) td { background: #f5f5f5; }
.ibo-frontend-wrapper .ibo-hoverbox-table tbody tr:nth-child(even) td { background: #fff; }

/* Label- og value-celler: ingen særbaggrunde/kanter */
.ibo-frontend-wrapper .ibo-hoverbox-table .ibo-hoverbox-label,
.ibo-frontend-wrapper .ibo-hoverbox-table .ibo-hoverbox-value {
  background: transparent;
box-shadow: none;
  border-radius: 0;
  font-weight: 400; /* normal vægt */
}

/* Tal højrejusteres og bruger tabular numbers */
.ibo-frontend-wrapper .ibo-hoverbox-table .ibo-hoverbox-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   23) GLOBAL HOVERBOX (FALLBACK)
   ========================================================================== */

 /* =========================================================
    GLOBAL HOVERBOX (fallback) — samme look & zebra/pill
    ========================================================= */
#ibo-hoverbox.is-visible { display: block; opacity: 1; visibility: visible; }

#ibo-hoverbox .ibo-hoverbox {
  background: #fff !important; border-radius: 8px !important; padding: 8px 10px !important;
  max-width: 280px; line-height: 1.35; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); white-space: normal;
}
#ibo-hoverbox .info-tekst {
  font-size: 16px; color: #000; font-weight: 600; line-height: 1.25; white-space: nowrap; margin: 0 0 6px 0;
}
/* Tabel-reset + zebra/pill identisk med scoped varianten */
#ibo-hoverbox table {
  width: 100% !important; border-collapse: separate !important; border-spacing: 0 6px !important;
  border: 0 !important; background: transparent !important; margin: 0 !important; box-shadow: none !important; outline: 0 !important;
}
#ibo-hoverbox thead, #ibo-hoverbox tbody, #ibo-hoverbox tr,
#ibo-hoverbox th,    #ibo-hoverbox td {
  border: 0 !important; outline: 0 !important; box-shadow: none !important; background-image: none !important; background: transparent !important;
}
#ibo-hoverbox td { padding: 6px 8px !important; vertical-align: middle; line-height: 1.2; }
/* Zebrastriber i fallback */
#ibo-hoverbox tbody tr:nth-child(even) td { background: #f6f7f8 !important; }
/* Runde hjørner pr. række */
#ibo-hoverbox tbody tr td:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
#ibo-hoverbox tbody tr td:last-child  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
/* Label-pill i venstre kolonne */
#ibo-hoverbox .ibo-hoverbox-label {
  background: #fff !important; border-radius: 6px !important; font-weight: 600; color: #000; white-space: nowrap;
  padding: 6px 8px !important; box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
#ibo-hoverbox .ibo-hoverbox-value { color: #222; text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   23b) NORDPIL / NORTH ARROW
   ========================================================================== */

/* Wrapper til nordpil – overlay oven på oversigten */
.ibo-frontend-wrapper .ibo-north-arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 52px;
  height: 52px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  pointer-events: none;              /* må ikke blokere klik/hover på polygoner */
  z-index: 5;                        /* over billedet/polygoner, under evt. popups */

  /* Standardfarve – kan overskrives globalt eller pr. projekt */
  color: var(--ibo-north-arrow-color, #000);
}

/* Kun ikonet roteres */
.ibo-frontend-wrapper .ibo-north-arrow-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ibo-frontend-wrapper .ibo-north-arrow-icon svg,
.ibo-frontend-wrapper .ibo-north-arrow-icon img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

/* Gør pilen farvestyret via currentColor (Nordpil.svg bruger fill/stroke) */
.ibo-frontend-wrapper .ibo-north-arrow-icon svg path {
  fill: currentColor !important;
}

.ibo-frontend-wrapper .ibo-north-arrow-icon svg circle,
.ibo-frontend-wrapper .ibo-north-arrow-icon svg [stroke] {
  stroke: currentColor !important;
}

/* Label under pilen */
.ibo-frontend-wrapper .ibo-north-arrow-label {
  margin-top: 6px;
  font-size: 0.8em;
  line-height: 1.1;
  text-align: center;
  /* ingen font-family = arver brødtekst-fonten */
}

/* Tablet: lidt mindre, tættere på hjørnet */
@media (max-width: 1024px) {
  .ibo-frontend-wrapper .ibo-north-arrow {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }
}

/* Mobil: endnu mindre, så den ikke er i vejen */
@media (max-width: 640px) {
  .ibo-frontend-wrapper .ibo-north-arrow {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }
}


/* ==========================================================================
   24) POLYGON HOVERS / POINTER-EVENTS SAFETY
   ========================================================================== */

 /* =========================================================
    POLYGON HOVERS
    ========================================================= */
.ibo-frontend-wrapper .ibo-polygon.has-hover {
  stroke: var(--ibo-highlight-stroke, #fff); stroke-width: 2.5; vector-effect: non-scaling-stroke;
}
.ibo-frontend-wrapper .ibo-polygon:hover {
  /* +0.10 oven på eksisterende area-opacity */
  fill-opacity: calc((var(--ibo-area-opacity, 0.25) + 0.10));
}

/* CSS-sikring mod overlay (Elementor links ovenpå kortet) */
.ibo-frontend-wrapper .elementor-clickable,
.ibo-frontend-wrapper [data-elementor-open-lightbox],
.ibo-frontend-wrapper [data-elementor-link] { pointer-events: none; }
.ibo-frontend-wrapper .ibo-frontend-svg,
.ibo-frontend-wrapper .ibo-frontend-svg * { pointer-events: auto; }

/* Gælder både boligoversigt og oversigtskort */
.ibo-frontend-wrapper .ibo-frontend-svg {
    border-radius: 12px;
    overflow: hidden; /* VIGTIG: ellers trækker <image> udenfor radius */
    background: transparent !important;
}

.ibo-frontend-wrapper .ibo-frontend-svg image {
    border-radius: 12px;
    background: transparent !important;
}

.ibo-frontend-wrapper {
    background: transparent !important;
}


/* ==========================================================================
   25) OVERLAY (MODAL FALLBACK) + TOOLTIP + INFO-PUNKTER + OMRÅDER
   ========================================================================== */

#ibo-overlay-root { position: fixed; inset: 0; display: none; z-index: 999999; }
#ibo-overlay-root.is-open { display: block; }
#ibo-overlay-root .ibo-ovl__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); }
#ibo-overlay-root .ibo-ovl__panel {
  position: absolute; inset: 0; margin: auto; width: min(880px, 92vw); height: min(80vh, 720px);
  background: #fff; border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.25);
  outline: none; padding: 16px 16px 12px; display: grid; grid-template-rows: auto 1fr; animation: iboOverlayFadeIn .28s ease;
}
@keyframes iboOverlayFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
#ibo-overlay-root .ibo-ovl__close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer;
  background: #f1f1f1; font-size: 20px; line-height: 1; display: grid; place-items: center;
}
#ibo-overlay-root .ibo-ovl__header { font-size: 16px; padding: 4px 4px 12px; border-bottom: 1px solid #eee; }
#ibo-overlay-root .ibo-ovl__content { overflow: auto; padding: 8px; }
#ibo-overlay-root .ibo-ovl__spinner {
  width: 28px; height: 28px; margin: 24px auto; border: 3px solid #eee; border-top-color: #333; border-radius: 50%; animation: ibo-spin .9s linear infinite;
}
@keyframes ibo-spin { to { transform: rotate(360deg);} }

.ibo-tip {
  position: fixed; background: #111; color: #fff; font-size: 13px; line-height: 1.3; padding: 8px 10px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 99999; pointer-events: none; display: none; max-width: 320px; white-space: normal;
}
.ibo-tip code { background: rgba(255,255,255,.12); padding: .1em .3em; border-radius: 4px; }

/* Infopunkt: ikon + label – ny struktur (group + circle + image) */
.ibo-infopunkt-group {
  pointer-events: none; /* gruppen må ikke blokere klik på polygonen */
}

.ibo-infopunkt-bg {
  fill: #ffffff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
  pointer-events: none;
}

/* Selve ikonet inde i cirklen
   Størrelse styres via width/height-attributterne på <image>,
   så vi påvirker IKKE størrelsen her – kun formen/klik. */
.ibo-infopunkt-icon {
  pointer-events: none;
}

/* Grund-styling for label-tekst under infopunktet */
.ibo-infopunkt-label {
  font-family: inherit, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--ibo-infopunkt-font-size, 14px);
  font-weight: 500;
  fill: #000;
  text-anchor: middle;
  pointer-events: none;
}


/* Oversigts-områder (ikke bolig-status) */
.ibo-polygon--area { 
  transition: fill-opacity .2s ease; 
}
.ibo-polygon--area:hover,
.ibo-polygon--area.hovered { 
  fill-opacity: calc(var(--ibo-overview-area-opacity, 0.25) + 0.10) !important; 
}

/* Overlay-områder (åbner popup) – fallback farver hvis ingen inline styles */
.ibo-frontend-svg .ibo-polygon[data-link-type="overlay"] {
  fill: var(--ibo-area-fill, #0E412B);
  stroke: var(--ibo-area-stroke, var(--ibo-area-fill, #0E412B));
  fill-opacity: var(--ibo-area-opacity, 0.25);
}

/* Lidt ekstra luft under ikonet på oversigtskort */
.ibo-frontend-wrapper.ibo-oversigtskort-wrapper .ibo-frontend-svg .ibo-infopunkt-label {
  transform: translateY(4px) !important;
}

/* Basis-størrelse, som JS læser via getComputedStyle */
:root {
  --ibo-infopunkt-size: 28px;   /* icon circle size */
}




/* ==========================================================================
   Infopunkt label når hover er slået til
   ========================================================================== */

/* Hoverboksens indhold */
.ibo-frontend-wrapper .ibo-hoverbox {
  background:#fff !important;
  border-radius:6px !important;
  padding:6px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  max-width:280px;
  line-height:1.35;
}

/* Titel linje (brødtekst, normal, 1em) */
.ibo-frontend-wrapper .ibo-hoverbox .info-tekst {
  font-size:1em;
  font-weight:400;
  margin:0 0 6px 0;
  font-family: inherit, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Zebrastribet tabel (ingen grid/outline) */
.ibo-frontend-wrapper .ibo-hoverbox-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0 6px;
}
.ibo-frontend-wrapper .ibo-hoverbox-table td {
  padding:6px 8px;
  font-size:0.9em;
  line-height:1.2;
  font-family: inherit, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.ibo-frontend-wrapper .ibo-hoverbox-table tbody tr:nth-child(odd)  td { background:#f5f5f5; }
.ibo-frontend-wrapper .ibo-hoverbox-table tbody tr:nth-child(even) td { background:#fff; }
.ibo-frontend-wrapper .ibo-hoverbox-table tbody tr td:first-child  { border-top-left-radius:6px; border-bottom-left-radius:6px; }
.ibo-frontend-wrapper .ibo-hoverbox-table tbody tr td:last-child   { border-top-right-radius:6px; border-bottom-right-radius:6px; }

/* =========================================================
   Infopunkt labels på oversigtskort
   - Labels tegnes altid som <text>, men synlighed styres via
     data-infopunkt-show-labels på .ibo-oversigtskort-wrapper
   ========================================================= */

/* Grundstil for infopunkt-labels (tekst under ikon) */
.ibo-oversigtskort-wrapper .ibo-infopunkt-label {
  font-family: inherit, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--ibo-infopunkt-font-size, 14px);
  font-weight: 500;
  fill: #000;
  pointer-events: none;
}

/* 1) Når labels skal være synlige konstant (global setting = ON) */
.ibo-oversigtskort-wrapper[data-infopunkt-show-labels="1"] .ibo-infopunkt-label {
  opacity: 1 !important;
}

/* 2) Når labels kun skal vises ved hover (global setting = OFF) */
.ibo-oversigtskort-wrapper[data-infopunkt-show-labels="0"] .ibo-infopunkt-label {
  opacity: 0 !important;
  transition: opacity .15s ease-out;
}

/* Vis label, når man hover infopunktet (polygonen)
   DOM-orden for infopunkt:
   <polygon class="polygon-infopunkt" ... />
   <image  class="ibo-infopunkt-icon" ... />
   <text   class="ibo-infopunkt-label" ...>Label</text>
*/
.ibo-oversigtskort-wrapper[data-infopunkt-show-labels="0"]
  .polygon-infopunkt:hover + .ibo-infopunkt-icon + .ibo-infopunkt-label {
  opacity: 1 !important;
}



/* ==========================================================================
   26) RESPONSIVE OVERLAY (PANEL)
   ========================================================================== */

 /* =========================================================
    RESPONSIVE OVERLAY
    ========================================================= */
@media (max-width: 600px) {
  #ibo-overlay-root .ibo-ovl__panel { width: 94vw; height: 80vh; border-radius: 10px; padding: 12px; }
  #ibo-overlay-root .ibo-ovl__close { top: 6px; right: 6px; width: 32px; height: 32px; font-size: 18px; }
}

/* Center-mode hint */

.ibo-hoverbox-host.is-centered .ibo-hoverbox {
  max-width: 90vw;
}

/* Inline overlay – generel boks */
#ibo-inline-overlay {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Indholdet inde i boksen – sørg for at lange ord/overskrifter bryder */
#ibo-inline-overlay .ibo-inline-overlay-content {
  overflow-wrap: break-word;   /* moderne standard */
  word-wrap: break-word;       /* ældre alias */
  word-break: break-word;      /* som nød-løsning ved meget lange ord */
  hyphens: auto;               /* tillad automatisk orddeling */
}

/* Ekstra sikkerhed for overskrifter i overlayet */
#ibo-inline-overlay .ibo-inline-overlay-content h1,
#ibo-inline-overlay .ibo-inline-overlay-content h2,
#ibo-inline-overlay .ibo-inline-overlay-content h3 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}





/* ==========================================================================
   27) ANIMATIONER
   ========================================================================== */

 /* =========================================================
    ANIMATIONER
    ========================================================= */
@keyframes iboOverlayFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } }
/* Visuel “highlight” pulse på polygon */
.ibo-polygon.is-highlight { animation: iboHighlightPulse 1.8s ease-out; }
@keyframes iboHighlightPulse {
  0% { stroke-width: var(--ibo-highlight-width, 2px); filter: brightness(1); }
  30%{ stroke-width: calc(var(--ibo-highlight-width, 2px) + 1px); filter: brightness(1.3); }
  100%{ stroke-width: var(--ibo-highlight-width, 2px); filter: brightness(1); }
}


/* ==========================================================================
   28) IBO EXT LABELS (FLYDENDE EKSTERN LABEL)
   ========================================================================== */

 /* =========================================================
    IBO EXT LABELS (flydende ekstern label ved polygoner)
    ========================================================= */
#ibo-label-float.ibo-ext-label {
  display: inline-block; width: auto !important; min-width: 0 !important; max-width: none !important; white-space: nowrap;
  box-sizing: border-box; background: #fff; color: #111; border-radius: 6px; padding: 7px; border: 0; outline: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  pointer-events: none; /* position:fixed sættes i JS */
  z-index: 99998;
}