/**
Theme Name: yachteksperten
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features:
# WooCommerce Ready
# Responsive
# Compatible with major plugins
# Translation Ready
# Extendible with premium addons
# Regularly updated
# Designed, Developed, Maintained & Supported by Brainstorm Force.
Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yachteksperten
Template: astra
*/








.billede-container {
  position: relative; /* så barnet .um-fav-btn kan positioneres */
}

.um-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff; /* hvid cirkel */
  cursor: pointer;
  padding: 0;
}

.um-fav-btn:hover {
 background: #fff; /* hvid cirkel */
	
}

/* brug ::before til at vise hjerte‑ikonet */
.um-fav-btn::before {
  content: "\2661";         /* ♡ */
  font-size: 18px;
  line-height: 32px;
  display: block;
  text-align: center;
  color: #202529;              /* rød “tomt” hjerte */
}
.um-fav-btn.remove::before {
  content: "\2665";         /* ♥ */
  color: #e00;              /* rødt “fyldt” hjerte */
}





html.offcanvas-html-lock, /* Vi tilføjer denne klasse via JS nedenfor */
body.offcanvas-open {
  overflow: hidden !important;
  /* Nogle browsere/setups kræver også height/position for at låse helt */
  /* height: 100% !important; */ /* Afprøv denne hvis overflow alene ikke virker */
  /* position: fixed !important; */ /* MEGET aggressivt - kan bryde layout, brug med forsigtighed! */
  /* width: 100% !important; */ /* Nødvendigt hvis position: fixed bruges */
}


 /* --- Grundlæggende Layout --- */
 .bade-search-form-container { /* TILFØJET/ÆNDRET: Padding rundt om hele formen */

     box-sizing: border-box; /* Sørger for padding er inkluderet i elementets boks */
 }
 .bade-search-form-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:12px;align-items:stretch;margin-bottom:12px}
 .filter-wrapper{position:relative;display:flex;flex-direction:column}

 /* --- Filter Toggle Knapper --- */
 .filter-toggle{width:100%;text-align:left;padding:10px 12px;background:#fff;border:1px solid #ccc;color:#222;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:16px;transition:border-color .2s ease;border-radius:4px;flex-grow:1;min-height:44px;box-sizing:border-box}
 .filter-toggle:hover{background:#fff; border-color:#222; color:#222}
 .filter-toggle:active{background:#fff; color:#222}
 .filter-toggle:focus {background:#fff; color:#222; outline: none; border: 2px solid #001437; padding: 9px 11px;}
 .filter-toggle.disabled{cursor:not-allowed;background-color:#f8f8f8!important;color:#999!important;opacity:.7;border-color:#ccc!important}
 .filter-toggle.disabled:hover{border-color:#ccc!important}
 .filter-toggle .button-label{flex-grow:1;margin-right:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .filter-toggle .chevron-icon{display:inline-block;width:1em;height:1em;vertical-align:middle;margin-left:5px;transition:transform .2s ease-in-out;line-height:1;stroke:currentColor}
 .filter-toggle[aria-expanded=true]{ /* Ingen specifik baggrunds/farve ændring */ }
 .filter-toggle[aria-expanded=true]:focus { border: 2px solid #001437; padding: 9px 11px; }
 .filter-toggle[aria-expanded=true]:not(:focus) { border: 1px solid #999; padding: 10px 12px; }
 .filter-toggle[aria-expanded=true] .chevron-icon{transform:rotate(180deg)}

 /* --- Generel Dropdown/Panel Styling --- */
 .filter-panel { background:#fff; border:1px solid #ccc; box-shadow:0 2px 6px rgba(0,0,0,.15); z-index:1000; box-sizing:border-box; border-radius: 4px; }

 /* --- Desktop Dropdown Specifik Styling --- */
 @media (min-width: 768px) {
     .filter-panel { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 15px; margin-top: 2px; min-width: 280px; /* Lidt bredere for mere plads */ }
     .filter-panel.is-active { display: block; }
     .off-canvas-header, .off-canvas-footer, #off-canvas-overlay { display: none !important; }
     .filter-reset-button.desktop-reset { display: block; /* Vis desktop reset knap */ }
     .filter-dropdown-title.desktop-only-title { display: block; /* Vis desktop titel */ }
     /* Juster padding for range filter inputs på desktop for at passe med labels */
     .range-filter-panel .input-group input[type=number],
     .range-filter-panel .input-group input[type=text] {
         padding: 8px 10px;
     }
 }

 /* --- Mobil Off-Canvas Specifik Styling --- */
 @media (max-width: 767px) {
     .filter-panel {
         display: flex;
         flex-direction: column;
         position: fixed;
         top: 0;
         right: 0;
         width: 100%; /* ÆNDRET: Fuld bredde */
         max-width: 100%; /* ÆNDRET: Fuld bredde */
         height: 100%;
         transform: translateX(100%);
         transition: transform 0.3s ease-in-out;
         box-shadow: -2px 0 5px rgba(0,0,0,0.1);
         overflow: hidden;
         z-index: 1002;
         border-radius: 0;
     }
     .filter-panel.is-active { transform: translateX(0); }
     .off-canvas-header { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #eee; background-color: #f8f8f8; flex-shrink: 0; }
     .off-canvas-back {box-shadow: none; background: none; border: none; padding: 5px; margin-right: 10px; cursor: pointer; line-height: 1; color: #666; font-size: 20px; /* Lidt større pil */ }
     .off-canvas-back svg { display: block; width: 20px; height: 20px; }
     .off-canvas-title { flex-grow: 1; font-weight: bold; font-size: 16px; text-align: center; color: #222; }
     .off-canvas-reset { margin-top: 0; padding: 4px 12px; font-size: 14px; background: none; border: none; color: #0073aa; text-decoration: underline; cursor: pointer; width: auto; margin-left: auto;}
     .off-canvas-reset:hover { color: #000; background: none; }
     .off-canvas-content {
         flex-grow: 1;
         overflow-y: auto;
         padding: 24px; /* TILFØJET/ÆNDRET: Øget padding i indholdsområdet */
         -webkit-overflow-scrolling: touch;
     }
     .off-canvas-content .filter-search-input { margin-bottom: 15px; padding: 10px 12px; /* Lidt større input */ }
     .off-canvas-content .checkbox-list-container, .off-canvas-content .type-radio-list { max-height: none; overflow-y: visible; border: none; padding: 0; }
     .off-canvas-content .range-filter-panel .slider-container {
         margin-top: 30px;
         margin-bottom: 35px; /* Lidt mere plads under slider */
     }
     .off-canvas-content .dimension-group { margin-bottom: 24px; }
     .off-canvas-footer { padding: 24px; border-top: 1px solid #eee; background-color: #fff; flex-shrink: 0; box-shadow: 0 -2px 4px rgba(0,0,0,0.05); }
     .off-canvas-apply { display: block; width: 100%; padding: 12px 15px; background-color: #ff5722; color: white; border: none; border-radius: 4px; font-size: 1.1em; /* Lidt større tekst */ font-weight: bold; text-align: center; cursor: pointer; }
     .off-canvas-apply:hover { background-color: #e64a19; }
     #off-canvas-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; }
     #off-canvas-overlay.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s ease-in-out, visibility 0s linear; }
     body.off-canvas-mode-active { overflow: hidden; }
     /* Skjul desktop-specifikke elementer på mobil */
     .filter-reset-button.desktop-reset { display: none; }
     .filter-dropdown-title.desktop-only-title { display: none; }
 }

 /* --- Generel Dropdown/Panel Indhold Styling --- */
 .filter-dropdown-title { color: #222; font-size: 16px; margin-top: 0; margin-bottom: 15px; font-weight: bold; }
 .filter-panel ul{ list-style: none; padding: 0; margin: 0; }
 .filter-panel li{ margin-bottom: 0; }
 .filter-panel label {display: flex; align-items: center; justify-content: space-between; position: relative; cursor: pointer; padding: 8px 5px; /* Lidt mere vertikal padding */ margin-bottom: 2px; background-color: transparent !important; transition: background-color 0.1s ease; border-radius: 3px; }
 .filter-panel label:hover { background-color: #f5f5f5 !important; }
 .filter-panel input[type="checkbox"], .filter-panel input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; pointer-events: none; }
 .custom-checkbox, .custom-radio { display: inline-block; width: 20px; height: 20px; border: 2px solid #adadad; background-color: #fff; margin-right: 12px; vertical-align: middle; position: relative; flex-shrink: 0; transition: border-color 0.1s ease, background-color 0.1s ease; }
 .custom-radio { border-radius: 50%; } .custom-checkbox { border-radius: 4px; }
 .filter-panel label:hover .custom-checkbox, .filter-panel label:hover .custom-radio { border-color: #777; }
 .filter-panel input[type="radio"]:checked + .custom-radio::after { content: ""; display: block; width: 12px; height: 12px; background: #001437; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
 .filter-panel input[type="checkbox"]:checked + .custom-checkbox { background-color: #001437; border-color: #001437; }
 .filter-panel input[type="checkbox"]:checked + .custom-checkbox::after { content: ""; display: block; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; position: absolute; left: 6px; top: 2px; transform: rotate(45deg); }
 .filter-label-text { flex-grow: 1; margin-right: 12px; line-height: 1.3; }
 .filter-counter { font-size: 12px; color: #666; white-space: nowrap; margin-left: auto; padding-left: 12px; }
 .checkbox-list-container, .type-radio-list{max-height:200px;overflow-y:auto;margin-bottom:12px}
 .filter-search-input{width:100%;padding:8px 12px;margin-bottom:12px;border:1px solid #ccc;box-sizing:border-box;border-radius:3px}

 /* Dimensioner Group */
 .filter-panel .dimension-group{margin-bottom:12px} /* Lidt mere plads */
 .filter-panel .dimension-label {margin-bottom: 8px; font-weight: bold; font-size: 16px; color: #222; cursor: default;}
 .filter-panel .dimension-label:hover { background: transparent !important; }
 .filter-panel .dimension-inputs { display: flex; gap: 12px; align-items: flex-start; }

 /* Range Filters (gælder både desktop og mobil, med mindre overskrevet i media query) */
 .range-filter-panel .slider-container { margin: 30px 12px 35px 12px; position:relative; }
 .range-filter-panel .from-to-inputs { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
 .range-filter-panel .input-group { display:flex; flex-direction: row; align-items: center; flex: 1; gap: 4px; }
 .range-filter-panel .input-group label { font-size:14px; margin-bottom: 0; color:#666; display:inline-block; width: auto; cursor:default!important; padding:0!important; transition:none; background-color:transparent!important; border-radius:0; flex-shrink: 0; }
 .range-filter-panel .input-group label:hover {background-color:transparent!important}
 .dimension-group .input-group label { display: none; /* Skjul Fra/Til for dimensioner */ }


 }
 /* Skjul pile */
 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

 /* Reset knap (generel) */
 .filter-reset-button{margin-top:15px;padding:8px 16px;background:#f0f0f0; /* Lidt mørkere baggrund */ border:1px solid #ccc;cursor:pointer;font-size:14px;border-radius:4px;display:block;width:100%;text-align:center; color: #555; /* Mørkere tekst */ transition: background-color 0.2s ease, color 0.2s ease; }
 .filter-reset-button:hover{background:#e0e0e0; color: #222;}

 /* Reset knap specifikt for off-canvas header */
 .off-canvas-reset {color: #666; box-shadow: none; margin-top: 0; padding: 4px 12px; font-size: 14px; background: none; border: none; color: #0073aa; text-decoration: underline; width: auto; margin-left: auto; }
 .off-canvas-reset:hover {color: #222; background: none; }

 /* Skjul desktop reset knapper på mobil */
 @media (max-width: 767px) { .filter-reset-button.desktop-reset { display: none; } }

 /* Submit knap */
 .form-group-button{margin-top:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch} #bade-submit-button{padding:10px 15px;cursor:pointer;background-color:#ff5722;color:#fff;border:1px solid #e64a19;font-size:16px; /* Lidt større */ font-weight:700;border-radius:4px;transition:background-color .2s ease;text-align:center;flex-grow:1;display:flex;align-items:center;justify-content:center;line-height:1.4;min-height:44px} #bade-submit-button:hover{background-color:#e64a19}#bade-submit-button span{margin:0 5px}

 /* Nulstil links container */
 .reset-all-container{text-align:center;margin-top:20px /* Mere plads over */} .clear-all-link, .advanced-search-link{font-size:14px;color:#555;text-decoration:underline;cursor:pointer;display:inline-block; text-decoration: underline;} .clear-all-link:hover, .advanced-search-link:hover{color:#000} .advanced-search-link { margin-left: 15px; }

 /* Slider styling */
 .ui-slider{position:relative;text-align:left;background:#e9e9e9;border-radius:3px; height: 8px; /* Sikrer standard højde */ }
 .ui-slider .ui-slider-handle{position:absolute;z-index:2;width:28px;height:28px;cursor:pointer;-ms-touch-action:none;touch-action:none;border-radius:50%;background:#fff;border:3px solid #001437;box-shadow:0 1px 3px rgba(0,0,0,.15);top:50%;transform:translateY(-50%);margin-left:-14px; /* Centrerer håndtaget */ }
 .ui-slider .ui-slider-handle:focus,.ui-slider .ui-slider-handle:hover{background:#fff}
 .ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0;background:#001437;border-radius:3px; /* Samme radius som slider baggrund */ top:0;height:100%} /* Sikrer range fylder højden */
 .ui-slider-horizontal .ui-slider-range-min{left:0}
 .ui-slider-horizontal .ui-slider-range-max{right:0}

 /* Mobil Layout Grid Justering */
 @media (max-width: 767px) {
     .bade-search-form-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
     /* Gør Type, Mærke, Model fuld bredde */
     .bade-search-form-grid .filter-wrapper:nth-child(1),
     .bade-search-form-grid .filter-wrapper:nth-child(2),
     .bade-search-form-grid .filter-wrapper:nth-child(3) {
         grid-column: 1 / -1;
     }
     /* Gør Submit knap fuld bredde */
     .bade-search-form-grid .form-group-button.filter-wrapper {
         grid-column: 1 / -1;
     }
     .reset-all-container {
		 margin-top: 12px;
		 
	 }
     .advanced-search-link { margin-left: 12px; }
 }




/* Styling for Mærke/Model søgefelt ved fokus */
.filter-panel .filter-search-input:focus, /* Brug browserens :focus pseudo-klasse */
.filter-panel .filter-search-input.search-input-focused { /* Behold klassen for JS-styret fokus hvis nødvendigt */
  border: 2px solid #222; /* Ændret til stiplet og en standard WordPress blå */
  outline: none; /* Fjern standard browser outline */
    padding: 7px 9px;
}

/* Sørg for at standard borderen er sat korrekt */
.filter-panel .filter-search-input {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px solid #ccc; /* Standard border */
    box-sizing: border-box;
    border-radius: 4px;
    transition: border-color 0s ease-in-out, padding 0s ease-in-out;
}







/* Skjul pile/spinners på nummer-input felter */
.filter-panel input[type=number]::-webkit-inner-spin-button,
.filter-panel input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filter-panel input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}


 /* Input felter (gælder både desktop og mobil, med mindre overskrevet) */
 .range-filter-panel .input-group input[type=number],
 .range-filter-panel .input-group input[type=text],
 .dimension-group .input-group input[type=number] {
     width:100%;
     padding:8px 10px;
     border:1px solid #ccc;
     box-sizing:border-box;
     -moz-appearance:textfield;
     border-radius: 4px !important; /* Korrekt border-radius */
     flex-grow: 1;
     font-size: 14px;
 }

/* Fokus styling for alle inputfelter i filter-paneler (undtagen søgefelter) */
.filter-panel .input-group input:focus,
.filter-panel .dimension-inputs input:focus {
  border: 2px solid #222 !important;
  outline: none; /* Fjerner standard browser outline */
  padding: 7px 9px;
  transition: border-color 0s ease-in-out, padding 0s ease-in-out;
}










/* Styling til søgeresultatsiden */
.bade-search-results {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background: #fff;
}
.bade-search-results h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    color: #333;
}
.bade-search-results .bade-item {
    border-bottom: 1px solid #eee;
    padding: 14px 0;
}
.bade-search-results .bade-item:last-child {
    border: none;
}
.bade-search-results .bade-item h3 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    color: #333;
}
.bade-search-results .bade-meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 12px;
}
.bade-search-results .bade-content {
    font-size: 14px;
    color: #555;
}


/* Styling til filter på kategorisider  */
/* Styling til filter på kategorisider  */

/* CSS-variabler for central styring */
:root {
    --primary-color: #0073aa;
    --secondary-color: #005f8f;
    --bg-color: #fefefe;
    --border-color: #ddd; /* Grundlæggende kantfarve */
    --input-border-color: #ccc; /* Tydeligere kant til inputs */
    --card-shadow: rgba(0, 0, 0, 0.15);
    --transition-speed: 0.3s;
    --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* Wrapper for filter og cards */
.filter-and-cards {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Forbedret filter-kolonne */
.filter-column {
    width: 320px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 12px 0px 12px;
    box-sizing: border-box;
    background: var(--bg-color);
}

/* Overskrifter */
.filter-column h2 {
    font-size: 24px;
    margin: 0 0 12px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-weight: 600;
}

/* Fieldset og legend */
fieldset {
    border: none;
    margin: 0 0 10px;
    padding: 0;
}
legend {
    font-size: 14px !important;
    margin: 6px 0px 2px 0px !important; /* Justeret margin-bottom */
    padding-left:  2px !important; /* NYT: Fjerner potentiel browser-indentation */
    font-weight: 600;
    width: 100%; /* Sikrer fuld bredde */
    display: block; /* Sikrer det opfører sig som et block element */
}

/* ===== START: Opdateret CSS for Custom Checkboxes (baseret på PHP) ===== */

/* Generel styling for filter-labels (retter mod de klasser din PHP bruger) */
.filter-section .maerke-option,
.filter-section .model-option, /* Tilføjet model-option */
.filter-section .placering-option,
.filter-section .udstyr-option,
.filter-section .braendstof-option,
.filter-section .interior-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    user-select: none;
    font-size: 14px;
    color: #2a333c;
}

/* Skjul standard-udseendet og style selve input-feltet */
.filter-section input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Dimensioner og afstand - MINDRE */
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 8px;
    flex-shrink: 0;

    /* Baggrund og kant (ikke-checked) */
    background-color: var(--bg-color);
    border: 2px solid #adb5bd;

    /* Positionering og opførsel */
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    top: -1px;

    /* Overgange for effekter */
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

/* Styling når checkboxen er checked */
.filter-section input[type="checkbox"]:checked {
    background-color: #2a333c;
    border-color: #2a333c;
}

/* Opret fluebenet med ::after på selve :checked input - STØRRE IKON & BEDRE CENTRERING */
.filter-section input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    display: block;

    /* Fluebenets form, farve og position - JUSTERET FOR CENTRERING */
    left: 4px;
    top: 2px;       /* ÆNDRET fra 2px - Flyttet lidt ned */
    width: 4px;
    height:8px;
    border: solid white;
    border-width: 0 2px 2px 0; /* Beholder tykkelse */
    transform: rotate(45deg);
}

/* Fokus-styling for tilgængelighed */
.filter-section input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.5);
}

/* Hover-effekt */
.filter-section input[type="checkbox"]:not(:checked):hover {
    border-color: #888;
}
.filter-section input[type="checkbox"]:checked:hover {
    background-color: #1e252c;
    border-color: #1e252c;
}

/* ===== SLUT: Opdateret CSS for Custom Checkboxes (baseret på PHP) ===== */


/* Input felter side om side */
.range-group {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
/* Style number inputs i range-group */
.range-group input[type="number"] {
    padding: 8px;
    border: 1px solid var(--input-border-color); /* Brug den tydeligere kantfarve */
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%; /* Gør dem ens bredde */
}

/* Filter-knapper (generelt - ikke i brug pt) */
.filter-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.filter-buttons button,
.clear-filter-button { /* .clear-filter-button bruges ikke aktivt i HTML */
    padding: 8px 15px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background var(--transition-speed), transform var(--transition-speed);
}
.filter-buttons button:hover,
.clear-filter-button:hover {
    background: var(--secondary-color);
    transform: scale(1.02);
}

/* Styles for den specifikke Søg-knap (Go) i range-group */
.filter-submit-button-range {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 6px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background var(--transition-speed), transform var(--transition-speed);
    margin-left: auto; /* Skubber knappen til højre */
    align-self: center; /* Vertikal centrering */
    flex-shrink: 0; /* Forhindrer den i at skrumpe */
}
.filter-submit-button-range:hover {
    background: var(--secondary-color);
    transform: scale(1.02);
}


/* Details styling */
details {
    margin-bottom: 15px;
    position: relative;
}
details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    padding-left: 5px; /* Beholder lidt plads til venstre for teksten */
    cursor: pointer;
    transition: color var(--transition-speed);
    list-style: none; /* Fjerner standard trekant/markør */
}
details summary::-webkit-details-marker { display: none; } /* Fjerner standard trekant i Chrome/Safari */
details summary::marker { display: none; } /* Fjerner standard trekant i Firefox */

details summary:hover {
    color: var(--primary-color);
}
/* NYT: Styling for åben/aktiv tab */
details[open] > summary {
    color: var(--primary-color);
}

/* Chevron ikon rotation */
details summary .chevron-icon {
    width: 18px;
    height: 18px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    transition: transform var(--transition-speed);
    transform: rotate(90deg); /* Start pegende nedad */
    flex-shrink: 0;
}
details[open] > summary .chevron-icon {
    transform: rotate(-90deg); /* Peg til højre når åben */
}

/* Cards kolonne */
.cards-column {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

/* Grid med bådkort */
.cards-column .boat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 10px;
}

/* Selve bådkortet */
.cards-column .boat-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.boat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Fjern understregning for boat-card links og alle deres børn */
.boat-card,
.boat-card a,
.boat-card a:visited,
.boat-card a:hover,
.boat-card a:active {
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}


/* Fast højde til billedcontaineren */
.billede-container {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #f7f7f7;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-image {
    display: none; /* Kun aktiv slide vises (styret af JS) */
    width: 100%;
    height: 100%;
    text-align: center;
}
.slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.slider-image.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    background-color: #eee;
}

/* Slider knapper (prev/next) */
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}
.billede-container:hover .slider-button {
    opacity: 1;
}
.slider-button-prev { left: 10px; }
.slider-button-next { right: 10px; }
.slider-button:hover {
    background: rgba(0, 0, 0, 0.8);
}
.slider-button svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Slider dots */
.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    justify-content: center;
    align-items: center;
}
.dot-container { /* Ydre container for hver dot */
    width: 10px; /* Juster størrelse her */
    height: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Gør hele området klikbart */
}
.dot { /* Den indre visuelle dot */
    width: 8px; /* Lidt mindre end containeren */
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.dot.active {
    background-color: #fff;
    transform: scale(1.1); /* Gør den lidt større */
}


/* Indhold i bådkortet */
.boat-card-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.boat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.seller-logo img {
    width: 50px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
    border-radius: 4px;
}
.boat-title {
    font-size: 18px;
    margin: 0;
    flex: 1;
    font-weight: 600;
    line-height: 1.3;
}
.boat-price {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: var(--primary-color);
}
.boat-tags {
    margin-bottom: 10px;
    line-height: 1.6;
}
.boat-tag {
    display: inline-block;
    background: #f0f0f0;
    color: #555;
    padding: 3px 8px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 13px;
}
.boat-location {
    display: flex;
    align-items: center;
    margin-top: auto; /* Skubber placering til bunden */
    font-size: 14px;
    color: #666;
}
.location-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    color: #888;
}

/* --- Off-canvas filter (Mobil) --- */
/* Knap til at åbne off-canvas */
#open-filter-menu-button {
    display: none; /* Vises kun på mobil via media query */
    padding: 10px 15px;
    margin-bottom: 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    align-items: center;
    gap: 8px;
}
#open-filter-menu-button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Overlay baggrund */
#offcanvas-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6); z-index: 1000;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}
#offcanvas-overlay.open {
    opacity: 1; visibility: visible; transition-delay: 0s;
}

/* Selve off-canvas menuen */
#offcanvas-filter-menu {
    position: fixed; top: 0; left: -100%; width: 100%; max-width: 100%; height: 100%;
    background-color: var(--bg-color); z-index: 1001;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    box-sizing: border-box;
    display: flex; flex-direction: column; overflow: hidden;
}
#offcanvas-filter-menu.open { left: 0; }

/* Off-canvas header */
.offcanvas-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.offcanvas-header h3 { margin: 0; font-size: 1.1em; font-weight: 600; }
#close-filter-menu-button {
    background: none; border: none; font-size: 28px; line-height: 1;
    padding: 0 5px; cursor: pointer; color: #666;
}
#close-filter-menu-button:hover { color: #333; }

/* Scrollbart indholdsområde i off-canvas */
#offcanvas-filter-menu .offcanvas-content {
    flex-grow: 1; overflow-y: auto;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
#offcanvas-filter-menu .filter-tabs { padding: 20px; }

/* Off-canvas footer */
.offcanvas-footer {
    display: flex; gap: 10px; padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background-color: #f9f9f9; flex-shrink: 0;
}
.offcanvas-footer .filter-apply-mobile,
.offcanvas-footer .clear-filters-mobile {
    flex: 1; padding: 12px 15px; border-radius: 4px;
    font-size: 1em; font-weight: 500; text-align: center;
    cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.offcanvas-footer .filter-apply-mobile { background-color: var(--primary-color); color: white; border: none; }
.offcanvas-footer .filter-apply-mobile:hover { background-color: var(--secondary-color); }
.offcanvas-footer .clear-filters-mobile { background-color: var(--bg-color); color: #666; border: 1px solid var(--input-border-color); text-decoration: none; }
.offcanvas-footer .clear-filters-mobile:hover { background-color: #eee; color: #333; }

/* Skjul/vis baseret på skærmstørrelse */
@media(max-width: 900px) {
    .filter-column { display: none; }
    #open-filter-menu-button { display: inline-flex; }
}
@media(min-width: 901px) {
    .filter-column { display: block; }
    #open-filter-menu-button { display: none; }
    #offcanvas-filter-menu { left: -100% !important; }
    #offcanvas-overlay { display: none !important; opacity: 0 !important; visibility: hidden !important; }
    body.offcanvas-open { overflow: auto !important; } /* Tillad scroll igen på body på desktop */
}

/* Specifik styling inde i off-canvas */
#offcanvas-filter-menu .filter-search-input { margin-bottom: 12px; width: 100%; padding: 8px; border: 1px solid var(--input-border-color); border-radius: 4px; box-sizing: border-box; }
#offcanvas-filter-menu .checkbox-list { max-height: none; } /* Ingen højdebegrænsning i off-canvas */
#offcanvas-filter-menu .load-more-button { background: none; border: none; color: var(--primary-color); text-decoration: underline; cursor: pointer; padding: 8px 0; font-size: 14px; margin-top: 8px; display: block; width: 100%; text-align: left; }
#offcanvas-filter-menu .load-more-button:hover { color: var(--secondary-color); }
#offcanvas-filter-menu .filter-option { display: flex; align-items: center; margin-bottom: 8px; cursor: pointer; }
#offcanvas-filter-menu .filter-option input[type=checkbox] { margin-right: 8px; }
#offcanvas-filter-menu .chevron-icon { width: 18px; height: 18px; margin-left: 8px; display: inline-block; vertical-align: middle; transition: transform 0.3s; transform: rotate(-90deg); flex-shrink: 0; stroke: currentColor; }
#offcanvas-filter-menu details[open]>summary .chevron-icon { transform: rotate(0deg); }

/* --- Valgte filtre / Chips --- */
.selected-filters-container { min-height: 30px; /* Giver lidt plads selvom ingen filtre er valgt */ }
.selected-filters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #eee;
}
.selected-filters span:first-child { /* "Filtre:" teksten */
    font-weight: 600; margin-right: 5px;
}
.selected-filters .clear-filters { /* Nulstil knap */
    background-color: #6b6b6b; color: #fff; border-radius: 16px; padding: 6px 12px;
    text-decoration: none; font-size: 12px; font-family: var(--font-family);
    display: inline-flex; align-items: center; cursor: pointer; transition: background-color 0.2s ease;
    /* Fjernet margin-left: auto for at følge flowet */
}
.selected-filters .clear-filters:hover { background-color: #505050; }
.selected-filters .filter-chip { /* Enkelt filter chip */
    display: inline-flex; align-items: center; background-color: #eee; color: #333;

    border-radius: 16px; padding: 6px 10px; font-size: 12px; font-family: var(--font-family);
}
.selected-filters .filter-chip .remove-filter { /* Fjern (x) */
    margin-left: 4px; text-decoration: none; color: #888; cursor: pointer;
    font-weight: bold; font-size: 14px; line-height: 1; transition: color 0.2s ease;
        display: inline-flex;
        padding-bottom: 3px;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;

}
.selected-filters .filter-chip .remove-filter:hover { color: #333; }

/* Søgefelter generelt i filter-kolonnen */
.filter-column .filter-search-input {
    margin-bottom: 10px; width: 100%; padding: 8px;
    border: 1px solid var(--input-border-color); border-radius: 4px;
    box-sizing: border-box;
}

/* Tab separator (border-bottom) */
.filter-tabs details {
    border-bottom: 1px solid #e0e0e0; margin-bottom: 15px; padding-bottom: 10px; position: relative;
}
.filter-tabs details:last-of-type { border-bottom: none; }

/* Fjern spin-knapper */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Style select dropdowns */
.filter-section select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--input-border-color); border-radius: 4px;
    background-color: #fff; box-sizing: border-box; margin-top: 4px; appearance: none;
    -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888888' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}

/* Style 'Vis flere' knapper */
.load-more-button { /* Gælder for #maerke-load-more, #placering-load-more, #model-load-more */
    background: none; border: none; color: var(--primary-color); text-decoration: underline;
    cursor: pointer; padding: 5px 0; font-size: 14px; margin-top: 5px; display: block; /* Gør den til block for at fylde bredden */ width: 100%; text-align: left;
}
.load-more-button:hover { color: var(--secondary-color); }

/* Style pagination */
.pagination { margin-top: 30px; text-align: center; }
.pagination .page-numbers {
    display: inline-block; padding: 8px 12px; margin: 0 2px; border: 1px solid var(--border-color);
    border-radius: 4px; text-decoration: none; color: var(--primary-color); transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination .page-numbers:hover { background-color: #f0f0f0; color: var(--secondary-color); }
.pagination .page-numbers.current { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.pagination .dots { padding: 8px 5px; border: none; color: #aaa; }

/* Info tekst i model filter */
.model-checkbox-list .no-models-info {
    display: block; /* Vises som standard, skjules af JS */
    font-style: italic;
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
    padding-left: 2px; /* Lidt indentering */
}

/* Body loading state */
body.filter-loading {cursor: wait;}
body.filter-loading .filter-and-cards,
body.filter-loading #open-filter-menu-button {
    opacity: 0.7;
    pointer-events: none;
}























/* Listen stylet som grid med border om hvert li */
.checkbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
}

/* Hvert li har en ramme */
.checkbox-list li {
  border: 1px solid #ccc;
  border-radius: 4px;
  /* fjern padding fra li - vi giver i stedet labelen padding */
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Hover på li */
.checkbox-list li:hover {
  border-color: #222;
}

/* Label = flex container */
.my-checkbox-label {
  display: flex;
  justify-content: space-between; /* Tekst/ikon i venstre side, checkbox i højre side */
  align-items: center;
  padding: 10px 14px; /* Flyt padding hertil for at gøre hele labelen klikbar */
  width: 100%;
  cursor: pointer;
}

/* Skjul det rigtige checkbox-input */
.styled-checkbox {
  position: absolute; 
  opacity: 0;
  pointer-events: none;
}

/* Fake checkbox – selve "boksen" i højre side */
.fake-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: background-color 0.2s, border-color 0.2s;
  /* valgfri: background-position: center; background-repeat: no-repeat; */
}

/* Checked-state: hvis input er :checked, så style .fake-checkbox */
.styled-checkbox:checked ~ .fake-checkbox {
  background-color: #222;
  border-color: #222;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66667 10.3333L1 6.66667L2.16667 5.5L4.66667 8L11.8333 0.833336L13 2L4.66667 10.3333Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Hover-effekt hvis du vil ændre border ved hover */
.my-checkbox-label:hover .fake-checkbox {
  border-color: #222;
}


/* Valgfrit: fokus-styling */
.styled-checkbox:focus ~ .fake-checkbox {
  outline: 1px auto #222;

}





.checkbox-list li:has(.styled-checkbox:checked) {
  border: 2px solid #222;
}



.checkbox-list li:has(.styled-checkbox:checked) .my-checkbox-label {
  padding: 9px 13px; /* Flyt padding hertil for at gøre hele labelen klikbar */
}







@media (max-width: 767px) {
  #offcanvas-filter-menu {
    width: 100% !important;
    left: -100% !important; /* Skjuler menuen til venstre */
    transition: left 0.3s ease;
  }
}


@media (max-width: 767px) {
  #offcanvas-filter-menu.open {
    left: 0 !important;
  }
}



@media (max-width: 767px) {
  #open-filter-menu-button {
    display: flex !important; /* Eller block, alt efter den ønskede layout */
    /* Yderligere styling om nødvendigt */
	color: #222;
  }
}