:root {
 /* --ka-max-width: 1300px;
  --ka-color: hsl(32, 96%, 49%);
  --ka-color-dark: hsl(32, 96%, 45%);
  --ka-color-lighter: hsl(32, 96%, 65%);
  --ka-color-light: hsl(32, 96%, 90%);
  --ka-color-light-hover: hsl(32, 96%, 95%);
  --ka-color-light-active: hsl(32, 96%, 98%);
  --ka-color-accent: hsl(310, 45%, 52%);
  --ka-color-accent-hover: hsl(310, 45%, 58%);*/
  --ka-color-accent-active: hsl(310, 45%, 64%);
  --ka-color-accent-disabled: hsl(310, 45%, 70%);
  --ka-color-accent-light: hsl(310, 45%, 90%);
  --ka-color-accent-dark: hsl(310, 45%, 30%);
  /*--ka-alt-background: color-mix(in hsl, var(--ka-color), white 90%);*/
  --ka-alt-background: rgba(0, 0, 0, 0.02);
  --ka-box-background: rgba(0, 0, 0, 0.02);

  --ka-color-filter: #494949;
  /* Base sizes - kan justeres etter behov */
  --ka-base-font: 16px;
  --ka-scale-ratio: 1.2;  /* Major Third scale */
  /* Font size levels */
  --ka-font-xxs: calc(var(--ka-base-font) * 0.68); 
  --ka-font-xs: calc(var(--ka-base-font) * 0.75);     /* 12px */
  --ka-font-s: calc(var(--ka-base-font) * 0.875);    /* 14px */
  --ka-font-s-plus: calc(var(--ka-base-font) * 0.9375);    /* 15px */
  --ka-font-base: var(--ka-base-font);                /* 16px */
  --ka-font-md: calc(var(--ka-base-font) * 1.125);    /* 18px */
  --ka-font-lg: calc(var(--ka-base-font) * 1.375);    /* 22px */
  --ka-font-xl: calc(var(--ka-base-font) * 1.625);    /* 26px */
  --ka-font-xxl: calc(var(--ka-base-font) * 2);    /* 32px */
  /* Line heights */
  --ka-line-height-tight: 1.2;
  --ka-line-height-normal: 1.5;
  --ka-line-height-relaxed: 1.75;

  --ka-filter-font-size: 14px;
  --ka-font-size-small: 0.775rem;
  --ka-font-size-medium: 1rem;
  --ka-font-size-large: 1.25rem;
  --ka-font-size-xlarge: 1.5rem;

  --ka-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
  --ka-shadow-darker: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  --ka-shadow-darker2: 0px 20px 50px 0px rgba(26, 46, 85, 0.1);
  --ka-shadow-dark: 0px 10px 30px 0px rgba(20, 36, 66, 0.15);
  --ka-shadow-darkest: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
  --ka-shadow-darker3: 0px 4px 50px 0px rgba(0, 0, 0, 0.1);
  --ka-shadow-darker4: 0px 20px 70px 0px rgba(15, 107, 92, 0.2);  
}

/* Screen reader only class - hides content visually but keeps it for SEO and accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* MAIN wrapper */
/***************/
#ka-main {
  position: relative;
  width: 100%;
  font-size: var(--ka-font-base);
  line-height: var(--ka-line-height-normal);
}
#ka-main .ka-section{
  width: 100%; 
  padding: 1.5em 2em;
}
#ka-main .ka-content-container{
  width: 100%;
  max-width: var(--ka-max-width);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #ka-main{
    padding: 0;
  }
  #ka-main .ka-section{
    padding: 2em 2vw 2.5em;
  }
}

/* THEME */
#ka {width: 100%;}
/* Overstyr temaets container for full bredde */
.kursagenten-full-width #content > .ast-container,
.kursagenten-full-width #content > .container,
.kursagenten-full-width #content > .content-area,
.kursagenten-full-width #content > .site-content,
.kursagenten-full-width #content > div,
.kursagenten-full-width #content,
.kursagenten-full-width .ka-full-width {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 768px) {
  .kursagenten-full-width #ka-main{
    padding: 0;
  }
}

/* COMMON */
/**********/
#ka-main h1 { font-size: var(--ka-font-xxl); line-height: var(--ka-line-height-tight); margin-bottom: 0.5em;}
#ka-main h1.medium { font-size: var(--ka-font-lg); }
#ka-main h2 { font-size: var(--ka-font-lg); line-height: var(--ka-line-height-tight); margin-bottom: .5em;}
#ka-main h2.small { font-size: var(--ka-font-md);}
#ka-main h3 { font-size: var(--ka-font-md); line-height: var(--ka-line-height-tight);}
#ka-main h4 { font-size: var(--ka-font-base); font-weight: 600;}
#ka-main h5 { font-size: var(--ka-font-s); font-weight: 600;}
#ka-main h6 { font-size: var(--ka-font-xs); font-weight: 600;}
#ka-main .small { font-size: var(--ka-font-xs); line-height: 1.5;}
#ka-main .medium { font-size: var(--ka-font-s); line-height: 1.5;}
#ka-main .medium i.ka-icon { width: var(--ka-font-s); height: var(--ka-font-s);}
#ka-main .uppercase { text-transform: uppercase;}
#ka-main a:not(.content a) { text-decoration: none;}
#ka a { text-decoration: none;}

/* Utility classes for font sizes */
.ka-text-xs { font-size: var(--ka-font-xs); }
.ka-text-sm { font-size: var(--ka-font-s); }
.ka-text-base { font-size: var(--ka-font-base); }
.ka-text-md { font-size: var(--ka-font-md); }
.ka-text-lg { font-size: var(--ka-font-lg); }
.ka-text-xl { font-size: var(--ka-font-xl); }

.ka-main-color { color: var(--ka-color); }

#ka-main p {
  margin: .5em 0 1em;
}
button{
  background: var(--ka-button-background);
  color: var(--ka-button-color);
  border: none;
}


/* PAGE GRID LAYOUT */
/********************/
#ka .course-grid{
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: 5vw;
  row-gap: 1em;
  padding: 0;
  margin: 0 auto;
}
#ka .course-grid.col-1-1{
  grid-template-columns: 1fr 1fr;
}
#ka .course-grid.col-1-2{
  grid-template-columns: 1fr 2fr;
}
#ka .course-grid.col-1-3{
  grid-template-columns: 1fr 3fr;
}
#ka .course-grid.col-1-4{
  grid-template-columns: 1fr 4fr;
}
#ka .course-grid.col-1{
  grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
  #ka .course-grid.col-1-1{
    grid-template-columns: 1fr;
  }
  #ka .course-grid.col-1-2{
    grid-template-columns: 1fr;
  }
  #ka .course-grid.col-1-3{
    grid-template-columns: 1fr;
  }
  #ka .course-grid.col-1-4{
    grid-template-columns: 1fr;
  }
}

/* ELEMTENTS */
/**************/
/* --Box */
/****************/
#ka .ka-box {
background: var(--ka-box-background);
margin: 1em 0;
padding: 1em 1.5em;
border-radius: 10px;
}

/* --Buttons and links */
/**********/
#ka .pameldingskjema {
  padding-bottom: .5em;
  padding-top: .5em;
}

#ka .signup-link {
  color: var(--ka-color);
  background: transparent;
  text-decoration: none;
  font-size: var(--ka-font-s);
}
#ka .signup-link:hover {
  color: color-mix(in hsl, var(--ka-color), black 5%);
}
#ka .signup-link > i.ka-icon {
  margin-left: 0.3em;
}

/* --Icons */
/**********/
.kag i.ka-icon {
display: inline-block;
width: var(--ka-font-base);
    height: var(--ka-font-base);
background-color: var(--ka-color);
mask-size: contain;
-webkit-mask-size: contain;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin-right: 0.5em;
}
#ka span.ka-icon-button {
display: flex;
background: var(--ka-color);
width: 48px;
height: 48px;
border-radius: 100%;
justify-content: center;
align-items: center;
}
#ka span.ka-icon-button:hover {
background: color-mix(in hsl, var(--ka-color), black 5%);
}
#ka span.ka-icon-button .ka-icon {
background: white;
margin-top: -3px;
height: 23px;
}

#ka .iconlist {
display: flex;
flex-direction: column;
row-gap: .4em;
}
#ka .iconlist.horizontal {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.2em;
row-gap: .8em;
}
#ka .iconlist > div,
#ka .iconlist.horizontal a {
display: flex;
align-items: center;
}
#ka .iconlist.horizontal .separator {
padding: 0 8px;
opacity: .5;
}
#ka .iconlist.horizontal i.ka-icon{
  width: var(--ka-font-base);
  height: var(--ka-font-base);
}
@media screen and (max-width: 768px) {
  #ka .iconlist.horizontal {
    flex-direction: column;
    row-gap: 1em;
  }
}


/* --Accordion */
/*******************/
/* Base accordion container */
#ka .accordion {
border: 1px solid #eee;
border-radius: 8px;
margin: 0 auto;
font-size: 15px;
line-height: 20px;
}

/* Accordion icon and interaction */
#ka .accordion-icon {
margin-right: 10px;
transition: transform 0.3s;
cursor: pointer;
}
#ka .clickopen {
cursor: pointer;
}

/* Accordion courselist specific styles */
#ka .accordion .courselist-item.active .courselist-main {
border-radius: 0;
}

#ka .accordion .courselist-item:last-child,
#ka .accordion .courselist-item:last-child .courselist-content.open {
border-radius: 0 0 8px 8px;
}

#ka .accordion .courselist-item:first-child .courselist-main {
border-radius: 8px 8px 0 0;
}

#ka .accordion .courselist-item:last-child:not(.active) .courselist-main {
border-radius: 0 0 8px 8px;
}

#ka .accordion .courselist-item.single-item:not(.active) .courselist-main {
border-radius: 8px;
}

/* --Slidein panel for signup form */
/********************************/
#ka #slidein-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 600px;
  max-width: 90%;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  transition: right 0.7s ease-in-out;
  z-index: 999999;
  overflow-y: auto;
}
#ka #slidein-panel.active {
  right: 0;
}
#ka #slidein-panel iframe {
  width: 100%;
  height: auto;
  border: none;
  margin-top: 1em;
}
#ka #slidein-panel .close-btn {
  position: absolute;
  top: 10px;
  left: 8px;
  background: none;
  border: none;
  font-size: 25px;
  cursor: pointer;
  color: gray;
  padding: 5px;
  line-height: 15px;
}
#ka #slidein-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#ka #slidein-overlay.active {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 768px){
  #ka #slidein-panel iframe {
    margin-top: 2em;
  }
}


/* --Button filter */
/*****************/

#ka .button-filter {
  /* Base styles */
  padding: 0.1em 0.8em 0.2em 0.8em;
  margin: 0.2em;
  color: var(--ka-color-filter, #666);
  border-radius: 5px;
  font-size: var(--ka-filter-font-size, 0.9rem);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  font-weight: 500;
}

#ka .button-filter:hover {
  color: var(--ka-color, #007bff);
  background-color: white;
  box-shadow: none;
}

#ka .button-filter.active,
#ka .active .button-filter {
  background: var(--ka-color, #007bff);
  color: white;
}

#ka .button-filter.active:hover,
#ka .active .button-filter:hover {
  background: var(--ka-color-darker, #0056b3);
  color: white;
}



/* --Tooltip */
/************/
#ka .tooltip { 
  position: relative; 
  cursor: pointer; 
} 

#ka .tooltip::after { 
  content: attr(data-title); 
  position: absolute; 
  top: 50%; /* Plassering over elementet */ 
  right: -5px; 
  transform: translateX(100%); 
  background-color: #333; 
  color: #eee; 
  padding: 2px 10px; 
  border-radius: 5px; 
  white-space: nowrap; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); 
  z-index: 10; 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.8s, visibility 0.3s; 
  font-size: 12.5px;
pointer-events: none; /* Hindrer musen i å trigge tooltip igjen */
} 
#ka .tooltip-left::after { 
  top: auto;
  bottom: -40px;
  right: -5px; 
  left: auto;
  transform: none;
 } 

#ka .tooltip:hover::after { 
  opacity: 0.9; 
  visibility: visible; 
}

/* --Expand collapse elements 
     with expand-content class and data-size attribute*/
/*************************************************************/
#ka .expand-content {
    position: relative;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

#ka .expand-content.collapsed {
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#ka .expand-toggle {
    display: none;
    width: 100%;
    padding: 8px 0;
    margin-top: 10px;
    color: var(--ka-color);
    cursor: pointer;
    font-size: var(--ka-font-xs);
}

#ka .expand-toggle:hover {
    color: var(--ka-color-dark);
}

#ka .expand-toggle i.ka-icon {
    width: 12px;
    height: 10px;
    margin-left: 5px;
    transition: transform 0.3s ease;
    vertical-align: middle;
}

#ka .expand-content.expanded .expand-toggle i.ka-icon {
    transform: rotate(180deg);
}

/* UTILITIES */
/**************/
/* --Show/hide elements */
/************************/
#ka .mobile { display: none !important;; }
#ka .desktop { display:block !important; }
@media screen and (max-width: 768px){
  #ka .mobile { display:block !important; }
  #ka .desktop { display:none !important; }
}
/* --Edit WP content links */
/************************/
#ka .edit-link .edit-text{
  width: fit-content;
  background: white;
  border-radius: 5px;
  padding: 0 .5em;
  font-size: small;
}
#ka .edit-link .ka-icon{
    width: 14px;
    height: 14px;
    background-color: #999;
}
#ka .edit-link:hover .ka-icon{
  background: #333;
}
#ka .edit-link a{
  display: flex;
  align-items: center;
  color: #999;
  text-decoration: none;
}
#ka .edit-link:hover a{
  color: #333;
}
/* --Edit course in Kursagenten */
/*****************************/
#ka .edit-course{
position: fixed;
bottom: 10px;
left: 10px;
z-index: 10000;
}
#ka .edit-course a {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#ka .edit-course span.ka-icon-button .ka-icon{  
  width: 27px;
  height: 27px;
  margin-right: 0;
}
#ka .edit-course:hover .ka-icon{  
  background: white;
}
#ka .edit-course .edit-text{
  position: relative;
  left: -12px;
  top: 10px;
  opacity: 0;
  transition: opacity .3s ease;
}
#ka .edit-course:hover .edit-text{
  opacity: 1;
}
/* --Edit WP content */
/*******************/
#ka .content .edit-link{
  position: relative;
  bottom: -10px;
  left: 10px;
  width: fit-content;
  background: white;
  border-radius: 5px;
  padding: 0 .5em;
}
#ka .admin-view.content-text{
  border: 3px dashed #eee;
  border-radius: 10px;
  padding: .3em;
}

/* --Page back link */
/************************/
#ka .page-back-link{
  width: 45px;
  height: 45px;
  background: #eee;
  margin-right: 3px;
  margin-top: -6px;
}
#ka .page-back-link:hover{
  background: var(--ka-color);
}




/* COURSELIST ELEMENTS */
/*********************/
/* --Courselist */
/****************/
#ka .courselist-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--ka-font-s);
  align-items: baseline;
  margin-bottom: 1em;
}
#ka div#courselist-header-right {
  display: flex;
  gap: 20px;  
}
#ka #course-count {
  font-weight: bold;
}
#ka .courselist-main {
  display: flex;
  align-items: center;
  column-gap: 1em;
  padding: 1em 10px;
  transition: background-color 0.3s;
}

@media screen and (max-width: 768px){
    #ka picture.course-image.mobile { margin-bottom: 1em; }
    #ka .courselist-header {
      flex-direction: column;
  }
  #ka .sort-dropdown-content, #ka .per-page-dropdown-content {
    left: 0;
  }
}
#ka .courselist-main .text-area {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#ka .courselist-main .course-title{
  margin: 0 0 .3em 0;
  font-size: var(--ka-font-s-plus);
  color: #444;
}
#ka .courselist-main .content-area{
  display: flex;
  flex-direction: row;
  gap: .8em;
  margin: 0 0 0 1em;
  font-size: var(--ka-font-xs);
  color: #444;
}
#ka .courselist-items .title-area{
  display: flex;
}
#ka .courselist-main .course-title a{
  margin-right: .3em;
}
#ka .courselist-main .details-area{
  margin-top: 5px;
  font-size: var(--ka-font-s);
}
#ka .courselist-main .details-area .location_freetext{
  font-size: var(--ka-font-xs);
  padding-left: .3em;
  padding-top: 2px;
  opacity: 0.9;
}
#ka .courselist-main .iconlist.horizontal i.ka-icon{
  width: var(--ka-font-s);
  height: var(--ka-font-s);
}
#ka .courselist-main .meta-area{
  display: flex;
  flex-wrap: wrap;
  font-size: var(--ka-font-xs);
  color: #666;
}
#ka .courselist-main .meta-area .show-locations-link {
  cursor: pointer;
}
#ka .courselist-main .meta-area .show-locations-link:hover {
  color: var(--ka-color-dark);
  text-decoration: none;
}
#ka .courselist-main .meta-area .accordion-icon{
  font-size: var(--ka-font-base);
  top: -2px;
  }
#ka .courselist-main .links-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: .4em;
  font-size: .75em;
  cursor: pointer;
}
#ka .courselist-main .links-area a {
  text-decoration: none;
}
#ka .ka-courselist.iconlist.horizontal i.ka-icon{
  width: 28px;
  height: 16px;
}
#ka .courselist-main .meta-area.iconlist.horizontal i.ka-icon{
  height: 13px;
  background-color: #666;
}
#ka .courselist-content {
  height: 0;
  overflow: hidden;
  padding: 0 10px;
  transition: height 0.3s ease, padding 0.3s ease;
  background: white;
  font-size: var(--ka-font-s);
  }
#ka .courselist-content.open {
  padding: .5em 1em .5em 1em;
  background: rgba(255, 255, 255, 0.568);
  border-top: 1px dashed #eee;
  }
  #ka .courselist-content.open p{
    margin-bottom: .6em;
    }
  #ka .courselist-content.open p a {
    color: var(--ka-color);
    text-decoration: none;
    display: inline-block;
    padding: 0.2em 0;
    transition: color 0.2s ease;
    }
  #ka .courselist-content.open p a:hover {
    color: var(--ka-color-dark);
    text-decoration: underline;
    }

/* --Course available */

#ka span.course-available {
  font-size: var(--ka-font-xxs);
  font-weight: normal;
  color: #999;
  white-space: nowrap;
}
#ka span.course-available:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #74ca74;
  border-radius: 50%;
  margin: 2px 5px 2px 0;
}
#ka span.course-available.full:before {
  background-color: #df7870;
}

#ka span.course-available.on-demand:before {
  background-color: #999;
}





/* --Pagination Styling */
/*********************/

/*#ka .pagination-wrapper {
margin: 2rem 0;
display: flex;
justify-content: center;
}

#ka .pagination {
display: flex;
align-items: center;
gap: 0.5rem;
}

#ka .pagination .page-numbers {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 4px;
text-decoration: none;
background-color: #ffffff;
color: #555;
font-weight: 500;
transition: all 0.2s ease;
font-size: var(--ka-font-s);
}

#ka .pagination .page-numbers.current {
background-color: var(--ka-color);
color: white;
}

#ka .pagination .prev,
#ka .pagination .next {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
}

#ka .pagination .prev:hover,
#ka .pagination .next:hover,
#ka .pagination .page-numbers:hover:not(.current) {
background-color: var(--ka-color-light);
transform: translateY(-1px);
}

#ka .pagination .ka-icon {
font-size: var(--ka-font-s);
width: 0.875rem;
height: 0.775rem;
background-color: var(--ka-color);
}

#ka .pagination span {
font-size: var(--ka-font-s);
}

@media (max-width: 768px) {
#ka .pagination {
    flex-wrap: wrap;
    justify-content: center;
}

#ka .pagination .page-numbers {
    padding: 0.4rem 0.8rem;
    font-size: var(--ka-font-s);
}
}*/

/* FILTER AND SORT -COURSE LIST */
/*****************************/

/* Filter: top-filter-section */
/*****************************/
#ka .top-filter-section .filter-item{
  display: inline-flex;
  gap: 20px;
}
#ka .filter-item.chips {
  display: flex ;
  flex-wrap: wrap;
  margin: 6px 0;
}
#ka .filter-item h4, #ka .filter-item h5{
  font-weight: bold;
  padding-top: 1em;
  margin: 0 0 .5em 0;
} 
#ka .filter-item:has(#search) h4, #ka .filter-item:has(#search) h5{
  display: none;
} 
  
/* Filter: active filters */
/**************************/
#ka #active-filters-container.active{
  margin-top: 1em;
}
#ka div#active-filters {
  display: inline-block;
  font-size: var(--ka-font-xs);
}
#ka span.active-filter-chip {
  /* Inherit common button-filter styles */
  background: var(--ka-color);
  color: white;
  margin-right: 5px;
  padding: 2px 0 3px 10px;
  border-radius: 3px;
}
#ka span.active-filter-chip:hover {
  background: var(--ka-color);
    color: white;
    opacity: 0.8;
}
#ka span.remove-filter {
  padding: 0 5px 0 5px;
  cursor: pointer;
}
/* Filter: reset */
/****************/
#ka a.reset-filters-btn {
  display: inline-block;
  margin-bottom: 15px;
  padding: 2px 12px;
  color: rgb(235, 121, 121);
  text-decoration: none;
  border-radius: 4px;
  background-color: transparent;
  font-size: 14px;
  display: none;
}
#ka a.reset-filters-btn:hover {
  color: rgb(241, 72, 72);
  font-weight: bold;
  background-color: transparent;
  box-shadow: none;
}
#ka .reset-filters-btn.active-filters {
display: inline-block;
}
/* Filter: no results */
/************************/
#ka .filter-no-results {
background: white;
padding: 2em;
border-radius: 10px;
}

/* Filter: sort */
/****************/
#ka .sort-dropdown, #ka .per-page-dropdown {
position: relative;
cursor: pointer;
}

#ka .sort-dropdown-content, #ka .per-page-dropdown-content {
display: none;
position: absolute;
right: 0;
top: 100%;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
min-width: 200px;
}

#ka .sort-dropdown.active .sort-dropdown-content, #ka .per-page-dropdown.active .per-page-dropdown-content {
display: block;
}

#ka .sort-option, #ka .per-page-option {
display: block;
width: 100%;
padding: 8px 16px;
text-align: left;
border: none;
font-size: var(--ka-filter-font-size);
color: #333;
background: none;
cursor: pointer;
}

#ka .sort-option:hover, #ka .per-page-option:hover {
color: var(--ka-color);
background-color: #f5f5f5;
box-shadow: none;
}

/* Filter: search */
/****************/
#ka input[type="text"].filter-search {
width: 100%;
padding: 6px 10px;
background: #fff;
border: 1px solid #e9e9e9;
border-radius: 5px;
font-size: var(--ka-filter-font-size);
}
#ka .filter-item.wide-search {
width: 80%;
margin: 0 10%;
height: 50px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
#ka .filter-item.wide-search #search {
text-align: center;
}

/* Filter: chip */
/****************/
#ka .chip, #ka .chip:active, #ka .chip:focus {
  display: inline-block;
  padding: 0.1em 0.8em;
  margin: 0.2em;
  background: white;
  border: 1px solid var(--ka-color-lighter);
  color: var(--ka-color-filter);
    border-radius: 5px;
    font-size: var(--ka-filter-font-size);
    cursor: pointer;
  }
  #ka .chip:hover {
    color: var(--ka-color-filter);
    background: var(--ka-alt-background-lighter);
  }
  #ka .chip.active {
    background: var(--ka-color);
    color: white;
  }



/* Filter: filter list - dropdown wrapper for list. More caleran styling below*/
/*************************************************************/
#ka .filter-dropdown,
#ka .date-range-wrapper {
  position: relative;
  display: inline-block;
  width: fit-content;
  min-width: 150px;
  padding: 10px;
}

#ka .filter-dropdown-toggle,
#ka .date-range-wrapper input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 10px 7px;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  cursor: pointer;
  font-size: var(--ka-filter-font-size);
}

#ka .filter-dropdown-toggle span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

#ka .filter-dropdown-toggle.has-active-filters {
  border-color: color-mix(in srgb, var(--ka-color) 30%, white);
  /*color: var(--ka-color);*/
}

#ka .filter-dropdown-toggle.has-active-filters .ka-icon {
  background-color: var(--ka-color);
}

#ka .open .filter-dropdown-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#ka .dropdown-icon i.ka-icon {
  width: 14px;
  height: 14px;
}

#ka .filter-dropdown .filter-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-top: none;
  padding: 10px 20px 10px 10px;
  border-radius: 0 0 5px 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}


#ka .filter-dropdown-content .filter-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
#ka .filter-dropdown-content .filter-list-item {
font-size: var(--ka-filter-font-size);
}


/* Filter: filter-list */
/************************/
#ka .filter-list {
  display: flex;
  flex-direction: column;
  font-size: var(--ka-filter-font-size);
}

#ka .filter-list-item {
  --color-default: #bfbfbf;
  --color-active: #68a146;
  --rotate-default: 180deg;
  --rotate-active: 40deg;
  --border-size-checkmark: 2px;
  --border-size-box: 1px;
  --input-size: 16px;
  --gutter: 13px;
}

#ka .filter-list-item,
#ka .filter-list-item *,
#ka .filter-list-item *::before,
#ka .filter-list-item *::after {
  box-sizing: border-box;
}

#ka .filter-list-item {
  display: flex;
  cursor: pointer;
  position: relative;
}

#ka .filter-list-item > input[type="checkbox"],
#ka .filter-list-item > input[type="radio"] {
  clip-path: polygon(0 0);
}

#ka .filter-list-item .checkbox-label {
  display: inline-block;
  padding-left: var(--gutter);
  color: var(--ka-color-filter);
  vertical-align: text-top;
}

#ka .filter-list-item .checkbox-label::before,
#ka .filter-list-item .checkbox-label::after {
  transition: all 0.2s ease-in-out;
}

#ka .filter-list-item .checkbox-label::before {
  content: '';
  display: block;
  width: var(--input-size);
  height: var(--input-size);
  border: var(--border-size-box) solid var(--color-default);
  position: absolute;
  top: 3px;
  left: 0;
  transform: rotate(0deg) scale(1);
}

#ka .filter-list-item .checkbox-label:hover::before {
  border-color: var(--color-active);
}

#ka .filter-list-item.checkbox .checkbox-label::before {
  border-radius: var(--border-size-checkmark);
}

#ka .filter-list-item.checkbox .checkbox-label::after {
  content: '';
  display: block;
  width: 7px;
  height: 12px;
  border-width: 0 var(--border-size-checkmark) var(--border-size-checkmark) 0;
  border-style: solid;
  border-color: transparent var(--color-active) var(--color-active) transparent;
  position: absolute;
  top: 3px;
  left: 0;
  margin-left: -3px;
  transform: rotate(var(--rotate-default)) scale(0);
}

#ka .filter-list-item.checkbox > input:checked + .checkbox-label::after {
  left: 8px;
  transform: rotate(var(--rotate-active)) scale(1);
}

#ka .filter-list-item.checkbox > input:checked + .checkbox-label::before {
  transform: rotate(var(--rotate-active)) scale(0);
}

#ka .filter-list-item.radio .checkbox-label::before,
#ka .filter-list-item.radio .checkbox-label::after{
  border-radius: 100%;
  top: -2px;
}

#ka .filter-list-item.radio .checkbox-label::after {
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 0;
  top: 100%;
  left: 4px;
}

#ka .filter-list-item.radio > input:checked + .checkbox-label::after {
  background-color: #fff;
  height: 12px;
  top: 2px;
}

#ka .filter-list-item.radio > input:checked + .checkbox-label::before {
  background-color:var(--color-active);
}

#ka .filter-list-item.switcher .checkbox-label {
  padding-left: 45px;
}

#ka .filter-list-item.switcher .checkbox-label::before {
  content: '';
  width: 36px;
  height: 20px;
  border-radius: 20px;
  top: -2px;
}

#ka .filter-list-item.switcher .checkbox-label::after {
  content: '';
  border-radius: 4px;
  width: 6px;
  height: 12px;
  background-color: var(--color-default);
  position: absolute;
  top: 2px;
  left: 7px;
}

#ka .filter-list-item.switcher > input:checked + .checkbox-label::before {
  background-color: var(--color-active);
  border-color: var(--color-active);
}

#ka .filter-list-item.switcher > input:checked + .checkbox-label::after {
  background-color: #fff;
  left: 24px;
}

#ka .filter-list-item [data-onchecked="show"],
#ka .filter-list-item > input:checked ~ [data-onchecked="hide"] {
  display: none;
}

#ka .filter-list-item [data-onchecked="hide"],
#ka .filter-list-item > input:checked ~ [data-onchecked="show"] {
  display: inline-block;
}

#ka .filter-list-item > input:checked + .checkbox-label.line-across {
  text-decoration: line-through;
}

#ka .filter-category.has-parent .checkbox-label::before,
#ka .filter-category.has-parent .checkbox-label::after {
  width: calc(var(--input-size) - 3px);
  height: calc(var(--input-size) - 3px);
  left: 5px;
  top: 4px;
}
#ka .filter-category.has-parent .filter-list-item.checkbox .checkbox-label::after {
  width: 7px;
  height: 12px;
  top: 3px;
}
#ka .filter-category.has-parent .checkbox-label {
  font-size: .9em;
  opacity: 0.85;
}
#ka .filter-category.has-parent:hover .checkbox-label {
  opacity: 1;
}


/* Filter: date picker */
/************************/
i.ka-icon.calendar-header-separator {
  background-color: #b8d6ed;
  height: 27px;
}
.kag .caleran-container .caleran-input .caleran-header .caleran-header-start .caleran-header-start-day, .kag .caleran-container .caleran-input .caleran-header .caleran-header-start .caleran-header-end-day, .kag .caleran-container .caleran-input .caleran-header .caleran-header-end .caleran-header-start-day, .kag .caleran-container .caleran-input .caleran-header .caleran-header-end .caleran-header-end-day, .kag .caleran-container-mobile .caleran-input .caleran-header .caleran-header-start .caleran-header-start-day, .kag .caleran-container-mobile .caleran-input .caleran-header .caleran-header-start .caleran-header-end-day, .kag .caleran-container-mobile .caleran-input .caleran-header .caleran-header-end .caleran-header-start-day, .kag .caleran-container-mobile .caleran-input .caleran-header .caleran-header-end .caleran-header-end-day {
color: #1885fc!important;
}
.kag .caleran-container .caleran-input .caleran-ranges .caleran-range, .kag .caleran-container-mobile .caleran-input .caleran-ranges .caleran-range {
color: #494949!important;
font-weight: normal!important;
}
.kag .caleran-container .caleran-input.caleran-input-vertical-range .caleran-right .caleran-ranges .caleran-range, 
.kag .caleran-container-mobile .caleran-input.caleran-input-vertical-range .caleran-right .caleran-ranges .caleran-range,
.kag .caleran-container-mobile .caleran-input .caleran-ranges .caleran-range {
background: #f8f8ff59!important;
}
.kag .caleran-container .caleran-input.caleran-input-vertical-range .caleran-right .caleran-ranges .caleran-range:hover, 
.kag .caleran-container-mobile .caleran-input.caleran-input-vertical-range .caleran-right .caleran-ranges .caleran-range:hover,
.kag .caleran-container-mobile .caleran-input .caleran-ranges .caleran-range:hover {
background: #f8f8ff!important;
text-decoration: none!important;
}
.kag .caleran-container-mobile .caleran-input .caleran-ranges .caleran-range{
  border: 1px solid #eee;
}
.kag .caleran-container-mobile .caleran-input .caleran-footer button.caleran-apply {
  background: #1783ff;
  border: 1px solid #1783ff;
}
.kag .caleran-container-mobile .caleran-input .caleran-footer button.caleran-cancel {
  color: #1783ff;
  border: 1px solid #1783ff;
}
/* Font and Placeholder styling for date picker input */
.kag #ka .date-range-wrapper input {
  color: var(--ka-color-filter);
  font-size: var(--ka-filter-font-size);
  width: 145px;
  padding-right: 30px; /* Gjør plass til ikonet */
  padding: 5px 30px 6px 10px
}

.kag .date-range-wrapper .ka-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none; /* Sikrer at ikonet ikke forstyrrer klikk på input */
}
.kag .date-range-wrapper input::placeholder {
    color: #333;
    font-size: var(--ka-filter-font-size);
    opacity: 1;
}

/* For eldre nettlesere */
.kag .date-range-wrapper input::-webkit-input-placeholder,/* Chrome/Safari/Opera */
.kag .date-range-wrapper input::-moz-placeholder,/* Firefox */
.kag .date-range-wrapper input:-ms-input-placeholder /* IE/Edge */ { 
    color: #333;
    opacity: 1;
}


/* Filter: range slider */
/************************/
/*
::selection{
color: #fff;
background: #17A2B8;
}
.wrapper{
width: auto;
background: #fff;
border-radius: 10px;
padding: 20px 25px 40px;
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
header h2{
font-size: 24px;
font-weight: 600;
}
header p{
margin-top: 5px;
font-size: 16px;
}
.price-input{
width: 100%;
display: flex;
margin: 30px 0 35px;
}
.price-input .field{
display: flex;
width: 100%;
height: 45px;
align-items: center;
}
.field input{
width: 100%;
height: 100%;
outline: none;
font-size: 19px;
margin-left: 12px;
border-radius: 5px;
text-align: center;
border: 1px solid color-mix(in srgb, var(--ka-color) 30%, white);
appearance: textfield;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.price-input .separator{
width: 130px;
display: flex;
font-size: 19px;
align-items: center;
justify-content: center;
}
.slider{
height: 5px;
position: relative;
background: #ddd;
border-radius: 5px;
}
.slider .progress{
height: 100%;
left: 25%;
right: 25%;
position: absolute;
border-radius: 5px;
background: #17A2B8;
}
.range-input{
position: relative;
}
.range-input input{
position: absolute;
width: 100%;
height: 5px;
top: -5px;
background: none;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
height: 17px;
width: 17px;
border-radius: 50%;
background: #17A2B8;
pointer-events: auto;
-webkit-appearance: none;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
height: 17px;
width: 17px;
border: none;
border-radius: 50%;
background: #17A2B8;
pointer-events: auto;
-moz-appearance: none;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
*/

/* FILTER MOBILE  */
/******************/

/* Filter loading og error states */
/********************************/
#ka .mobile-filter-loading,
#ka .mobile-filter-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em;
    text-align: center;
    min-height: 200px;
}

#ka .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--ka-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#ka .mobile-filter-error {
    color: #666;
}

#ka .mobile-filter-error .retry-button {
    margin-top: 1em;
    padding: 0.5em 1em;
    background: var(--ka-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#ka .mobile-filter-error .retry-button:hover {
    background: var(--ka-color-darker);
}

/* Filter button styling */
/************************/
#ka .filter-toggle-button {
    display: none;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
    font-weight: 500;
    transition: transform 0.2s, background-color 0.2s;
    background: white;
    box-shadow: none;
    color: inherit;
    border-radius: 50px;
    box-shadow: 0 2px 8px hsl(0deg 0% 0% / 5%);
}

#ka .filter-toggle-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsl(0deg 0% 0% / 9%);
}
#ka .filter-toggle-button .ka-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50px;
    background-color: var(--ka-color);
}
#ka .filter-toggle-button i.ka-icon {
    display: block;
    margin: 0 auto;
    background-color: white;
    width: 1.2em;
    height: 1.2em;
}
/* Sticky Mobile Filter Button */
.sticky-filter-button {
    position: sticky;
    top: 20px;
    z-index: 1000;
    width: 100%;
    margin: 0 auto 20px auto;
}

.sticky-filter-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.4);
}

.sticky-filter-button i {
    font-size: 18px;
}

/* Filter overlay */
/******************/
#ka .mobile-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1001;
    display: none;
    flex-direction: column;
}

#ka .mobile-filter-header {
    position: sticky;
    top: 0;
    padding: 1.25em;
    background: white;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#ka .mobile-filter-header h4 {
    margin: 0;
    font-size: var(--ka-font-md);
}

#ka .close-filter-button {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ka .close-filter-button i.ka-icon {
    width: 20px;
    height: 20px;
    background-color: #666;
}

#ka .mobile-filter-content {
    padding: 1.5em;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile filter sections */
#ka .mobile-filter-section {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}

#ka .mobile-filter-section:last-child {
    border-bottom: none;
}

#ka .mobile-filter-section h5 {
    margin: 0 0 1em 0;
    font-size: var(--ka-font-s);
    color: #333;
}

/* Mobile filter list styling */
#ka .mobile-filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

#ka .mobile-filter-list .filter-list-item {
    margin: 0;
    padding: 0;
}
#ka .mobile-filter-section .filter-list-item.checkbox .checkbox-label::before,
#ka .mobile-filter-section .filter-list-item.checkbox .checkbox-label::after {
  top: 9px;
}

/* Mobile chips styling */
#ka .mobile-filter-section .filter-chip-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.5em;
}

#ka .mobile-filter-section .chip {
    margin: 0;
    padding: 8px 16px;
    font-size: var(--ka-font-s);
}

/* Footer buttons */
#ka .mobile-filter-footer {
    position: sticky;
    z-index: 1000;
    bottom: 0;
    background: white;
    padding: 1em;
    border-top: 1px solid #eee;
    display: flex;
    gap: 1em;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

#ka .mobile-filter-footer button {
    flex: 1;
    padding: .5em;
    border: none;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

#ka .mobile-filter-footer .apply-filters-button {
    background: var(--ka-color);
    color: white;
}

#ka .mobile-filter-footer .apply-filters-button:hover {
    background: var(--ka-color-darker);
}

#ka .mobile-filter-footer .reset-filters-button {
    background: #f5f5f5;
    color: #666;
}

#ka .mobile-filter-footer .reset-filters-button:hover {
    background: #eee;
}

/* Mobile date picker adjustments */
#ka .mobile-filter-section .date-range-wrapper {
    width: 100%;
}

#ka .mobile-filter-section .date-range-wrapper input {
    width: 100%;
    padding: 12px;
}

/* Hide desktop filters on mobile */
@media screen and (max-width: 768px) {
    #ka .filter-container.filter-top,
    #ka .left-filter-section {
        display: none;
    }
    
    #ka .filter-toggle-button {
        display: flex;
    }
}




/* Fjern alle liste-markører fra specific-locations */
.kag .specific-locations ul,
.kag .specific-locations-section ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kag .specific-locations li,
.kag .specific-locations-section li {
    list-style: none !important;
    list-style-type: none !important;
}

.kag .specific-locations li::marker,
.kag .specific-locations-section li::marker {
    content: '' !important;
    display: none !important;
}

.kag .specific-locations li::before,
.kag .specific-locations-section li::before {
    content: '' !important;
    display: none !important;
}


/* COURSE DATES MODAL */
/*********************/
.ka-course-dates-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ka-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.ka-modal-content {
    position: relative;
    background: white;
    border-radius: 8px;
    max-width: 600px;
    max-height: 80vh;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ka-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ka-primary-color, var(--ka-color, #2271b1));
    color: white;
}

.ka-modal-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: white;
    font-weight: 600;
}

.ka-modal-close {
    background: transparent;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: white;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.ka-modal-close:hover {
    opacity: 0.7;
}

.ka-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.ka-modal-body h4 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.1em;
    color: #333;
}

.ka-location-group {
    margin-bottom: 24px;
}

.ka-location-group:last-child {
    margin-bottom: 0;
}

.ka-location-group h5 {
    margin: 0 0 8px 0;
    font-size: 1em;
    color: var(--ka-primary-color, var(--ka-color, #2271b1));
    font-weight: 600;
}

.ka-dates-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 16px;
}

.ka-dates-list li {
    /* margin-bottom: 6px; */
}

.ka-dates-list a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s;
    display: inline-block;
    padding: 2px 0;
}

.ka-dates-list a:hover {
    color: var(--ka-primary-color, var(--ka-color, #2271b1));
    text-decoration: underline;
}

.show-ka-modal {
    color: var(--ka-primary-color, var(--ka-color-darker, #2271b1));
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.show-ka-modal:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
    .ka-modal-content {
        max-width: 95%;
        max-height: 90vh;
    }
    
    .ka-modal-header {
        padding: 16px 20px;
    }
    
    .ka-modal-header h3 {
        font-size: 1.1em;
    }
    
    .ka-modal-body {
        padding: 20px;
    }
    
    .ka-dates-list {
        margin-left: 8px;
    }
}