/* ==========================================================================
   MODULES
   ========================================================================= */

/* ==========================================================================
   FILTER BAR
   ========================================================================= */

/* Simple inline filter/sort bar */
.vb-filterbar {
  border-top: 1px solid var(--grey-light);
  border-bottom: 1px solid var(--grey-light);
  width: 100%;
}
.vb-filterbar > .vb-container,
.vb-filterbar > .container,
.vb-filterbar > .vb-container.row,
.vb-filterbar > .container.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
/* Neutralize Bootstrap .row negative margins so 16px container padding stays aligned */
.vb-filterbar > .vb-container.row { margin-left: 0 !important; margin-right: 0 !important; --bs-gutter-x: 0 !important; }
.vb-filterbar > .container.row { margin-left: 0 !important; margin-right: 0 !important; --bs-gutter-x: 0 !important; }
.vb-filterbar > .vb-container.row > [class^="col"],
.vb-filterbar > .vb-container.row > [class*=" col"],
.vb-filterbar > .vb-container.row > * { padding-left: 0 !important; padding-right: 0 !important; }
.vb-filterbar > .container.row > [class^="col"],
.vb-filterbar > .container.row > [class*=" col"],
.vb-filterbar > .container.row > * { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 719px) {
  .vb-filterbar > .vb-container,
  .vb-filterbar > .container { grid-template-columns: 1fr auto; }
  .vb-filterbar form { display: none !important; }
  .vb-filter-count { padding-right: 0 !important}
}

/* Filter count typography using global tokens */
.vb-filter-count {
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-sans-1);
  font-weight: var(--w-medium);
  font-style: normal;
  font-size: 0.875rem;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--grey-dark);
  padding: 20px 0;
  padding-right: 24px;
  border-right: 1px solid #E0E0E0;
}
@media (max-width: 719px) {
  .vb-filter-count { border-right: 0; }
}

.vb-filterbar .vb-filter-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--w-medium); color: var(--grey-dark); background: transparent; border: 0; padding: 20px 0; }
.vb-filterbar .vb-filter-toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; border-radius: 4px; }
.vb-filterbar .form-select { height: auto !important; }
 
.vb-filterbar label {
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-style: normal;
  font-size: 0.875rem;
  line-height: 20px;
  letter-spacing: 0;
  /*color: #707070;*/
  color: var(--grey-dark);
  margin-right: 8px;
}

.vb-filterbar select {
  font-family: var(--font-sans-1);
  font-weight: 500 !important;
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--grey-dark) !important;
  padding: 0 86px 0 0 !important;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  background-image: url('/wp-content/themes/biv2/assets/icon/ArrowDown.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
}
.vb-filterbar select option {
  color: #121212 !important;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
  .vb-filterbar select {
    background-image: url('/wp-content/themes/biv2/assets/icon/ArrowDown-DarkTheme.svg');
  }
}

/* ==========================================================================
   SEARCH COMPONENTS
   ========================================================================= */

/* Dark search block (e.g., hero area) */
.vb-search-dark {
  background: var(--comp-1);
  color: #fff;
  border-radius: var(--radius-2xl);
  padding: var(--space-24);
}
.vb-search-dark .form-control {
  background-color: var(--comp-2);
  border-color: var(--comp-3);
  color: #fff;
  --focus-ring-color: var(--focus-ring-color-dark);
}
.vb-search-dark .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.vb-search-dark .btn-primary {
  --bs-btn-bg: var(--brand-blue);
  --bs-btn-border-color: var(--brand-blue);
}

/* ==========================================================================
   HEADER SEARCH PILL
   ========================================================================= */

/* Outer light ring + inner blue border, large pill */
.vb-search-pill {
  height: 44px;
  border-radius: var(--radius-circle);
  background-color: var(--comp-2);
  border: 1px solid var(--comp-3);
  flex-wrap: nowrap !important;
  transition: border-color .3s ease, border-width .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.vb-search-pill:focus-within {
  border: 2px solid var(--brand-blue);
  box-shadow: 0 0 0 4px var(--brand-blue-light);
}
.vb-search-pill:focus-within .btn-icon-36 {
  background: #fff;
  color: #000 !important;
  border-top-left-radius: 100px !important; 
   border-bottom-left-radius: 100px !important;
}
.vb-search-pill .form-control {
  border: 0;
  background: transparent;
  border-radius: 30px;
  color: #fff;
  transition: color .3s ease, background-color .3s ease;
}
.vb-search-pill .form-control:focus {
  box-shadow: none;
}
.vb-search-pill .form-control::placeholder { color: rgba(255,255,255,0.7); }
.vb-search-pill .input-group-text { background: transparent; border: 0; color: #fff; }

.vb-divider-vertical { width: 1px; height: 22px; background: #fff; display: inline-block; }

/* Smooth background/color on the icon button */
.btn-icon-36 { transition: background-color .3s ease, color .3s ease, border-radius .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .vb-search-pill, .vb-search-pill .form-control, .btn-icon-36 {
    transition: none !important;
  }
}

/* Mobile search panel */
.mobile-search { display: none; padding: 12px 16px; background: var(--comp-1); }
.mobile-search .vb-search-pill { width: 100%; }
/* Ensure the panel sits above the header content so it is clickable */
.mobile-search.open { position: relative; z-index: 3000; }

#vb-close-search:hover {
  background-image: none !important;
}

/* Keep the mobile search visible while scrolling */
@media (max-width: 719px) {
  .mobile-search { position: sticky; top: 0; }
  body.mobile-search-lock { overflow: hidden; }
}

/* Prevent body scroll when search overlay is open */
body.search-overlay-open { overflow: hidden; }

@media (max-width: 719px) {
  /* Productive #47: Mina sidor-ikonen ska visas aven i mobillage.
     Ikonen ar 44px och far plats mellan sokikonen och hamburgarmenyn utan
     layoutandring - flexbox flyttar sokikonen at vanster av sig sjalv. */
  /* .vb-header .vb-profile-link { display: none; } */

  /* Show compact icon-only search in header; panel lives below */
  .vb-header .vb-search-pill { height: 44px; width: 44px; padding: 4px; background: transparent; border: 1px solid var(--comp-3); border-radius: var(--radius-circle); }
  /* Hide input only for the compact pill inside the header, not the mobile panel */
  .vb-header .header-search .vb-search-pill .form-control { display: none; }
  .vb-header .vb-search-pill .btn-icon-36 { margin-right: 0; }

  /* Slide-down panel when active */
  .mobile-search { display: none; }
  .mobile-search.open { display: block; }

  /* Keep header actions visible; hide header-close on mobile */
  .header-right .header-close { display: none !important; }
  .header-right .header-actions { opacity: 1 !important; pointer-events: auto !important; }
}

@media (max-width: 719px) {
  /* On mobile, when panel is open, swap actions -> close link in header */
  .vb-header.mobile-search-open .header-right .header-actions { opacity: 0; pointer-events: none; }
  .vb-header.mobile-search-open .header-right .header-close { display: inline-flex !important; opacity: 1 !important; }
}

@media (max-width: 719px) {
  /* Header search icon should not stretch full width */
  .vb-header .header-search { width: auto; max-width: none; }
  /* When mobile search is open, swap actions -> close link firmly */
  .vb-header.mobile-search-open .header-right .header-actions { display: none !important; opacity: 0 !important; pointer-events: none !important; }
  .vb-header.mobile-search-open .header-right .header-close { display: inline-flex !important; opacity: 1 !important; pointer-events: auto !important; }
}

@media (max-width: 719px) {
  /* Hide center search form on mobile; use right-side icon instead */
  .vb-header .header-search { display: none !important; }
}

/* Style the built-in clear (×) button in WebKit browsers */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') center/contain no-repeat;
  opacity: .7;
}
input[type="search"]:focus::-webkit-search-cancel-button,
input[type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button {
  opacity: 1;
}

/* Ensure right-side header actions always show the search icon across 600-700px */
@media (max-width: 719px) {
  .header-right .header-actions .btn[aria-label="Sök"] { display: inline-flex; }
}

@media (max-width: 719px) {
  #vb-mobile-toggle { display: inline-flex !important; }
}
@media (min-width: 720px) {
  #vb-mobile-toggle { display: none !important; }
}

/* Force header action icons to render white */
.vb-header .header-actions .btn img {
  display: block;
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* Header buttons: add 10% white overlay on hover without affecting borders */
.vb-header .btn {
  border-radius: var(--radius-circle);
  background-clip: padding-box;
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}
.vb-header .btn:hover {
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
}

/* Keyboard focus: ensure a brand-blue border like other interactive elements */
.vb-header .btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Profile button: focus ring should sit flush (no 2px gap) */
.vb-header .btn-comp-circle[aria-label="Profil"]:focus-visible {
  border: 1px solid var(--comp-3) !important;
}

/* Dark sections: use white focus ring for buttons */
.vb-hero .btn:focus-visible,
.vb-content-bg .btn:focus-visible,
.vb-search-dark .btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ==========================================================================
   FAQ MODULE
   ========================================================================= */

/* FAQ SVG section minimal styles */
/* Default: no padding for module usage, but add margin-bottom */
.vb-faq-svg { 
  padding: 0; 
  margin-bottom: 48px;
}

.vb-faq-svg-loan {
  margin-top: 80px;
}

/* Homepage specific: add padding when used on front page, no margin-bottom */
.vb-faq-svg--homepage { 
  padding: 80px 0 !important; 
  margin-bottom: 0 !important;
}

@media (max-width: 719px) {
  .vb-faq-svg--homepage { 
    padding: 48px 0 !important; 
  }
}
.vb-faq-svg-hero svg { display: block; width: 100%; height: auto; }
.vb-faq-title,
.vb-heading-h2 {
  font-family: var(--font-sans-2);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  margin-bottom: 16px !important;
}

/* H1 styling for FAQ titles */
.vb-faq-title--h1 {
  font-family: Archivo;
  font-weight: 600;
  font-style: normal;
  font-size: var(--fs-h1);
  line-height: 56px;
  letter-spacing: 0%;
  color: var(--text);
  margin-bottom: 16px !important;
}

/* Mobile responsive styles for H1 FAQ titles */
@media (max-width: 719px) {
  .vb-faq-title--h1 {
    font-size: var(--fs-h2);
    line-height: 40px;
  }
}

/* Text alignment for FAQ titles */
.vb-faq-title--left {
  text-align: left;
}

.vb-faq-title--center {
  text-align: center;
}

.vb-faq-title {
  margin-top: 1.5rem;
  width: 100%;
    max-width: 720px;
}

.vb-faq-description {
  font-family: Roboto;
  font-weight: 400;
  max-width: 720px;
  font-style: normal;
  font-size: var(--fs-body2);
  line-height: 28px;
  color: var(--grey-medium);
  margin-bottom: 24px;
}

/* Mobile responsive styles for FAQ description */
@media (max-width: 719px) {
  .vb-faq-description {
    font-size: var(--fs-body1);
    line-height: 24px;
  }
}
/* Render H1s that use vb-heading-h2 utility with H1 sizing */
h1.vb-heading-h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.vb-section-news {padding-top: var(--space-48);}
.vb-description {margin-bottom: var(--space-48);}
.vb-faq-accordion { list-style: none; margin: 0 auto 0; padding: 0; max-width: 720px; }
.vb-faq-accordion-item { border-bottom: 1px solid var(--grey-light); }
.vb-faq-accordion-trigger { width: 100%; background: transparent; border: 0; text-align: left; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; color: var(--text); font-family: var(--font-sans-2); font-weight: var(--w-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); }
.vb-faq-accordion-title { flex: 1 1 auto; }
.vb-faq-accordion-icon { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.vb-faq-accordion-icon::before, .vb-faq-accordion-icon::after { content: ""; position: absolute; background: var(--text); }
.vb-faq-accordion-icon::before { width: 16px; height: 2px; top: 7px; left: 0; }
.vb-faq-accordion-icon::after { width: 2px; height: 16px; top: 0; left: 7px; transition: opacity .2s ease; }
.vb-faq-accordion-trigger[aria-expanded="true"] .vb-faq-accordion-icon::after { opacity: 0; }
.vb-faq-accordion ol, .vb-faq-accordion ul { margin-bottom: 1rem; }
.vb-faq-accordion ul { list-style-type: disc; }

/* ==========================================================================
   TEXT MODULE
   ========================================================================= */

.vb-text { padding-bottom: 48px; }
.vb-text--spacing-24 { padding-bottom: 24px; }
.vb-text--spacing-48 { padding-bottom: 48px; }
.vb-text__content > *:first-child { margin-top: 0; }
.vb-text__content > *:last-child { margin-bottom: 0; }

/* Reduce margin-bottom when vb-text is followed by vb-faq-svg */
.vb-text:has(+ .vb-faq-svg) {
  padding-bottom: 24px !important;
}

/* ==========================================================================
   STEPS MODULE
   ========================================================================= */

.vb-steps { 
  padding-bottom: 48px; 
}

.vb-steps__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 40px;
}

.vb-steps__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vb-steps__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vb-steps__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--brand-blue-light);
  color: var(--grey-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--w-medium);
  font-size: 0.875rem;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
}

.vb-steps__number::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid var(--brand-blue);
  z-index: 1;
}

.vb-steps__number span {
  position: relative;
  z-index: 2;
}

.vb-steps__title {
  font-family: var(--font-sans-2);
  font-weight: var(--w-semibold);
  font-size: var(--fs-body2);
  line-height: 24px;
  color: var(--grey-dark);
  margin: 0;
  flex: 1;
}

.vb-steps__description {
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-size: var(--fs-body1);
  line-height: 24px;
  color: var(--grey-medium);
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .vb-steps__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================================
   IMAGE BACKGROUND MODULE
   ========================================================================= */

.vb-image-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw; /* full-bleed */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 400px; /* desktop */
}
@media (max-width: 719px) {
  .vb-image-bg { height: 300px; }
}

/* ==========================================================================
   FILTER DRAWER (modal side panel)
   ========================================================================= */

.vb-filter-drawer { position: fixed; inset: 0; z-index: 1300; pointer-events: none; }
.vb-filter-drawer[aria-hidden="true"] { display: block; }
.vb-filter-drawer.active { pointer-events: auto; }
.vb-filter-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s ease; }
.vb-filter-drawer.active .vb-filter-backdrop { opacity: 1; }
.vb-filter-sheet { position: absolute; top: 0; left: 0; height: 100%; width: 100%; max-width: 400px; background: var(--bg); box-shadow: 0 20px 40px rgba(0,0,0,.18); transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; }
@media (max-width: 1023px) { .vb-filter-sheet { max-width: 360px; } }
@media (max-width: 719px) { .vb-filter-sheet { max-width: none; width: 100%; } }
.vb-filter-drawer.active .vb-filter-sheet { transform: translateX(0); }
.vb-filter-header { margin-bottom: 32px; padding: 16px; display: flex; justify-content: flex-end; }
.vb-filter-close { background: transparent; border: 0; color: var(--grey-dark); font-family: var(--font-sans-1); font-weight: var(--w-medium); text-decoration: underline; }
.vb-filter-close:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.vb-filter-body { flex: 1 1 auto; overflow: auto; padding: 16px; }
.vb-filter-footer { text-align: center; position: sticky; bottom: 0; left: 0; right: 0; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--grey-light); }
.vb-filter-clear { font-weight: var(--w-medium); text-decoration: underline; display: inline-block; margin-top: 12px; text-align: center; color: var(--grey-dark); }
.vb-filter-clear:focus-visible, .vb-filter-footer button:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }

.vb-filter-form details { border-bottom: 1px solid var(--grey-light); padding: 16px 0; }
.vb-filter-form summary {
  list-style: none;
  cursor: pointer;
  /* Typography per request (Roboto Regular 16/24) */
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-style: normal;
  font-size: var(--fs-body1);
  line-height: 24px;
  letter-spacing: 0;
  color: var(--grey-dark);
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
}
.vb-filter-form summary::after {
  content: "";
  width: 20px;
  height: 20px;
  margin-left: 12px;
  background-color: var(--grey-medium);
  -webkit-mask: url('/wp-content/themes/biv2/assets/icon/ArrowDown.svg') center/contain no-repeat;
  mask: url('/wp-content/themes/biv2/assets/icon/ArrowDown.svg') center/contain no-repeat;
  transform: rotate(-90deg);
  transition: transform .2s ease;
  flex: 0 0 20px;
}
/* Rotate arrow down when the section is open */
.vb-filter-form details[open] > summary::after { transform: rotate(0deg); }
details[open] > summary.vb-filter-summary::after { transform: rotate(0deg); }
.vb-filter-form summary::-webkit-details-marker { 
   opacity: 0;
  /*display: none; */
}
/* ensure summary is focusable in Safari/iOS */
.vb-filter-form summary { outline-offset: 2px; }
.vb-filter-form summary:focus { outline: 2px solid var(--brand-blue); }
.vb-filter-group { margin-top: 16px; display: grid; gap: 10px; }
.vb-filter-option {
  display: flex;
  margin-bottom: 16px;
  align-items: center;
  gap: 10px;
  /* Typography per request using design tokens */
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-style: normal;
  font-size: var(--fs-body1);
  line-height: 24px;
  letter-spacing: 0;
  color: var(--grey-medium);
}
/* Custom checkbox styling to match design */
.vb-filter-option input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--grey-medium);
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  margin: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.vb-filter-option input[type="checkbox"]:hover { border-color: var(--grey-dark); cursor: pointer; }
.vb-filter-option input[type="checkbox"]:checked { outline: 2px solid var(--brand-blue-light); }
.vb-filter-option input[type="checkbox"]::after {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url('/wp-content/themes/biv2/assets/icon/check.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0; /* Hidden by default until checked */
}
.vb-filter-option input[type="checkbox"]:checked::after { opacity: 1; }
/* Focus ring per spec (outer blue ring) */
.vb-filter-option input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }

/* Body lock when drawer open */
body.vb-filter-lock { overflow: hidden; }

/* Hide sorting in filter drawer on desktop - only show on mobile */
@media (min-width: 720px) {
  .vb-filter-sort-mobile { display: none !important; }
}

/* ==========================================================================
   OPENING HOURS HEADER
   ========================================================================= */

#vecka-header {
  font-family: Archivo;
  font-weight: 600;
  font-style: normal;
  font-size: var(--fs-h3);
  line-height: 30px;
  letter-spacing: 0%;
  vertical-align: middle;
}

#vecka-container h3 {
  font-size: var(--fs-body1);  
}

/* Opening hours date span (left side) */
.d-flex.justify-content-between.border-bottom.py-2 > span:first-child,
.d-flex.justify-content-between.border-top.border-bottom.py-2 > span:first-child {
  font-family: Roboto;
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-body1);
  line-height: 24px;
  vertical-align: middle;
  color: var(--text);
}

/* Opening hours times span (right side) */
.d-flex.justify-content-between.border-bottom.py-2 > span:last-child,
.d-flex.justify-content-between.border-top.border-bottom.py-2 > span:last-child {
  font-family: Roboto;
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-body1);
  line-height: 24px;
  text-align: right;
  vertical-align: middle;
  color: #707070;
}

/* Opening hours "Stängt" text styling */
.vb-stangt-text {
  font-family: Roboto;
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-body1);
  line-height: 24px;
  text-align: right;
  vertical-align: middle;
  color: #BA0B0B !important;
}

/* Opening hours date styling */
.opening-hours-date {
  color: var(--text);
  font-family: Roboto;
  font-size: var(--fs-body1);
  font-weight: 400;
  line-height: 24px;
}

 

/* Opening hours times styling */
.opening-hours-times {
  color: var(--grey-medium);
  font-family: Roboto;
  font-size: var(--fs-body1);
  font-weight: 400;
  line-height: 24px;
  text-align: right;
}

/* Today's opening hours are bold/strong */
.todays-opening-hours > .opening-hours-date,
.todays-opening-hours > .opening-hours-times,
.vb-bibliotek-card__hours-item.todays-opening-hours,
.vb-bibliotek-card__hours-item.todays-opening-hours strong {
  font-weight: 600;
}

/* Remove border from last opening hours element */
.vb-no-border-bottom {
  border-bottom: none !important;
}

/* Override any border-bottom on the last element specifically */
#vecka-container .container .vb-no-border-bottom.d-flex.justify-content-between.py-3 {
  border-bottom: none !important;
}

/* Week navigation buttons - Legacy styles */
.vb-week-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.vb-week-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.vb-week-nav-btn:not(:disabled):hover {
  opacity: 0.7;
}

.vb-week-nav-btn:not(:disabled):active {
  opacity: 0.5;
}

/* Week frame - New Figma design */
.week-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 45px;
  border-top: 1px solid var(--grey-light);
  border-bottom: 1px solid var(--grey-light);
  border-radius: 4px;
  background: transparent;
  padding: 0 16px;
}

.week-frame .icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.week-frame .icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.week-frame .icon-btn:not(:disabled):hover {
  opacity: 0.7;
}

.week-frame .icon-btn:not(:disabled):active {
  opacity: 0.5;
}

.week-frame .divider {
  width: 1px;
  height: 20px;
  background-color: var(--grey-light);
  margin: 0 8px;
}

.week-frame .label {
  flex: 1;
  text-align: center;
  font-family: var(--font-sans-1, 'Roboto', sans-serif);
  font-size: var(--fs-body1);
  font-weight: 400;
  line-height: 24px;
  color: var(--text);
  margin: 0 8px;
}

.week-frame .chev {
  stroke: var(--grey-dark);
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   BIBLIOTEK SINGLE PAGE LAYOUT
   ========================================================================= */

/* Two-column layout for bibliotek pages */
.vb-event-layout--two-columns {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  margin-top: 32px;
}

@media (max-width: 1023px) {
  .vb-event-layout--two-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Contact information styling */
.vb-contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vb-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--grey-dark);
}

.vb-contact-item img {
  flex-shrink: 0;
}

.vb-contact-item a {
  color: var(--brand-blue);
  text-decoration: none;
}

.vb-contact-item a:hover {
  text-decoration: underline;
}

/* Utrustning (equipment) list styling */
.vb-utbud-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vb-utbud-item {
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--grey-dark);
  padding: 8px 12px;
  background-color: var(--grey-tint);
  border-radius: 4px;
}

/* Meröppet section styling */
.vb-meroppet-section {
  border-top: 1px solid #E0E0E0;
  padding-top: 32px;
  margin-top: 32px;
}

/* Meröppet heading styling */
.vb-meroppet-heading {
  font-weight: 600 !important;
  font-size: var(--fs-h3) !important;
  line-height: 30px !important;
}

/* Meröppet toggle button styling */
.vb-meroppet-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vb-meroppet-toggle:hover {
  background-color: var(--grey-tint);
}

.vb-meroppet-toggle:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .vb-toggle-icon {
      filter: invert(1) brightness(1.2);
  }
}

.vb-toggle-icon {
  transition: opacity 0.2s ease;
}

.vb-meroppet-toggle[aria-expanded="false"] .vb-toggle-icon {
  opacity: 0.5;
}

/* Meröppet content collapsible behavior */
.vb-meroppet-content {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 1000px;
  opacity: 1;
}

.vb-meroppet-content.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Mobile: Meröppet section collapsed by default */
@media (max-width: 767px) {
  .vb-meroppet-content:not(.expanded) {
    max-height: 0;
    opacity: 0;
  }
  
  .vb-meroppet-content.expanded {
    max-height: 1000px;
    opacity: 1;
  }
  
  .vb-meroppet-toggle[aria-expanded="true"] .vb-toggle-icon {
    opacity: 1;
  }
  
  .vb-meroppet-toggle[aria-expanded="false"] .vb-toggle-icon {
    opacity: 0.5;
  }
}

/* Desktop: Meröppet section expanded by default */
@media (min-width: 768px) {
  .vb-meroppet-content {
    max-height: 1000px;
    opacity: 1;
  }
}

/* Meröppet list styling */
.vb-meroppet-list {
  font-family: var(--font-sans-1);
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--grey-dark);
}

.vb-meroppet-list .border-bottom {
  border-color: var(--grey-light) !important;
}

.vb-meroppet-list .border-top {
  border-color: var(--grey-light) !important;
}

/* General border classes */
.border-top {
  border-top: 1px solid var(--grey-light) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--grey-light) !important;
}

.vb-meroppet-list .py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Opening hours small text styling */
.opening-hours-date small {
  color: var(--grey-medium);
  font-size: var(--fs-body1);
}

/* Footer wave with grey background on bibliotek single page */
.vb-footer-wave--bibliotek { 
  background: var(--grey-tint) !important; 
}

/* Opening status indicator */
.vb-opening-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.vb-status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vb-status-indicator--open {
  background-color: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.vb-status-indicator--closed {
  background-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.vb-status-text {
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--grey-medium);
}

/* Bibliotek fritext styling - same as archive */
.vb-bibliotek-fritext {
  /*max-width: 302px;*/
  border-left: 4px solid var(--brand-purple);
  padding-left: 16px;
  margin-top: 32px;
  font-family: var(--font-sans-1);
  font-weight: var(--w-regular);
  font-size: var(--fs-body1);
  line-height: 24px;
  color: var(--grey-dark);
}
@media (prefers-color-scheme: dark) {
  .vb-bibliotek-fritext {
    border-left: 4px solid #3C3C3C;
  }  
}


/* Utrustning section styling */
.vb-utrustning-section {
  border-top: 1px solid #E0E0E0;
  padding-top: 32px;
  margin-top: 32px;
  /* Frame 1000002026 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  height: auto;
  flex: none;
  order: 4;
  flex-grow: 0;
}

/* Utrustning header styling */
.vb-utrustning-header {
  /* Frame 1000002032 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;
  padding-top: 32px;
  width: 100%;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Utrustning heading styling */
.vb-utrustning-heading {
  font-weight: 600 !important;
  font-size: var(--fs-h3) !important;
  line-height: 30px !important;
  color: var(--text);
}

/* Utrustning toggle button styling */
.vb-utrustning-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.vb-utrustning-toggle:hover {
  background-color: var(--grey-tint);
}

.vb-utrustning-toggle:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.vb-utrustning-toggle[aria-expanded="false"] .vb-toggle-icon {
  opacity: 0.5;
}

/* Utrustning content collapsible behavior */
.vb-utrustning-content {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 1000px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
  width: 302px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.vb-utrustning-content.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Mobile: Utrustning section collapsed by default */
@media (max-width: 767px) {
  .vb-utrustning-content:not(.expanded) {
    max-height: 0;
    opacity: 0;
  }
  
  .vb-utrustning-content.expanded {
    max-height: 1000px;
    opacity: 1;
  }
  
  .vb-utrustning-toggle[aria-expanded="true"] .vb-toggle-icon {
    opacity: 1;
  }
  
  .vb-utrustning-toggle[aria-expanded="false"] .vb-toggle-icon {
    opacity: 0.5;
  }
}

/* Desktop: Utrustning section expanded by default */
@media (min-width: 768px) {
  .vb-utrustning-content {
    max-height: 1000px;
    opacity: 1;
  }
}

.vb-utrustning-content ul {
  list-style: none;           
  padding-left: 0;            
  margin-left: 0;
}

.vb-utrustning-content ul li {
  position: relative;
  padding-left: 28px;        
  line-height: 32px;         
}
.vb-utrustning-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;                  /* vertikalt centrerad */
  transform: translateY(-50%);
  width: 20px;               /* din bildstorlek */
  height: 20px;
  background-image: url('/wp-content/themes/biv2/assets/icon/badge.svg');
  background-size: contain;
  background-repeat: no-repeat;
}





/* Utrustning item styling */
.vb-utrustning-item {
  /* Frame 1000001819, 1000001820, etc. */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 302px;
  height: 24px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

/* Utrustning badge styling */
.vb-utrustning-badge {
  /* mynaui:badge-solid */
  width: 20px;
  height: 20px;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: relative;
}

/* Utrustning text styling */
.vb-utrustning-text {
  font-size: var(--fs-body1);
  line-height: 24px;
  text-align: center;
  color: #707070;
}

.vb-bibliotek-fritext p {
  margin-bottom: 16px;
}

.vb-bibliotek-fritext p:last-child {
  margin-bottom: 0;
}

/* Bibliotek content spacing */
.vb-bibliotek-content {
  margin-top: 40px;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .vb-bibliotek-content {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* Books Module */
.vb-books-module {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  margin: 80px auto;
  /*background: #FFFFFF;*/
}

.vb-books-wrapper {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.vb-books-title {
  font-family: 'Archivo', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 42px;
  color: var(--text);
  margin-bottom: 40px !important;
}

.vb-books-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
  /*height: 469px;*/
  height: 549px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.vb-book-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  width: 302px;
  /*height: 469px;*/
  height: 549px;
  flex: none;
  flex-grow: 0;
  position: relative;
}

.vb-book-image-wrapper {
  width: 302px;
  /*height: 403px;*/
  height: 483px;
  border-radius: 8px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  position: relative;
}

.vb-book-image {
  position: absolute;
  width: 304px;
  /*height: 406px;*/
  height: 486px;
  left: 0px;
  top: 0px;
  border-radius: 12px;
  object-fit: cover;
}

.vb-book-image-placeholder {
  position: absolute;
  width: 304px;
  /*height: 406px;*/
  height: 486px;
  left: 0px;
  top: 0px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="10" height="10" fill="%23f0f0f0"/><rect x="10" y="10" width="10" height="10" fill="%23f0f0f0"/><rect x="10" y="0" width="10" height="10" fill="%23e0e0e0"/><rect x="0" y="10" width="10" height="10" fill="%23e0e0e0"/></svg>') repeat;
  border-radius: 12px;
}

.vb-book-badge-wrapper {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  z-index: 2;
}

.vb-book-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 2px;
  width: 302px;
  height: 50px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.vb-book-title {
  width: 302px;
  min-height: 24px;
  font-family: 'Archivo', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-body1);
  line-height: 24px;
  color: var(--text);
  margin: 0;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.vb-book-author {
  width: 302px;
  min-height: 24px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-body1);
  line-height: 24px;
  color: var(--grey-dark);
  margin: 0;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.vb-book-link:focus-visible {
  outline: 2px solid var(--focus-ring-color-light);
  outline-offset: 2px;
}

.vb-book-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  text-decoration: none;
  color: transparent;
}

.vb-book-link:hover {
  color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive adjustments */
/* Do this for all, not just below 1440px */
/*@media (max-width: 1440px) {*/
  .vb-books-grid {
    flex-wrap: wrap;
    height: auto;
    gap: 20px;
  }
  
  .vb-book-card {
    width: calc(25% - 18px);
    min-width: 280px;
  }
  
  .vb-book-image-wrapper {
    width: 100%;
  }
  
  .vb-book-image,
  .vb-book-image-placeholder {
    width: 100%;
    height: 100%;
  }
  
  .vb-book-info {
    width: 100%;
  }
  
  .vb-book-title,
  .vb-book-author {
    width: 100%;
  }
/*}*/

@media (max-width: 1200px) {
  .vb-book-card {
    width: calc(33.333% - 16px);
    min-width: 250px;
  }
}

@media (max-width: 768px) {
  .vb-books-module {
    gap: 30px;
  }
  
  .vb-books-title {
    font-size: 1.75rem;
    line-height: 36px;
  }
  
  .vb-books-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    height: auto;
  }
  
  .vb-book-card {
    width: calc(50% - 7.5px);
    min-width: 140px;
    height: auto;
    flex-shrink: 0;
  }
  
  .vb-book-image-wrapper {
    width: 100%;
    height: 242px;
  }
  
  .vb-book-image,
  .vb-book-image-placeholder {
    width: 100%;
    height: 100%;
  }
  
  .vb-book-info {
    width: 100%;
    height: auto;
    gap: 4px;
  }
  
  .vb-book-title {
    width: 100%;
    height: auto;
    font-size: 13px;
    line-height: 18px;
  }
  
  .vb-book-author {
    width: 100%;
    height: auto;
    font-size: 11px;
    line-height: 16px;
  }
}

/* Extra small screens - ensure 2 columns even on very small devices */
@media (max-width: 480px) {
  .vb-books-module {
    gap: 25px;
  }
  
  .vb-books-grid {
    gap: 12px;
  }
  
  .vb-book-card {
    width: calc(50% - 6px);
    min-width: 120px;
  }
  
  .vb-book-image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }
  
  .vb-book-title {
    font-size: 0.75rem;
    line-height: 16px;
  }
  
  .vb-book-author {
    font-size: 10px;
    line-height: 14px;
  }
}

.vb-text__content a:focus-visible {
  outline: 2px solid var(--focus-ring-color-light);
  outline-offset: 2px;
}

.vb-text__content a {
  text-decoration: underline;
}

 

/* FAQ LANGUAGE SWITCHER */

    /* Frame 1000001976 */
    .vb-faq-language-switcher {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0px;
        gap: 10px;
        width: 100%;
        height: 60px;
        margin-top: 80px;
        border-width: 1px 0px;
        border-style: solid;
        border-color: #E0E0E0;
        margin-bottom: 16px;

    }






    /* Frame 1000001978 */
    .vb-faq-language-switcher__container {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;
        width: 100%;
        height: 20px;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    /* Select language: */
    .vb-faq-language-label {
        height: 20px;
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 0.875rem;
        line-height: 20px;
        color: #707070;
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    @media (max-width: 768px) {}

    /* Frame 1000002040 */
    .vb-faq-language-options {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;
        height: 20px;
        flex: none;
        order: 1;
        flex-grow: 1;
        position: relative;
    }

    /* Frame 1 */
    .vb-faq-language-option {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;
        width: 100%;
        height: 20px;
        flex: none;
        order: 0;
        flex-grow: 1;
        position: relative;
    }

    /* Svenska */
    .vb-faq-language-name {
        height: 20px;
        font-family: 'Inter', sans-serif;
        font-weight: 550;
        font-size: 0.875rem;
        line-height: 20px;
        color: #121212;
        flex: none;
        order: 0;
        flex-grow: 1;
    }

    /* Icons */
    .vb-faq-language-chevron {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 5px;
        width: 20px;
        height: 20px;
        flex: none;
        order: 1;
        flex-grow: 0;
    }

    /* chevron-right/20 */
    .vb-faq-language-chevron svg {
        width: 20px;
        height: 20px;
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    /* Hidden select for functionality */
    .vb-faq-language-select {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 1;
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 20px;
        letter-spacing: 0%;
        border: 2px solid transparent;
        border-radius: 4px;
        transition: border-color 0.2s ease;
    }

    @media (prefers-color-scheme: dark) {
      .vb-faq-language-select {
        color: var(--grey-dark) !important;
        background: transparent;
      }
      .vb-faq-language-select option {
        color: #121212 !important;
      }      
    }


    /* Focus styles for accessibility */
    .vb-faq-language-select:focus-visible {
        outline: 2px solid var(--brand-blue) !important;
        outline-offset: 2px !important;
    }

    /* Visual feedback when select is focused */
    .vb-faq-language-select:focus+.vb-faq-language-option {
        outline: 2px solid var(--brand-blue);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Screen reader text */
    .screen-reader-text {
        position: absolute !important;
        clip: rect(1px, 1px, 1px, 1px);
        width: 1px;
        height: 1px;
        overflow: hidden;
        word-wrap: normal;
    }

    /* RTL support for FAQ */
    [dir="rtl"] .vb-faq-language-switcher__container {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .vb-faq-accordion-trigger {
        text-align: right;
    }

    [dir="rtl"] .vb-faq-title,
    [dir="rtl"] .vb-faq-description {
        text-align: right;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .vb-faq-language-switcher {
            width: 100%;
            margin-top: 48px;
            max-width: 628px;
        }

        .vb-faq-language-switcher__container {
            width: 100%;
            flex-wrap: unset;
        }

        /* .vb-faq-language-options mobile overrides can be added here when needed */
    }