/* Fonts */
html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
strong,
em,
small,
blockquote,
ul,
ol,
li,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
div,
section,
article,
aside,
header,
footer,
main,
nav,
button,
input,
select,
textarea,
label {
  font-family: "Figtree", sans-serif !important;
}

html,
body {
  background-color: #ffffff;
  color-scheme: light;
}

main.main {
  padding-top: 60px;
}

html:has(.hero-section) main.main {
  padding-top: 0;
}

/* Header */
.header {
  position: absolute !important;
}

.header ul li a,
.hero-section__col a {
  text-decoration: none !important;
}

.header nav.primary-navigation .menu-primary-container ul#menu-primary li.depth-0.active > a {
  color: #ffcd6e;
}

.header {
  background-color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.header > .container {
  align-items: center !important;
  border-radius: 0;
  box-shadow: none !important;
  min-height: 60px;
}

.header nav.primary-navigation {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 248, 0.98) 100%) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(30, 85, 65, 0.12);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(18, 40, 32, 0.16) !important;
  display: block;
  left: auto !important;
  max-width: calc(100vw - 40px);
  min-width: 300px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  right: 20px !important;
  top: calc(100% + 10px) !important;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0.24s;
  visibility: hidden;
  width: min(32vw, 380px) !important;
}

.header nav.primary-navigation .menu-primary-container ul#menu-primary {
  flex-direction: column !important;
  gap: 4px;
  padding: 14px !important;
}

.header nav.primary-navigation .menu-primary-container ul#menu-primary li.depth-0 > a {
  background-color: transparent !important;
  border-radius: 14px;
  color: #15382b !important;
  font-weight: 500;
  height: auto !important;
  line-height: 1.35 !important;
  margin-right: 0 !important;
  padding: 12px 14px !important;
}

.header nav.primary-navigation .menu-primary-container ul#menu-primary li.depth-0 > a:hover,
.header nav.primary-navigation .menu-primary-container ul#menu-primary li.depth-0.active > a,
.header nav.primary-navigation .menu-primary-container ul#menu-primary li.depth-0.open > a {
  background-color: rgba(160, 198, 184, 0.28) !important;
  color: #1e5541 !important;
  text-decoration: none !important;
}

.header nav.primary-navigation .menu-primary-container ul#menu-primary ul.sub-menu {
  background-color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 0 0 16px 16px;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  margin: 0 !important;
  padding: 0 12px !important;
  position: static !important;
  transform: translateY(-8px) !important;
  width: auto !important;
}

.header nav.primary-navigation .menu-primary-container ul#menu-primary li.depth-0.open .sub-menu {
  margin-top: 6px !important;
  padding-bottom: 10px !important;
  transform: translateY(0) !important;
}

.header nav.primary-navigation .menu-primary-container ul#menu-primary li.depth-1 a {
  border-radius: 12px;
  display: block;
  padding: 10px 18px !important;
}

.header nav.primary-navigation .menu-primary-container ul#menu-primary li.depth-1 a:hover {
  background-color: rgba(160, 198, 184, 0.16);
  color: #1e5541;
  text-decoration: none !important;
}

.desktop-menu-toggle-wrap {
  display: none !important;
  margin-left: 16px;
  position: relative;
  z-index: 110;
}

#burger-menu-icon {
  background: linear-gradient(180deg, #1e5541 0%, #15382b 100%) !important;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(18, 40, 32, 0.14);
  height: 44px;
  padding: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  width: 56px;
}

#burger-menu-icon::before,
#burger-menu-icon::after {
  background: #ffcd6e;
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 50%;
  margin-left: -14px;
  margin-top: -1.5px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transition: opacity 0.12s ease, transform 0.16s ease;
  width: 28px;
}

#burger-menu-icon::before {
  transform: translateY(0) rotate(45deg) scaleX(0.7);
  transition-delay: 0s;
}

#burger-menu-icon::after {
  transform: translateY(0) rotate(-45deg) scaleX(0.7);
  transition-delay: 0.05s;
}

#burger-menu-icon .burger-line {
  background: #ffcd6e;
  border-radius: 999px;
  display: block;
  height: 3px;
  left: 50%;
  margin-left: -14px;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transform: translateY(0) scaleX(1);
  transition: opacity 0.12s ease, transform 0.16s ease;
  width: 28px;
}

#burger-menu-icon .burger-line--top {
  top: calc(50% - 9px);
  transition-delay: 0.1s;
}

#burger-menu-icon .burger-line--middle {
  top: calc(50% - 1.5px);
  transition-delay: 0.05s;
}

#burger-menu-icon .burger-line--bottom {
  top: calc(50% + 6.5px);
  transition-delay: 0s;
}

.menu_open #burger-menu-icon {
  background: linear-gradient(180deg, #2e5044 0%, #0f2a20 100%) !important;
}

.menu_open #burger-menu-icon::before,
.menu_open #burger-menu-icon::after {
  opacity: 1;
}

.menu_open #burger-menu-icon::before {
  transform: translateY(0) rotate(45deg) scaleX(1);
  transition-delay: 0.08s;
}

.menu_open #burger-menu-icon::after {
  transform: translateY(0) rotate(-45deg) scaleX(1);
  transition-delay: 0.12s;
}

.menu_open #burger-menu-icon .burger-line {
  opacity: 0;
  transform: scaleX(0.65);
}

.menu_open #burger-menu-icon .burger-line--top {
  transition-delay: 0s;
}

.menu_open #burger-menu-icon .burger-line--middle {
  transition-delay: 0.04s;
}

.menu_open #burger-menu-icon .burger-line--bottom {
  transition-delay: 0.08s;
}

@media (max-width: 1139px) {
  .header nav.primary-navigation,
  .desktop-menu-toggle-wrap,
  #burger-menu-icon {
    display: none !important;
  }
}

@media (min-width: 1140px) {
  .desktop-menu-toggle-wrap {
    display: flex !important;
  }

  .menu_open .header nav.primary-navigation {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0s;
    visibility: visible;
  }
}

/* Last updated */
p.last-updated {
  margin-bottom: 0.75rem;
}

.hero-section-v2-container h1 {
  margin-bottom: 15px;
}

.hero-section-v2-container h1:last-child {
  margin-bottom: 0;
}

@media (max-width: 450px) {
  .hero-section-v2-container {
    padding-bottom: 15px;
  }

  .loan-plugin-list-section {
    padding-top: 15px;
  }

  p.last-updated {
    margin-bottom: 7px;
  }
}

/* Filter */
@media (max-width: 1270px) {
  .new-filter-variant {
    padding-top: 1rem;
  }

  .new-filter-variant .filter-text {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 14px !important;
    line-height: 21px;
    padding: 0.75rem 3.5rem 0.75rem 0.75rem;
    position: relative;
    transition: background-color 0.2s ease-out, filter 0.2s ease-out;
  }

  .new-filter-variant .filter-text:hover {
    background-color: #f0f0f0;
  }

  .new-filter-variant.new-filter-variant-active .filter-text {
    filter: brightness(0.9);
  }

  .new-filter-variant .filter-text::after {
    background-color: #a0c6b8;
    background-image: url("../images/adjustments-horizontal-dark-green.svg");
    background-position: 48px center;
    background-repeat: no-repeat;
    background-size: 24px;
    border-radius: 0.5rem;
    color: #1e5541;
    content: "Filter";
    display: block;
    font-weight: 600;
    height: 2rem;
    line-height: 31px;
    padding: 0 1.5rem 0 0.5rem;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4.75rem;
  }

  .new-filter-variant .filter-options,
  .new-filter-variant .filter-slider {
    display: none;
  }

  .new-filter-variant.new-filter-variant-active .filter-options,
  .new-filter-variant.new-filter-variant-active .filter-slider {
    display: block;
  }

  .new-filter-variant.new-filter-variant-active .filter-options {
    margin-top: 1.5rem;
  }
}

/*
  Loans List,
  Loan Highlighted Card Section
*/
@media (min-width: 1440px) {
  html:has(.loans-list) section.content-section > *:first-child,
  html:has(.loans-list)
    section.content-loan-highlighted-card-section
    > *:first-child,
  html:has(.loans-list) section.content-box-section > *:first-child,
  html:has(.loans-list) section.faq-section > *:first-child {
    transform: translateX(157px);
    max-width: 957px;
  }
}

.content-loan-highlighted-card-section {
  margin: 2rem 0;
}

.loans-list .loan-card,
.content-loan-highlighted-card-section .loan-card {
  overflow: hidden !important;
  position: relative;
}

.loans-list .loan-card::before,
.content-loan-highlighted-card-section .loan-card::before {
  background-color: #ffcd6e;
  color: #000000;
  content: attr(data-current-position);
  left: 0px;
  padding: 0.5rem 1rem;
  position: absolute;
  top: 0px;
}

.loans-list .loan-card:not([data-current-position="1"])::before {
  background-color: #f4f6f7;
  border-bottom-right-radius: 6px;
  color: #a1a1a1;
}

.content-loan-highlighted-card-section .loan-card::before {
  display: none;
}

.loans-list .loan-card[data-current-position="1"],
.content-loan-highlighted-card-section .loan-card {
  border: 1px solid #1e5541;
  box-shadow: 0px 0px 6px 1px rgba(30, 87, 66, 0.5);
  padding: 35px 0 0 0;
}

.loans-list .loan-card[data-current-position="1"] table.loan-card--main::before,
.content-loan-highlighted-card-section
  .loan-card
  table.loan-card--main::before {
  background-color: #ffcd6e;
  background-image: url("../images/medal-black.svg");
  background-position: 0.5rem center;
  background-repeat: no-repeat;
  border-left: 1px dotted rgba(0, 0, 0, 0.35);
  border-bottom-right-radius: 6px;
  color: #000000;
  content: "Bästa valet";
  left: 39px;
  padding: 0.5rem 1rem 0.5rem 37px;
  position: absolute;
  top: 0px;
}

.content-loan-highlighted-card-section
  .loan-card
  table.loan-card--main::before {
  border-left: 0px;
  left: 0px;
}

.loans-list .loan-card .loan-card__logo img,
.content-loan-highlighted-card-section .loan-card .loan-card__logo img {
  min-height: 48px !important;
}

.loans-list .loan-card .loan-card--grade-container,
.content-loan-highlighted-card-section .loan-card .loan-card--grade-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.loans-list .loan-card .loan-card--grade,
.content-loan-highlighted-card-section .loan-card .loan-card--grade {
  margin-right: 0.5rem;
}

.loans-list .loan-card .loan-card--grade span:first-child,
.content-loan-highlighted-card-section
  .loan-card
  .loan-card--grade
  span:first-child {
  color: #000000;
  font-weight: 700;
  font-size: 33px;
}

.loans-list .loan-card .ratings-stars-container,
.content-loan-highlighted-card-section .loan-card .ratings-stars-container {
  margin-top: -3px;
}

.loans-list .loan-card .rating-stars-container,
.loans-list .loan-card .rating-stars-container + div,
.content-loan-highlighted-card-section .loan-card .rating-stars-container,
.content-loan-highlighted-card-section
  .loan-card
  .rating-stars-container
  + div {
  height: 16px;
  line-height: 16px;
}

.loans-list .loan-card .rating-stars-container + div span,
.content-loan-highlighted-card-section
  .loan-card
  .rating-stars-container
  + div
  span {
  font-size: 0.8rem;
}

.loans-list .loan-card .rating-stars i.star,
.content-loan-highlighted-card-section .loan-card .rating-stars i.star {
  margin-right: 0px !important;
}

.loans-list .loan-card .loan-card--highlight,
.content-loan-highlighted-card-section .loan-card .loan-card--highlight {
  background-color: #ffeec0;
  color: rgb(73, 73, 73);
  display: none;
}

.loans-list .loan-card[data-current-position="1"] .loan-card--highlight,
.content-loan-highlighted-card-section .loan-card .loan-card--highlight {
  display: block;
}

.loans-list .loan-card .loan-card--highlight p,
.content-loan-highlighted-card-section .loan-card .loan-card--highlight p {
  margin: 0;
  padding: 0.5rem 0;
}

.loans-list .loan-card .loan-card--highlight p strong,
.content-loan-highlighted-card-section
  .loan-card
  .loan-card--highlight
  p
  strong {
  font-weight: 700;
}

.loan-card .loan-card--checkmarks td div:before {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 24px;
  display: block;
  height: 24px;
  width: 0px;
}

.loan-card .loan-card--checkmarks td div.active:before {
  background-image: url("../images/check-green.svg");
  height: 24px;
  width: 24px;
}

@media (max-width: 920px) {
  .loan-card .loan-card--checkmarks td div:before {
    height: 24px;
    width: 24px;
  }
}

.loans-list .loan-card td[data-param="Löptid"],
.content-loan-highlighted-card-section .loan-card td[data-param="Löptid"] {
  display: none;
}

.loans-list .loan-card td.col-span-4,
.content-loan-highlighted-card-section .loan-card td.col-span-4 {
  display: none !important;
}

html:has(.with-loan-term-variant)
  .loans-list
  .loan-card
  td[data-param="Löptid"],
html:has(.with-loan-term-variant)
  .content-loan-highlighted-card-section
  .loan-card
  td[data-param="Löptid"] {
  display: block !important;
}

.loan-card__button-primary {
  border-radius: 8px !important;
}

@media (min-width: 920px) {
  html:has(.with-loan-term-variant) .loans-list .loan-card,
  html:has(.with-loan-term-variant)
    .content-loan-highlighted-card-section
    .loan-card {
    padding-top: 35px;
  }

  html:has(.with-loan-term-variant)
    .loans-list
    .loan-card
    .rating-stars__wrapper,
  html:has(.with-loan-term-variant)
    .content-loan-highlighted-card-section
    .loan-card
    .rating-stars__wrapper {
    position: absolute;
    right: 28px;
    top: 10px;
  }

  html:has(.with-loan-term-variant)
    .loans-list
    .loan-card
    .loan-card--main
    tbody
    tr:first-child,
  html:has(.with-loan-term-variant)
    .content-loan-highlighted-card-section
    .loan-card
    .loan-card--main
    tbody
    tr:first-child {
    padding-bottom: 0.5rem;
    padding-top: 0.75rem;
  }
}

@media (max-width: 920px) {
  .loans-list .grade-word-container,
  .content-loan-highlighted-card-section .grade-word-container {
    display: none;
  }

  .loans-list .loan-card .loan-card--grade-container,
  .content-loan-highlighted-card-section
    .loan-card
    .loan-card--grade-container {
    flex-wrap: wrap;
  }

  .loans-list .loan-card .loan-card--grade,
  .content-loan-highlighted-card-section .loan-card .loan-card--grade {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-left: 0.75rem;
  }

  .loans-list .loan-card .loan-card--checkmarks td,
  .content-loan-highlighted-card-section .loan-card .loan-card--checkmarks td {
    display: flex;
  }
}

@media (max-width: 430px) {
  .loans-list .loan-card .loan-card--grade-container .block.text-xs,
  .content-loan-highlighted-card-section
    .loan-card
    .loan-card--grade-container
    .block.text-xs {
    display: none;
  }
}

.loan-card .weekend-payout-cell span + span {
  display: none;
}

@media (max-width: 440px) {
  .loan-card .loan-card--checkmarks {
    padding: 21px 20px;
  }
}

@media (max-width: 370px) {
  .loan-card .weekend-payout-cell span:first-child {
    display: none;
  }

  .loan-card .weekend-payout-cell span + span {
    display: inline;
  }
}