/* ───────────────────────────────────────────────────────────────────────────
   Finn regnskapsfører — scoped under .frf.

   Local --frf-* tokens read the live conta.no Webflow Variables (new brand) with
   production hex values as fallbacks, so the component is on-brand on the site and
   still legible in local preview / anywhere the variables aren't declared.
   The custom search dropdown is OUR OWN DOM (rendered inside the component), so —
   unlike Google's built-in Autocomplete .pac-container — it lives in the same
   (shadow) root and these scoped rules reach it. No global selectors needed.
   ─────────────────────────────────────────────────────────────────────────── */
.frf {
  --frf-green: var(--brand--green-400, #009a44);
  --frf-green-strong: var(--brand--green-700, #04221a);
  --frf-accent: var(--brand--green-300, #60e791);
  --frf-text: var(--text-color--text-primary, #04221a);
  --frf-text-2: var(--text-color--text-secondary, #565c59);
  --frf-border: var(--border-color--border-primary, #bfccc5);
  --frf-surface: var(--background-color--background-primary, #ffffff);
  --frf-surface-2: var(--background-color--background-secondary, #f0f2f1);
  --frf-link: var(--link-color--link-primary, #009a44);
  --frf-n50: var(--neutral--neutral-50, #d9e0dc);
  --frf-gold: #f5b800;
  --frf-gold-soft: #fff6da;

  --frf-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --frf-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --frf-radius: 14px;
  --frf-radius-sm: 10px;

  display: block;
  font-family: var(--frf-font-body);
  color: var(--frf-text);
  line-height: 1.5;
}

.frf *,
.frf *::before,
.frf *::after {
  box-sizing: border-box;
}

/* ---- header ---- */
.frf-head {
  margin: 0 0 1rem;
}
.frf-title {
  font-family: var(--frf-font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.35rem;
  color: var(--frf-green-strong);
}
.frf-sub {
  margin: 0;
  color: var(--frf-text-2);
  font-size: 1.0625rem;
}

/* ---- search ---- */
.frf-searchbar {
  position: relative;
  max-width: 540px;
  margin: 0 0 1.25rem;
}
.frf-input {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--frf-text);
  background: var(--frf-surface);
  border: 1.5px solid var(--frf-border);
  border-radius: 999px;
  padding: 0.85rem 2.8rem 0.85rem 1.25rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.frf-input::placeholder {
  color: var(--frf-text-2);
  opacity: 0.8;
}
.frf-input:focus {
  border-color: var(--frf-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--frf-green) 22%, transparent);
}

.frf-clear {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--frf-text-2);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.frf-clear:hover {
  background: var(--frf-surface-2);
  color: var(--frf-text);
}

/* ---- body: map + list ---- */
.frf-body {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
}
.frf-body--nomap .frf-list-wrap {
  max-height: 600px;
}
.frf-map {
  flex: 1 1 58%;
  min-width: 0;
  min-height: 540px;
  border-radius: var(--frf-radius);
  overflow: hidden;
  background: var(--frf-surface-2);
  border: 1px solid var(--frf-border);
}
/* Map stays mounted (so Google's DOM is never torn out by React) but is hidden
   until usable — in the Designer, while loading, or after a referrer/auth failure. */
.frf-map--hidden {
  display: none;
}

.frf-list-wrap {
  flex: 1 1 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 540px;
}
.frf-list-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.25rem 0.6rem;
  min-height: 1.75rem;
}
.frf-count {
  font-size: 0.9rem;
  color: var(--frf-text-2);
}
.frf-back {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--frf-link);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.frf-back:hover {
  text-decoration: underline;
}
.frf-hp-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--frf-text-2);
  background: none;
  border: 1px solid var(--frf-border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.frf-hp-filter:hover {
  border-color: var(--frf-gold);
}
.frf-hp-filter.is-on {
  background: var(--frf-gold-soft);
  border-color: var(--frf-gold);
  color: var(--frf-green-strong);
}
.frf-hp-star {
  color: var(--frf-gold);
}

.frf-list {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}
.frf-card {
  position: relative;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--frf-border);
  border-radius: var(--frf-radius-sm);
  margin-bottom: 0.6rem;
  background: var(--frf-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.frf-card-logo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--frf-border);
  overflow: hidden;
}
.frf-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.frf-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.frf-card.is-hovedpartner {
  border-color: var(--frf-gold);
}
.frf-card-star {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  color: var(--frf-gold);
  font-size: 1.05rem;
  line-height: 1;
}
.frf-card:hover {
  border-color: var(--frf-green);
}
.frf-card.is-selected {
  border-color: var(--frf-green);
  box-shadow: inset 4px 0 0 var(--frf-green);
}
.frf-card-name {
  margin: 0 0 0.2rem;
  padding-right: 1.5rem;
  font-family: var(--frf-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}
.frf-card-namebtn {
  font: inherit;
  text-align: left;
  color: var(--frf-green-strong);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.frf-card-namebtn:hover {
  color: var(--frf-green);
}
.frf-card-city {
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--frf-green);
}
.frf-card-coverage {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--frf-text-2);
}
.frf-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.frf-tag {
  font-size: 0.75rem;
  color: var(--frf-text-2);
  background: var(--frf-surface-2);
  border-radius: 6px;
  padding: 0.12rem 0.5rem;
  white-space: nowrap;
}
.frf-card-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: 0.4rem;
}
.frf-card-link {
  font-size: 0.9rem;
  color: var(--frf-link);
  text-decoration: none;
  word-break: break-word;
}
.frf-card-link:hover {
  text-decoration: underline;
}
.frf-empty {
  padding: 1.5rem 0.5rem;
  color: var(--frf-text-2);
  text-align: center;
}

/* ---- responsive: stack the map above the list ---- */
@media (max-width: 720px) {
  .frf-body {
    flex-direction: column;
    gap: 1rem;
  }
  .frf-map {
    flex: none;
    min-height: 340px;
  }
  .frf-list-wrap {
    flex: none;
    max-height: 60vh;
  }
}