/* ═══════════════════════════════════════════════════════════════
 * MOLSLINJEN CVI — BUSINESS-SIDER
 *
 * Kun til /business/ og /s360business/. De to sider har komponenter
 * de øvrige kampagnesider ikke har — clipcard, faneblade,
 * sammenlignings-tabel — og de kørte alle den mintgrønne #2bf6a5,
 * som ikke findes i CVI-paletten.
 *
 * Linkes EFTER CSS/cvi/beregner.css.
 * Kræver tokens.css.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Clipcard-knap ──────────────────────────────────────────────
   Var mintgrøn med mørk tekst. Nu CTA-blå med hvid, som sidens
   øvrige primære handlinger. */
.clipcard-button {
  background-color: var(--color-cta);
  color: var(--color-paa-cta);
}
.clipcard-button:hover {
  background-color: var(--color-cta-hover);
}

/* ── Faneblade ──────────────────────────────────────────────────
   Det aktive faneblad markeres med farve + en 1px understregning.
   Begge var mintgrønne. */
.tab-button.active {
  color: var(--color-cta);
}
.tab-button.active::after {
  background-color: var(--color-cta);
}

/* ═══════════════════════════════════════════════════════════════
 * BUSINESS-SIDERNES EGNE KOMPONENTER
 *
 * Beregneren deler formularlaget med de øvrige sider (se
 * cvi/beregner.css). Herunder er det business-siderne har for sig:
 * billet-kort, prisskyder, bannere og tooltip.
 *
 * Farverne der udskiftes:
 *   #001f47 / #001F46 / #132352  → Dyb Havblå (tre navnefarver, én rolle)
 *   #0031aa                      → Havblå
 *   #24d68f                      → CTA-blå (mintgrøn hover, den sidste)
 *   #1657F6                      → CTA-blå (Google-blå på scroll-ikonet)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Bannere og brødtekst ───────────────────────────────────────── */
.banner-content p,
.banner-content strong,
.banner-step-title,
.benefits-content h2,
.button,
.tooltip {
  color: var(--color-dyb-havblaa);
}

.bottom-banner {
  background: var(--color-havblaa);
}

/* Gradienten er væk — CVI'en har ingen. Flad Dyb Havblå i stedet. */
.comparison-card {
  background-image: none;
  background-color: var(--color-dyb-havblaa);
}

/* ── Info-knap ──────────────────────────────────────────────────── */
.info-button {
  background: var(--color-dyb-havblaa);
}
.info-button:hover {
  background: var(--color-havblaa);
}

/* ── Navigation ─────────────────────────────────────────────────── */
.navbar {
  background-color: var(--color-dyb-havblaa);
}

/* ── Prisskyder ─────────────────────────────────────────────────── */
.price,
.price-with-controls .price-value,
.slider-thumb {
  color: var(--color-dyb-havblaa);
}
/* Skyderens greb havde mintgrøn baggrund. */
.slider-thumb {
  background-color: var(--color-cta);
}
.slider-value::after  { border-left-color: var(--color-dyb-havblaa); }
.slider-value::before { border-right-color: var(--color-dyb-havblaa); }

/* ── Billet-kort ────────────────────────────────────────────────── */
.ticket-card.selected {
  border-color: var(--color-dyb-havblaa);
}
.ticket-card.selected .ticket-select {
  background-color: var(--color-dyb-havblaa);
}

/* ── Handlingsknapper: næste-knap og billet-vælger ──────────────
   Begge havde mintgrøn BAGGRUND i hvile (#2CF6A5) med mørk tekst.
   Sætter man kun hover, står knappen grøn indtil man rører den og
   bliver blå bagefter. Derfor både base og hover her. */
.next-button,
.ticket-select {
  background-color: var(--color-cta);
  color: var(--color-paa-cta);
}
.next-button:hover,
.ticket-select:hover {
  background-color: var(--color-cta-hover);
}

/* ── Scroll-ikon ────────────────────────────────────────────────
   Var #1657F6, Googles blå — aldrig en CVI-farve. */
.scroll-down-icon {
  background-color: var(--color-cta);
}

/* ── Inline SVG ─────────────────────────────────────────────────
   Farver i SVG'ens fill-ATTRIBUT, ikke i CSS. En attribut taber til
   enhver CSS-regel, så de kan rettes herfra uden at røre markup'en.

   Var:
     .info-icon      fill="#001f47"   info-ikonet ved lavpris-billetten
     .icon circle    fill="#1657F6"   Googles blå på de fire punkt-ikoner
                                      (kun s360business) */
.info-icon path {
  fill: var(--color-dyb-havblaa);
}

.icon > svg circle {
  fill: var(--color-cta);
}

/* ── Sidste grønne rester ───────────────────────────────────────
   Fem grønne toner var i omløb ud over #2bf6a5 og #24d68f:
   #20d88d, #20e090, #2cf6a5, #2cf5a4 og rgba(44,246,165,.5).
   De tre selektorer herunder var de eneste tilbage der ikke allerede
   var dækket. */
.play-button {
  background-color: var(--color-cta);
}


/* Deaktiveret: samme blå, halv opacitet — som den grønne var det. */
.next-button:disabled {
  background-color: rgba(0, 181, 237, 0.5);
}