/*
 * Extracted from page.php's second and third <style> blocks, in that order.
 * They were the only CSS between their original positions, so concatenating
 * them here and linking from the first one's position keeps the cascade
 * identical. The remaining inline block in page.php stays put: it builds
 * per-page selectors with PHP and cannot be a static file.
 */


.toplist-background {
    background-color: #f8fafd;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-bottom: 25px;
    margin-bottom: 25px;
    margin-top: 0px!important;
  }

  .pick-box {
     border: 1px solid #000;
     border-bottom: 3px solid #000;
     border-right: 3px solid #000;
     border-radius: 5px;
     padding: 20px;
  }

  /* The header is two columns on desktop (logo + CTA left, title + specs
     right). Stacked on mobile that put the CTA second, above the name and
     every fact, so the ask came before the reasons. display:contents lifts the
     left column's children into the row so they can be ordered individually:
     logo, title, specs, then CTA. Desktop is untouched. */
  @media (max-width: 767.98px) {
    .toplist-header .row > .col-md-4 {
      display: contents;
    }

    .toplist-header .row > .col-md-4 > .toplist-img {
      order: 1;
      margin-left: 15px;
      margin-right: 15px;
    }

    .toplist-header .row > .col-md-8 {
      order: 2;
    }

    .toplist-header .row > .col-md-4 > .btn-success {
      order: 3;
      margin-left: 15px;
      margin-right: 15px;
    }
  }

  /* Legal credit warning printed under each lender/credit-card listing.
     Sits flush with .pick-box above it and stays deliberately quiet. */
  .disclaimer-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: -0.5rem 0 0.5rem;
    padding: 10px 14px;
    background-color: #fafafb;
    border-radius: 5px;
  }

  .disclaimer-box__icon {
    height: 26px;
    width: auto;
    flex: 0 0 auto;
    margin-top: 2px;
    opacity: 0.7;
  }

  /* Muted, but this is a legally required warning — keep it above the 4.5:1
     contrast floor rather than fading it out completely. */
  .disclaimer-box__text {
    margin: 0;
    color: #6b7280;
    font-size: 11px;
    line-height: 1.65;
  }

  .disclaimer-box__text strong {
    display: block;
    margin-bottom: 1px;
    color: #4b5563;
    font-weight: 600;
  }

  /* TOPLIST ADS */ 

.toplist-bg {
  height: 200px;
}

.toplist-img {
  width: 150px;
  background-color: #f7f7f8;
  border-radius: 5px;
}

.navbar {
  background-color: #c23f36;
}

.bg-gray-main {
  background-color: #263238;
}

.toplist-row {
  border: 1px solid #b1b7c5;
  background-color: white;
  margin-bottom: 15px;
}

.badge-pick {
  color: #5bb92d;
  background-color: #f5faf4;
  padding: 0.8em 1em;
  font-size: 90%;
  margin-bottom: 5px;
}

.author-box-title {
    font-size: 14px;
    letter-spacing: 1.8px;
    line-height: 20px;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 400;
    color: #828ba2;
    }

    .author-box-name {
      font-size: 19px;
      line-height: 24px;
      margin-bottom: 16px;
    }

    .author-box-description {
      font-size: 19px;
    font-style: italic;
    line-height: 28px;
    color: #495163;
    }

    .author-role {
      font-size: 15px;
      font-weight: 400;
      color:#828ba2;
    }

    .list-group-item {
      color: #656e83;
      border: 0px!important;
    }

    .author-box {
      border-top: 1px solid #e7eaf4;
    }

    /* These bullets used to be Font Awesome glyphs (\f058 / \f057) pulled from the
       kit in header.php. That kit is gone, so they rendered as blank boxes. Drawn
       inline instead — no font dependency. */
    .pros-toplist li:before,
    .cons-toplist li:before,
    .insurance-pros li:before {
        content: "";
        display: inline-block;
        width: 1em;
        height: 1em;
        margin-right: 0.5em;
        vertical-align: -0.15em;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .pros-toplist li:before,
    .insurance-pros li:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2328ae60'/%3E%3Cpath d='m6.6 12.4 3.3 3.3 7.1-7.1' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .cons-toplist li:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23f70000'/%3E%3Cpath d='M8.3 8.3 15.7 15.7M15.7 8.3 8.3 15.7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .news-teaser__title{
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5rem;
  margin-top: .5rem;
}


    .rating-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    background: #fff8e1;
    border: 2px solid #ffb400; 
    border-radius: 8px;
    font-weight: bold;
    color: #ffb400;
}

.rating-box .star {
    font-size: 1.4rem;
}


    ul.pros-toplist {
      list-style-type: none!important;
      padding: 0;
    }

    ul.cons-toplist {
      list-style-type: none!important;
      padding: 0;
    }

    ul.insurance-pros {
      list-style-type: none!important;
      padding: 0;
    }

    ul#toc-list {
      list-style-type: none!important;
      padding: 0;
    }

    /* Container */
#toc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 15px;
}

/* Top-level items */
#toc-list > li {
  margin-bottom: 14px;
  line-height: 1.5;
  font-weight: 500;
}

/* Nested list */
#toc-list ul {
  list-style: disc;
  padding-left: 22px;
  margin-top: 6px;
}

/* Nested list items */
#toc-list ul li {
  color: #7a7a7a;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 6px;
}

/* Sub-headings sit one level in and read a little quieter */
#toc-list .toc-item--h3 {
  margin-bottom: 8px;
  padding-left: 14px;
  font-weight: 400;
  font-size: 14px;
  color: #7a7a7a;
}

/* Optional link styling */
#toc-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

#toc-list a:hover {
  color: #007bff;
}

/* Keep a jumped-to heading clear of the top of the viewport */
#article-content h2,
#article-content h3,
.selection-toplist h2,
.selection-toplist h3 {
  scroll-margin-top: 24px;
}

/* Optional section divider line */
#toc-title {
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
  margin-bottom: 12px;
  display: block;
}

    #sidebar.sticky-top {
        top: 20px; /* Adjust this value as needed */
    }

    .custom-badge {
    position: absolute;
    left: 5px;
    top: 5px;
    margin-top: 5px;
    margin-left: 5px;
}

.pick-summary-box {
  padding: 20px 30px;
  border-radius: 5px;
  border-top: 2px solid #f66960!important;
  border: 1px solid #e0e0e0;
}

.best-insurance-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.summary-link a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  margin-bottom: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  gap: 12px;
}

.summary-link a:hover {
    background: #fafafa;
    border-color: #c9c9c9;
}

.summary-link.top a:hover {
    border-color: #c23f36;
}

/* Keyboard users get the same affordance as the hover state. */
.summary-link a:focus-visible {
    outline: 2px solid #c23f36;
    outline-offset: 2px;
}

.cta-mini {
  font-size: 14px;
  font-weight: 600;
  /* Was #ff4d4d, which is only 3.27:1 on white and fails AA at this size.
     The brand red is 5.17:1 and matches borsvarlden.com's own palette. */
  color: #c23f36;
  white-space: nowrap;
  display: inline-block;
  transition: transform 0.2s ease;
}

.summary-link a:hover .cta-mini {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .summary-link a,
  .cta-mini {
    transition: none;
  }
  .summary-link a:hover .cta-mini {
    transform: none;
  }
}

.micro-value {
  display: block;
  font-size: 13px;
  font-weight: 400;
  margin-top: 4px;
  color: #666;
}

.summary-link.top a {
  border: 1px solid #c23f36;
  background: #fff5f5;
}

.trust-line {
  font-size: 14px;
  color: #2f8f46;
  margin-bottom: 14px;
}

.toplist-badges .badge {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Mobile TOC toggle button */
.toc-toggle {
  background-color: transparent;
  color: #ffffff;
  font-weight: 400;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  color: grey;
  border: 1px solid #e5e5e5;
}

/* Active state */
.toc-toggle.active,
.toc-toggle:hover {
  background-color: #f7f7f7;
  border-color: #d6d6d6;
  color: #555;
  font-weight: 500;
}

/* Remove Bootstrap focus outline */
.toc-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(53, 90, 168, 0.25);
}

/* Smooth tap feel on mobile */
.toc-toggle:active {
  transform: translateY(1px);
}

/* Hide the H2 on mobile (button already acts as the label) */
@media (max-width: 767.98px) {
  .toc-title {
    display: none;
  }
}

/* Show the H2 on desktop */
@media (min-width: 768px) {
  .toc-title {
    display: block;
  }
}


@media only screen and (max-width: 600px) {
.custom-badge {
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
}
}

.sticky-toc {
            position: sticky;
            top: 0;
            z-index: 1000;
        }


/* ---- second block ---- */

.is-style-borsvarlden-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 1rem;
}

.is-style-borsvarlden-table thead {
  border-bottom: 1px solid #d91e18!important;
}

/* Header */
.is-style-borsvarlden-table thead th {
  border: 0px;
  color: #d91e18;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
}

.is-style-borsvarlden-table thead td {
  border: 0px;
}

/* Table rows */
.is-style-borsvarlden-table tbody tr {
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.15s ease-in-out;
}


/* Table cells */
.is-style-borsvarlden-table td {
  padding: 8px 6px;
  vertical-align: middle;
  line-height: 1.4;
  border: 0px!important;
}

.is-style-borsvarlden-table td:last-child a:hover {
  text-decoration: underline;
}

.is-good {
  color: #1f9d55; /* green */
  font-weight: 600;
}

.is-bad {
  color: #e3342f; /* red */
  font-weight: 600;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .is-style-borsvarlden-table {
    font-size: 14px;
  }

  .is-style-borsvarlden-table td {
    padding: 6px 4px;
  }
}

.pick-table {
  border-collapse: separate;
   border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 20px;
    width: 100%;
    word-break: initial;
}

.pick-table td {
  border-bottom: 1px solid #e6e6e6;
  padding: 5px;
}

.pick-table td:first-child {
  text-align: left;
}

.pick-table td:last-child {
  text-align: right;
}

/* Section label inside a spec table (Trafik, Maskin, Vagnskada...). It spans
   both columns, so it is also :last-child and would otherwise be right-aligned
   by the rule above. */
.pick-table td.pick-table__group {
  text-align: left;
  padding-top: 14px;
  border-bottom-color: #d9d9d9;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pick-table tr:first-child td.pick-table__group {
  padding-top: 5px;
}

.modern-loan-box {
  border-bottom: 1px solid #e5e5e5;
  padding: 20px 0;
  max-width: 600px;
}

.loan-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.loan-label {
  font-size: 14px;
  color: #5a5a5a;
  margin-bottom: 4px;
}

.loan-value {
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.modern-loan-box .loan-row:last-child {
  margin-bottom: 0;
}