/* sporing.css — samtykkebanner for psykologki.no
   ---------------------------------------------------------------------------
   Egen fil, ikke paahengt landing.css eller register.css: register.css deles
   med fysioki-edisjonen, og landing.css versjoneres med ?v= ved endring.
   Fargene speiler landing.css sine tokens, med literaler som fallback fordi
   registerki/ ikke laster landing.css og dermed ikke har variablene.

   z-index 200 legger banneret over .cta-fast (fast mobil-CTA nederst paa
   landingssiden), saa de ikke overlapper mens valget staar aapent.
   --------------------------------------------------------------------------- */

.ck-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: none;
    padding: 1rem 1.15rem calc(1rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--sen, #CBD3DF);
    box-shadow: 0 -8px 28px rgba(22, 35, 63, .12);
    font-size: .92rem;
    line-height: 1.5;
}

.ck-banner.vis { display: block; }

.ck-inner {
    max-width: var(--maks, 1120px);
    margin: 0 auto;
    display: flex;
    gap: 1.15rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ck-tekst {
    flex: 1 1 22rem;
    margin: 0;
    color: var(--aske, #55617A);
}

.ck-tekst strong { color: var(--marine, #16233F); }
.ck-tekst a      { color: var(--marine, #16233F); }

.ck-knapper {
    display: flex;
    gap: .6rem;
    flex: 0 0 auto;
}

.ck-knapper button {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: .62rem 1.15rem;
    border-radius: 9px;
    border: 1px solid var(--sen, #CBD3DF);
}

.ck-nei        { background: #fff; color: var(--marine, #16233F); }
.ck-nei:hover  { background: var(--mose, #E8ECF3); }
.ck-ja         { background: var(--marine, #16233F); color: #fff;
                 border-color: var(--marine, #16233F); }
.ck-ja:hover   { background: var(--marine-dyp, #0D1830); }

@media (max-width: 560px) {
    .ck-knapper { width: 100%; }
    .ck-knapper button { flex: 1; }
}