/* PRAI nettside — utseende på Cookiebot-samtykkebanneret.
 *
 * Hvorfor egen CSS i stedet for Cookiebots designverktøy: designvalgene i
 * dashbordet er premium-funksjoner. Overstyring herfra virker uansett plan,
 * og gir PRAI-paletten presist i stedet for et av Cookiebots ferdige temaer.
 *
 * Cookiebot leverer banneret med egne id-er og inline-stiler, så !important er
 * nødvendig. Alle selektorer under er verifisert mot den faktiske DOM-en.
 *
 * Palett (Nordvest, samme som resten av siden):
 *   #14202B  mørk marine      #FCFBF7  varm off-white
 *   #C47D2B  kobber           #F6F2EA  panelbakgrunn
 *   #A9691F  kobber mørk      #E6E1D6  ramme
 *   #8A94A0  dempet tekst
 */

/* ==========================================================================
   1. Dialogrammen
   ========================================================================== */

#CybotCookiebotDialog {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  background: #FCFBF7 !important;
  color: #14202B !important;
  border: 1px solid #E6E1D6 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(20, 32, 43, 0.18) !important;

  /* Bredden er satt av to hensyn: kategoriraden må romme fire kolonner med
   * «Markedsføring», og brødteksten skal få «personvernerklæringen» opp på
   * linja over — et langt ord som alene på siste linje koster en hel
   * linjehøyde. 460 px dekker begge. */
  max-width: 460px !important;
  width: min(460px, calc(100vw - 32px)) !important;
  max-height: min(76vh, 460px) !important;
  overflow-y: auto !important;

  /* Liten boks nede til venstre, ikke modal midt på skjermen. Cookiebot
   * sentrerer med top/left 50% + transform, så alle må overstyres. */
  top: auto !important;
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  #CybotCookiebotDialog {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Ingen mørk skjerm bak — boksen skal ligge diskret over innholdet. */
#CybotCookiebotDialogBodyUnderlay,
#CybotCookiebotDialogBodyUnderlayWrapper {
  display: none !important;
}

/* ==========================================================================
   2. Elementer som fjernes
   ========================================================================== */

/* Toppstripa holder Cookiebot-logoen og ingenting funksjonelt — lukkekrysset
 * er skrudd av i dashbordet. Å fjerne attribusjonen forutsetter betalt plan
 * etter Cookiebots vilkår. */
#CybotCookiebotDialogHeader,
#CybotCookiebotDialogPoweredbyLink,
#CybotCookiebotDialogPoweredbyImage,
#CybotCookiebotDialogPoweredByText {
  display: none !important;
}

/* «TEST»-vannmerket. Verifisert i DOM-en som et vanlig element — de tidligere
 * gjettede id-ene fantes ikke. Vises kun på domenealias (preview), aldri på
 * www.prai.no, men skjules så testbildet blir representativt. */
.CybotCookiebotDialogBodyInternalAlias {
  display: none !important;
}

/* «TEST»-vannmerket i cookie-oversikten. Klasse- og id-løs <div> med kun
 * inline-stiler — navnebaserte regler kan ikke treffe den.
 *
 * LÆRDOM fra to feilskudd: «skjul klasseløse diver på nivået» skjulte ALT,
 * fordi cd.js pakker hele innholdet sitt i en ytre klasseløs div. Regelen må
 * derfor treffe vannmerkets egen signatur: pointer-events i inline-stilen
 * (dekorativt overlegg). Ingenting annet i oversikten har det — selve
 * innholdsdivene har klasser og ingen pointer-events.
 *
 * Vises uansett bare på domenealias (preview), aldri på www.prai.no. */
.cookie-oversikt-innhold div[style*="pointer-events"] {
  display: none !important;
}

/* ==========================================================================
   3. Kompakt førsteside — styres av samtykke.js
   ========================================================================== */

/* Skjuling til oppsettet er klart.
 *
 * Cookiebot bygger dialogen i flere omganger, så den rekker å tegnes med
 * standardutseendet — faner, kategorirad, tre knapper — før samtykke.js får
 * satt kompaktmodus. Det er blinket. Her holdes den usynlig til attributtet
 * data-prai-tilpass er satt, altså til oppsettet er ferdig.
 *
 * Regelen krever html.prai-js, som samtykke.js legger på med én gang. To
 * sikringer i det: laster ikke skriptet, finnes ikke klassen og banneret vises
 * som normalt — og skriptet fjerner selv klassen etter to sekunder om noe
 * skulle gå galt. Banneret kan altså ikke bli permanent usynlig. */
html.prai-js #CybotCookiebotDialog:not([data-prai-tilpass]) {
  visibility: hidden !important;
}

/* I kompaktmodus: tittel, tekst og [Tilpass] [Godta alle]. Fanerekka,
 * kategoripanelet og de øvrige knappene er skjult. Trykk på Tilpass fjerner
 * klassen, og alt kommer fram der det hører hjemme.
 *
 * Kjører ikke samtykke.js, settes klassen aldri, og banneret vises som
 * Cookiebot leverer det — full funksjonalitet, bare mindre pent. */
#CybotCookiebotDialog.prai-kompakt #CybotCookiebotDialogNav,
#CybotCookiebotDialog.prai-kompakt #CybotCookiebotDialogBodyLevelButtonsSelectPane,
#CybotCookiebotDialog.prai-kompakt #CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialog.prai-kompakt #CybotCookiebotDialogBodyButtonAcceptSelection,
#CybotCookiebotDialog.prai-kompakt #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll,
#CybotCookiebotDialog.prai-kompakt #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  display: none !important;
}

#CybotCookiebotDialog:not(.prai-kompakt) #prai-tilpass {
  display: none !important;
}

#prai-tilpass {
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  min-height: 38px !important;
  flex: 1 1 0 !important;
  background: transparent !important;
  border: 1px solid #14202B !important;
  color: #14202B !important;
  cursor: pointer !important;
}

#prai-tilpass:hover {
  background: rgba(20, 32, 43, 0.06) !important;
}

/* ==========================================================================
   4. Tekst og avstand
   ========================================================================== */

#CybotCookiebotDialogBodyContent,
#CybotCookiebotDialogBodyContentControls,
#CybotCookiebotDialogTabContent {
  padding: 8px 16px !important;
}

.CybotCookiebotDialogContentWrapper,
.CybotCookiebotScrollContainer,
#CybotCookiebotDialogBody {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#CybotCookiebotDialogFooter,
#CybotCookiebotDialogDetailFooter {
  padding: 0 16px 14px !important;
}

#CybotCookiebotDialogBodyContentTitle {
  color: #14202B !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 6px 0 4px !important;
}

#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialogDetailBodyContentTextAbout {
  color: #14202B !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Lenker i brødteksten — f.eks. «personvernerklæringen».
 *
 * Tidligere var regelen bundet til #...BodyContentText, men lenka ligger ikke
 * nødvendigvis der: Cookiebot legger brødteksten i ulike elementer avhengig av
 * fane og oppsett, og da slo fargen ikke inn.
 *
 * Nå gjelder den alle lenker i dialogen UNNTATT fanelenkene, som også er <a>.
 * Det var nettopp en for bred regel som gjorde fanene til understreket kobber
 * tidligere — unntaket er det som gjør den trygg. */
#CybotCookiebotDialog a:not(.CybotCookiebotDialogNavItemLink) {
  color: #14202B !important;
  text-decoration: underline !important;
}

#CybotCookiebotDialog a:not(.CybotCookiebotDialogNavItemLink):hover {
  color: #A9691F !important;
}

/* ==========================================================================
   5. Fanerekka
   ========================================================================== */

#CybotCookiebotDialogNav {
  border-bottom: 1px solid #E6E1D6 !important;
  padding: 0 8px !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.CybotCookiebotDialogNavItemLink {
  flex: 0 0 auto !important;
  width: auto !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #8A94A0 !important;
  text-decoration: none !important;
  padding: 11px 10px !important;
  border-bottom: 2px solid transparent !important;
}

.CybotCookiebotDialogNavItemLink:hover {
  color: #14202B !important;
  text-decoration: none !important;
}

.CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  border-bottom: 2px solid #C47D2B !important;
  color: #14202B !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   6. Knapper
   ========================================================================== */

/* Alle knapper har samme størrelse, plass og skrift. Kun fyllet skiller dem,
 * så «Godta alle» leser som primærhandlingen.
 *
 * Grensa som ikke krysses: «Avslå» skal ikke gjøres mindre, flyttes bort,
 * gråes ut eller gjemmes — den skal være like lett å velge. */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyButtonAcceptSelection,
#CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogBodyLevelButtonDecline {
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  min-height: 38px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, border-color 120ms ease !important;
}

/* Knapperaden fyller bredden likt. */
#CybotCookiebotDialogBodyButtonsWrapper,
#CybotCookiebotDialogBodyButtons,
.CybotCookiebotDialogBodyBottomWrapper {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

#CybotCookiebotDialogBodyButtonsWrapper > a,
#CybotCookiebotDialogBodyButtonsWrapper > button,
#CybotCookiebotDialogBodyButtons > a,
#CybotCookiebotDialogBodyButtons > button {
  flex: 1 1 0 !important;
  margin: 0 !important;
}

/* Godta alle — eneste fylte knapp */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogBodyLevelButtonAccept {
  background: #C47D2B !important;
  border-color: #C47D2B !important;
  color: #FFFFFF !important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover,
#CybotCookiebotDialogBodyButtonAccept:hover,
#CybotCookiebotDialogBodyLevelButtonAccept:hover {
  background: #A9691F !important;
  border-color: #A9691F !important;
}

/* Avslå og Tillat utvalg — nøytral kontur, samme mål som Godta alle */
#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll,
#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyLevelButtonDecline,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonAcceptSelection {
  background: transparent !important;
  border-color: #14202B !important;
  color: #14202B !important;
}

#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll:hover,
#CybotCookiebotDialogBodyButtonDecline:hover,
#CybotCookiebotDialogBodyLevelButtonDecline:hover,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
#CybotCookiebotDialogBodyButtonAcceptSelection:hover {
  background: rgba(20, 32, 43, 0.06) !important;
  border-color: #14202B !important;
}

/* ==========================================================================
   7. Kategorivalg
   ========================================================================== */

#CybotCookiebotDialogBodyLevelButtonsSelectPane {
  background: #F6F2EA !important;
  border: 1px solid #E6E1D6 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}

.CybotCookiebotDialogBodyLevelButtonWrapper {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Etiketten over hver bryter.
 * MERK: ingen overflow:hidden/text-overflow her — det var det som ga «Nødve…».
 * break-word (ikke «anywhere») bryter bare ord som faktisk ikke får plass, så
 * «Nødvendig» står helt mens «Markedsføring» kan deles. Sida er lang="nb", så
 * hyphens gir norsk orddeling. */
.CybotCookiebotDialogBodyLevelButtonLabel {
  color: #14202B !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px !important;
  padding-right: 6px !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

.CybotCookiebotDialogBodyLevelButtonDescription {
  color: #14202B !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* Skalering endrer ikke layout-boksen, så kolonnene forblir like brede. */
.CybotCookiebotDialogBodyLevelButtonSliderWrapper {
  transform: scale(0.7) !important;
  transform-origin: center center !important;
}

.CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #8A94A0 !important;
}

input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #C47D2B !important;
}

/* ==========================================================================
   8. Kategorilista under «Tilpass»
   ========================================================================== */

/* Strukturen, verifisert i DOM-en:
 *
 *   li.CookieCard
 *     ├ ...CookieContainerHeader   navn + bryter
 *     ├ ...CookieTypeIntro         beskrivelsen
 *     └ .CollapseCard              cookie-lista, får CybotCookiebotDialogHide
 *                                  når kortet er slått sammen
 *
 * Cookiebot slår bare sammen .CollapseCard, så beskrivelsen ble stående og
 * lista var like høy uansett. Beskrivelsen ligger FØR trekkspillet i DOM-en og
 * kan ikke velges bakover — derfor :has() på kortet. Uten :has()-støtte faller
 * det tilbake til Cookiebots egen oppførsel. */
li.CookieCard:has(.CollapseCard.CybotCookiebotDialogHide) .CybotCookiebotDialogDetailBodyContentCookieTypeIntro {
  display: none !important;
}

/* Cookie for cookie-lista tas ut av banneret. Kravet (EDPB) er at banneret
 * viser kategorier, formål og aktører og LENKER til full informasjon — ikke at
 * hver cookie ramses opp. Detaljlista bor i cookie-erklæringen på /personvern,
 * som Cookiebot genererer og holder oppdatert. */
li.CookieCard .CollapseCard {
  display: none !important;
}

/* ==========================================================================
   9. Tilgjengelighet
   ========================================================================== */

#CybotCookiebotDialog button:focus-visible,
#CybotCookiebotDialog a:focus-visible,
#CybotCookiebotDialog input:focus-visible {
  outline: 2px solid #C47D2B !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   10. Cookie-oversikten på /personvern
   ========================================================================== */

/* NB: #CookieDeclaration er SCRIPT-taggen — innholdet cd.js genererer får
 * class="CookieDeclaration" (verifisert i DOM-en). Klasse, ikke id. */
.CookieDeclaration {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #14202B !important;
  font-size: 14.5px !important;
}

.CookieDeclaration a {
  color: #A9691F !important;
}