/* =====================================================================
   Karlsen Sykkel & Motor – stilark
   ---------------------------------------------------------------------
   Farger fra logoen: kull #15171c og signaloransje #ff6a00.
   Oransje er eneste aksent. Oransje flater har kull-tekst (kontrast 6,2:1),
   oransje tekst på lys bakgrunn bruker #b54400 (5,5:1).
   Skrift: Big Shoulders (overskrifter) og Work Sans (brødtekst), begge lokalt.
   ===================================================================== */
*{
	border-radius: 0!important;
}

/* ---------- Skrifttyper (SIL OFL, se assets/fonts) ---------- */
@font-face { font-family: 'Big Shoulders'; src: url('../fonts/bigshoulders-700.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url('../fonts/bigshoulders-400.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('../fonts/worksans-400.woff') format('woff'); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('../fonts/worksans-400-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('../fonts/worksans-700.woff') format('woff'); font-weight: 600 800; font-style: normal; font-display: swap; }

/* ---------- Designtokens ---------- */
:root {
    --km-kull: #15171c;
    --km-kull-2: #2a2d34;
    --km-oransje: #ff6a00;
    --km-oransje-trykk: #e85f00;
    --km-oransje-tekst: #b54400;
    --km-tint: #fff1e6;
    --km-flate: #f4f4f2;
    --km-linje: #e3e3df;
    --km-daempet: #5c606b;
    --km-gronn: #1b7a43;
    --km-rod: #b42318;
    --km-r-liten: 6px;
    --km-r: 12px;
    --km-overskrift: 'Big Shoulders', 'Arial Narrow', 'Roboto Condensed', sans-serif;
    --km-tekst: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Eldre navn som fortsatt brukes i maler og admin */
    --km-mork: var(--km-kull);
    --km-primar: var(--km-kull);
    --km-aksent: var(--km-oransje);
    --km-aksent-mork: var(--km-oransje-tekst);
    --km-sand: var(--km-flate);
    --km-blekk: var(--km-kull);
    --km-grå: var(--km-daempet);
    --km-radius: var(--km-r);

    /* Bootstrap */
    --bs-body-font-family: var(--km-tekst);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--km-kull);
    --bs-body-bg: var(--km-flate);
    --bs-secondary-color: var(--km-daempet);
    --bs-primary: #15171c;
    --bs-primary-rgb: 21, 23, 28;
    --bs-link-color: var(--km-oransje-tekst);
    --bs-link-color-rgb: 181, 68, 0;
    --bs-link-hover-color: #8a3400;
    --bs-link-hover-color-rgb: 138, 52, 0;
    --bs-border-color: var(--km-linje);
    --bs-border-radius: var(--km-r-liten);
    --bs-border-radius-lg: var(--km-r);
    --bs-focus-ring-color: rgba(255, 106, 0, .35);
    --bs-success: #1b7a43; --bs-success-rgb: 27, 122, 67;
    --bs-danger: #b42318;  --bs-danger-rgb: 180, 35, 24;
}

/* ---------- Grunnlag ---------- */
body { background: var(--km-flate); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--km-overskrift); font-weight: 700; letter-spacing: .005em; line-height: 1.05; text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); }
h2, .h2 { font-size: clamp(1.9rem, 3.2vw, 2.4rem); }
h3, .h3 { font-size: 1.6rem; }
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--km-tekst); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.h4 { font-size: 1.2rem; } .h5 { font-size: 1.05rem; }
p { text-wrap: pretty; }
a { text-underline-offset: .18em; }
::selection { background: var(--km-oransje); color: var(--km-kull); }
:focus-visible { outline: 3px solid var(--km-oransje); outline-offset: 2px; }
.text-success { color: var(--km-gronn) !important; }
.text-danger { color: var(--km-rod) !important; }
code { color: var(--km-oransje-tekst); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Knapper ---------- */
.btn { font-weight: 600; border-radius: var(--km-r-liten); }
.btn-lg { padding: .75rem 1.4rem; font-size: 1.05rem; }
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--km-kull); --bs-btn-border-color: var(--km-kull);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--km-kull-2); --bs-btn-hover-border-color: var(--km-kull-2);
    --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: var(--km-kull); --bs-btn-disabled-border-color: var(--km-kull);
}
.btn-outline-primary {
    --bs-btn-color: var(--km-kull); --bs-btn-border-color: #c9c9c4;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--km-kull); --bs-btn-hover-border-color: var(--km-kull);
    --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000; --bs-btn-active-color: #fff;
}
.btn-aksent, .btn-kake {
    --bs-btn-color: var(--km-kull); --bs-btn-bg: var(--km-oransje); --bs-btn-border-color: var(--km-oransje);
    --bs-btn-hover-color: var(--km-kull); --bs-btn-hover-bg: var(--km-oransje-trykk); --bs-btn-hover-border-color: var(--km-oransje-trykk);
    --bs-btn-active-color: var(--km-kull); --bs-btn-active-bg: #d15600; --bs-btn-active-border-color: #d15600;
    --bs-btn-disabled-color: var(--km-kull); --bs-btn-disabled-bg: var(--km-oransje); --bs-btn-disabled-border-color: var(--km-oransje);
}
.btn-lys {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.35);
    --bs-btn-hover-color: var(--km-kull); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
}
.btn-outline-secondary { --bs-btn-color: var(--km-kull); --bs-btn-border-color: #c9c9c4; --bs-btn-hover-bg: var(--km-kull); --bs-btn-hover-border-color: var(--km-kull); }
.btn-vipps {
    --bs-btn-color: #fff; --bs-btn-bg: #ff5b24; --bs-btn-border-color: #ff5b24;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d9471a; --bs-btn-hover-border-color: #d9471a;
}
.btn-stripe {
    --bs-btn-color: #fff; --bs-btn-bg: #635bff; --bs-btn-border-color: #635bff;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4b44d6; --bs-btn-hover-border-color: #4b44d6;
}
.btn-ikon {
    width: 42px; height: 42px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--km-kull);
}
.btn-ikon:hover, .btn-ikon:focus-visible { background: var(--km-flate); }

/* ---------- Skjema ---------- */
.form-control, .form-select { border-color: #cfcfca; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--km-oransje); box-shadow: 0 0 0 .2rem rgba(255, 106, 0, .22); }
.form-check-input:checked { background-color: var(--km-kull); border-color: var(--km-kull); }
.form-switch .form-check-input:checked { background-color: var(--km-oransje); border-color: var(--km-oransje); }
.form-label { font-weight: 600; font-size: .92rem; }

/* ---------- Statusmerker (dempede, meningsbærende farger) ---------- */
.badge { font-weight: 600; font-size: .78em; padding: .38em .62em; border-radius: 999px; letter-spacing: 0; }
.badge.text-bg-secondary { background: #ecece8 !important; color: #3f424a !important; }
.badge.text-bg-info      { background: #e9edf3 !important; color: #2c3e57 !important; }
.badge.text-bg-primary   { background: var(--km-kull) !important; color: #fff !important; }
.badge.text-bg-warning   { background: var(--km-tint) !important; color: #8a3400 !important; }
.badge.text-bg-success   { background: #e3f3e9 !important; color: #145c33 !important; }
.badge.text-bg-danger    { background: #fbe7e5 !important; color: #8f1c13 !important; }
.badge.text-bg-dark      { background: #dcdcd8 !important; color: #1f2127 !important; }
.badge.text-bg-light     { background: #fff !important; color: var(--km-kull) !important; }
.badge.bg-danger { background: var(--km-rod) !important; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .55rem; color: var(--km-kull); line-height: 1; text-decoration: none; }
.logo-svg { display: block; height: auto; max-width: 100%; }
.logo-mork { color: #fff; }
.logo-mork .logo-merke-g circle:first-child { fill: #2a2d34; }
.logo-slagord { font-size: .88rem; color: rgba(255,255,255,.7); }
.logo:not(.logo-mork) .logo-slagord { color: var(--km-daempet); }
.logo-tlf { color: var(--km-oransje) !important; font-family: var(--km-overskrift); font-weight: 700; font-size: 1.5rem; letter-spacing: .02em; text-decoration: none; }
.logo-tlf:hover { text-decoration: underline; }
a:hover > .logo .logo-merke-g, .logo:hover .logo-merke-g { transform: rotate(-20deg); }
.logo-merke-g { transform-origin: 32px 32px; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }

/* ---------- Toppstripe og navigasjon ---------- */
.toppstripe { background: var(--km-kull); color: rgba(255,255,255,.72); font-size: .82rem; }
.toppstripe .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 34px; }
.toppstripe a { color: #fff; text-decoration: none; font-weight: 600; }
.toppstripe a:hover { color: var(--km-oransje); }
.toppstripe i { color: var(--km-oransje); }

.hovednav { background: #fff; border-bottom: 1px solid var(--km-linje); padding-block: .6rem; }
.hovednav .navbar-brand { padding: 0; margin-right: 1.5rem; }
.hovednav .nav-link { font-weight: 500; color: var(--km-kull); padding-inline: .85rem !important; }
.hovednav .nav-link:hover { color: var(--km-oransje-tekst); }
.hovednav .nav-link.active { color: var(--km-kull); font-weight: 700; position: relative; }
@media (min-width: 992px) {
    .hovednav .nav-link.active::after { content: ''; position: absolute; left: .85rem; right: .85rem; bottom: -.72rem; height: 3px; background: var(--km-oransje); }
}
.kurv-merke { background: var(--km-oransje); color: var(--km-kull); }
.varsel-meny { width: 360px; max-width: 92vw; padding: 0; overflow: hidden; border-radius: var(--km-r); }
#varselListe { max-height: 380px; overflow-y: auto; }
.varsel-element { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--km-linje); color: inherit; text-decoration: none; }
.varsel-element:hover { background: var(--km-flate); }
.varsel-element.ulest { background: var(--km-tint); box-shadow: inset 3px 0 0 var(--km-oransje); }
.varsel-element .tittel { font-weight: 600; font-size: .92rem; }
.varsel-element .tid { font-size: .78rem; color: var(--km-daempet); }
.dropdown-menu { border-color: var(--km-linje); border-radius: var(--km-r); box-shadow: 0 12px 32px -12px rgba(21,23,28,.25); }

@media (max-width: 575.98px) {
    .toppstripe .container { justify-content: center; }
    .toppstripe a { display: none; }
    .hovednav .container { flex-wrap: nowrap; }
    .hovednav .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: .25rem 1rem .75rem; border-bottom: 1px solid var(--km-linje); }
    .hovednav .navbar-brand { margin-right: .25rem; }
    .hovednav .logo-svg { width: 150px; }
    .btn-ikon { width: 38px; height: 38px; }
    .navbar-toggler { padding: .25rem .4rem; }
}

/* ---------- Forside: hero ---------- */
.hero { background: var(--km-kull); color: #fff; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.hero-rutenett { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: clamp(3rem, 7vw, 5.4rem); line-height: .95; margin-bottom: 1.25rem; max-width: 12ch; }
.hero-ingress { font-size: 1.15rem; color: rgba(255,255,255,.78); max-width: 36rem; margin-bottom: 2rem; }
.hero-knapper { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-sporing { background: #fff; color: var(--km-kull); border-radius: var(--km-r); padding: 1.75rem; border-top: 4px solid var(--km-oransje); }
.hero-sporing h2 { font-size: 1.9rem; margin-bottom: .25rem; }
.hero-sporing > p { color: var(--km-daempet); font-size: .92rem; margin-bottom: 1.25rem; }
@media (max-width: 991.98px) { .hero-rutenett { grid-template-columns: 1fr; } }

/* ---------- Seksjoner ---------- */
.seksjon { padding: clamp(3rem, 6vw, 5rem) 0; }
.seksjon-hvit { background: #fff; border-block: 1px solid var(--km-linje); }
.seksjon-hode { max-width: 42rem; margin-bottom: 2rem; }
.seksjon-hode h2 { margin-bottom: .4rem; }
.seksjon-hode p { color: var(--km-daempet); margin: 0; }
.seksjon-hode-rad { max-width: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.lenke-pil { font-weight: 600; }

/* Prisliste (tjenester) */
.prisliste { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--km-linje); border-radius: var(--km-r); }
.prisliste li {
    display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 7.5rem 8.5rem auto; gap: 1rem; align-items: center;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--km-linje);
}
.prisliste li:last-child { border-bottom: 0; }
.prisliste-ikon { font-size: 1.35rem; color: var(--km-oransje-tekst); }
.prisliste h3 { font-family: var(--km-tekst); font-size: 1.05rem; font-weight: 700; margin: 0 0 .15rem; letter-spacing: 0; }
.prisliste p { margin: 0; color: var(--km-daempet); font-size: .92rem; }
.prisliste-tid { color: var(--km-daempet); font-size: .9rem; }
.prisliste-pris { font-family: var(--km-overskrift); font-weight: 700; font-size: 1.45rem; text-align: right; white-space: nowrap; }
@media (max-width: 767.98px) {
    .prisliste li { grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: "ikon tekst tekst" "ikon tid pris" "ikon knapp knapp"; row-gap: .5rem; }
    .prisliste-ikon { grid-area: ikon; align-self: start; } .prisliste-tekst { grid-area: tekst; }
    .prisliste-tid { grid-area: tid; } .prisliste-pris { grid-area: pris; }
    .prisliste .btn { grid-area: knapp; justify-self: start; }
}

/* Forløp (nummerert fordi det er en rekkefølge) */
.forlop { list-style: none; counter-reset: steg; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; }
.forlop li { counter-increment: steg; position: relative; padding-top: 3.25rem; }
.forlop li::before {
    content: counter(steg); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--km-oransje); color: var(--km-kull); font-family: var(--km-overskrift); font-weight: 700; font-size: 1.35rem;
    display: grid; place-items: center;
}
.forlop li:not(:last-child)::after { content: ''; position: absolute; top: 1.2rem; left: 3.2rem; right: -1.2rem; height: 2px; background: var(--km-linje); }
.forlop h3 { font-size: 1.6rem; margin-bottom: .35rem; }
.forlop p { color: var(--km-daempet); margin: 0; }
@media (max-width: 767.98px) {
    .forlop { grid-template-columns: 1fr; gap: 1.5rem; }
    .forlop li { padding: 0 0 0 3.5rem; }
    .forlop li:not(:last-child)::after { top: 2.6rem; bottom: -1.3rem; left: 1.15rem; right: auto; width: 2px; height: auto; }
}

.konto-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; border-top: 1px solid var(--km-linje); padding-top: 2.5rem; }
.konto-band h2 { margin-bottom: .3rem; }
.konto-band p { color: var(--km-daempet); margin: 0; }

/* ---------- Felles flater ---------- */
.kort-hvit { background: #fff; border: 1px solid var(--km-linje); border-radius: var(--km-r); }
.tjeneste-kort { height: 100%; transition: border-color .15s; }
a.tjeneste-kort:hover { border-color: var(--km-kull); }
.tjeneste-ikon { width: 44px; height: 44px; border-radius: 50%; background: var(--km-tint); color: var(--km-oransje-tekst); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }

.sidetopp { background: #fff; border-bottom: 1px solid var(--km-linje); padding: 2.5rem 0 2rem; }
.sidetopp h1 { margin-bottom: .3rem; }
.sidetopp p { color: var(--km-daempet); margin: 0; max-width: 42rem; }
.sidetopp .breadcrumb { margin-bottom: .5rem; font-size: .88rem; }

.tekstside { max-width: 70ch; }
.tekstside h2 { font-size: 1.8rem; margin-top: 2rem; }

/* Produktkort */
.produkt-kort { border-radius: var(--km-r); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: border-color .15s; }
.produkt-kort:hover { border-color: #bdbdb7; }
.produkt-kort .bilde { aspect-ratio: 4 / 3; background: #ececea; display: block; overflow: hidden; }
.produkt-kort .bilde img { width: 100%; height: 100%; object-fit: cover; }
.produkt-kort .pris { font-family: var(--km-overskrift); font-weight: 700; font-size: 1.45rem; line-height: 1; }
.produkt-kort .forpris { text-decoration: line-through; color: var(--km-daempet); font-size: .88rem; }
.tilbud-merke { position: absolute; top: .75rem; left: .75rem; background: var(--km-oransje); color: var(--km-kull); font-weight: 700; font-size: .78rem; padding: .2rem .55rem; border-radius: var(--km-r-liten); }

/* Tall (Min side, admin) */
.stat-kort { border-radius: var(--km-r); padding: 1.25rem; background: #fff; border: 1px solid var(--km-linje); height: 100%; }
.stat-kort .tall { font-family: var(--km-overskrift); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.stat-kort .etikett { color: var(--km-daempet); font-size: .88rem; }

/* Tabeller */
.tabell-kort { background: #fff; border-radius: var(--km-r); border: 1px solid var(--km-linje); overflow: hidden; }
.tabell-kort .table { margin: 0; }
.tabell-kort .table > :not(caption) > * > * { padding: .8rem 1rem; }
.tabell-kort thead th { background: #fafaf8; font-size: .82rem; color: var(--km-daempet); font-weight: 600; }
.table { --bs-table-border-color: var(--km-linje); }

/* ---------- Konto ---------- */
.konto-nav .list-group-item { border: 0; border-radius: var(--km-r-liten) !important; margin-bottom: 2px; font-weight: 500; background: transparent; }
.konto-nav .list-group-item:hover { background: #fff; }
.konto-nav .list-group-item.active { background: #fff; color: var(--km-kull); font-weight: 700; box-shadow: inset 3px 0 0 var(--km-oransje); }
.konto-nav .list-group-item i { width: 1.5rem; display: inline-block; color: var(--km-daempet); }
.auth-kort { max-width: 460px; margin: 3rem auto; }

/* ---------- Sporing ---------- */
.status-hode { border-radius: var(--km-r); overflow: hidden; }
.status-hode .topp { background: var(--km-kull); color: #fff; padding: 1.75rem; border-bottom: 3px solid var(--km-oransje); }
.status-hode .topp .text-white-50 { color: rgba(255,255,255,.7) !important; }
.status-referanse { font-family: var(--km-overskrift); font-size: 2.6rem; font-weight: 700; letter-spacing: .02em; line-height: 1; margin: .15rem 0 .3rem; }
.status-stor { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; background: var(--km-oransje); color: var(--km-kull); padding: .45rem .95rem; border-radius: 999px; }
.live-prikk { width: 8px; height: 8px; border-radius: 50%; background: var(--km-oransje); display: inline-block; animation: puls 2s infinite; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.fremdrift { display: flex; justify-content: space-between; position: relative; margin: 1.25rem 0 .25rem; }
.fremdrift::before { content: ''; position: absolute; top: 17px; left: 6%; right: 6%; height: 3px; background: var(--km-linje); }
.fremdrift .linje { position: absolute; top: 17px; left: 6%; height: 3px; background: var(--km-kull); transition: width .6s ease; }
.fremdrift .steg { position: relative; z-index: 1; flex: 1; text-align: center; font-size: .82rem; color: var(--km-daempet); }
.fremdrift .prikk {
    width: 37px; height: 37px; border-radius: 50%; margin: 0 auto .45rem; background: #fff; border: 2px solid var(--km-linje);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #9a9ca3;
}
.fremdrift .steg.ferdig .prikk { background: var(--km-kull); border-color: var(--km-kull); color: #fff; }
.fremdrift .steg.aktiv .prikk { background: var(--km-oransje); border-color: var(--km-oransje); color: var(--km-kull); }
.fremdrift .steg.aktiv, .fremdrift .steg.ferdig { color: var(--km-kull); font-weight: 600; }
@media (max-width: 575.98px) { .fremdrift .steg span.etikett { display: none; } .fremdrift .prikk { width: 32px; height: 32px; font-size: .88rem; } .fremdrift::before, .fremdrift .linje { top: 15px; } }

.tidslinje { list-style: none; padding: 0; margin: 0; position: relative; }
.tidslinje::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--km-linje); }
.tidslinje li { position: relative; padding-left: 46px; padding-bottom: 1.4rem; }
.tidslinje li:last-child { padding-bottom: 0; }
.tidslinje .ikon { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--km-linje); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--km-daempet); }
.tidslinje li:first-child .ikon { background: var(--km-kull); border-color: var(--km-kull); color: #fff; }
.tidslinje .tid { font-size: .8rem; color: var(--km-daempet); }

/* Prisoverslag */
.godkjenn-kort { overflow: hidden; border: 2px solid var(--km-oransje); }
.godkjenn-topp { display: flex; gap: 1rem; align-items: center; background: var(--km-oransje); color: var(--km-kull); padding: 1rem 1.5rem; }
.godkjenn-topp > i { font-size: 1.8rem; }
.godkjenn-topp h2 { font-size: 1.8rem; }
.tilbud-tekst { background: var(--km-flate); border-radius: var(--km-r-liten); padding: 1rem; }
.tilbud-pris { background: var(--km-kull); color: #fff; border-radius: var(--km-r); padding: 1.1rem 1.25rem; }
.tilbud-pris .text-body-secondary { color: rgba(255,255,255,.7) !important; }
.tilbud-pris .belop { font-family: var(--km-overskrift); font-weight: 700; font-size: 2.8rem; color: var(--km-oransje); line-height: 1.05; }

/* ---------- Kasse og betaling ---------- */
.betal-valg { cursor: pointer; border: 1px solid #cfcfca; border-radius: var(--km-r); padding: 1rem 1.1rem; display: flex; align-items: center; gap: .9rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.betal-valg:hover { border-color: var(--km-kull); }
.btn-check:checked + .betal-valg { border-color: var(--km-kull); box-shadow: inset 0 0 0 1px var(--km-kull); background: #fff; }
.btn-check:focus-visible + .betal-valg { outline: 3px solid var(--km-oransje); outline-offset: 2px; }
.vipps-logo { background: #ff5b24; color: #fff; font-weight: 700; border-radius: var(--km-r-liten); padding: .25rem .55rem; font-size: .9rem; }
.stripe-logo { background: #635bff; color: #fff; font-weight: 700; border-radius: var(--km-r-liten); padding: .25rem .55rem; font-size: .9rem; }
.kvantitet { max-width: 130px; }
.kvantitet input { text-align: center; }

/* ---------- Bunntekst ---------- */
.bunntekst { background: var(--km-kull); color: rgba(255,255,255,.72); padding-top: 3.5rem; margin-top: 4rem; font-size: .95rem; }
.bunn-rutenett { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.bunn-merke p { margin: 1rem 0 0; max-width: 34ch; }
.bunntekst h2 { font-family: var(--km-tekst); font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .8rem; letter-spacing: 0; }
.bunntekst ul { list-style: none; padding: 0; margin: 0; }
.bunntekst li { margin-bottom: .4rem; }
.bunntekst a { color: rgba(255,255,255,.85); text-decoration: none; }
.bunntekst a:hover { color: var(--km-oransje); text-decoration: underline; }
.bunntekst address { font-style: normal; line-height: 1.9; margin: 0; }
.apningstider { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .2rem 1.5rem; margin: 0; }
.apningstider dt { font-weight: 400; } .apningstider dd { margin: 0; color: #fff; }
.bunn-linje { border-top: 1px solid rgba(255,255,255,.12); padding: 1.25rem 0 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.bunn-lenker { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.betaling-ikoner { display: inline-flex; gap: .5rem; align-items: center; }
.betaling-ikoner > span:last-child { border: 1px solid rgba(255,255,255,.3); border-radius: var(--km-r-liten); padding: .15rem .5rem; color: #fff; }
@media (max-width: 991.98px) { .bunn-rutenett { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .bunn-rutenett { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Informasjonskapsler ---------- */
.kake-banner {
    position: fixed; z-index: 1080; left: 1rem; right: 1rem; bottom: 1rem; max-width: 760px; margin-inline: auto;
    background: #fff; color: var(--km-kull); border: 1px solid var(--km-linje); border-top: 4px solid var(--km-oransje);
    border-radius: var(--km-r); padding: 1.25rem 1.4rem; box-shadow: 0 18px 50px -12px rgba(21,23,28,.35);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center;
}
.kake-banner[hidden] { display: none; }
.kake-banner h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.kake-banner p { margin: 0; font-size: .92rem; color: var(--km-daempet); }
.kake-knapper { display: flex; flex-direction: column; gap: .45rem; min-width: 170px; }
.kake-tilpass { font-weight: 600; color: var(--km-kull); }
@media (max-width: 640px) {
    .kake-banner { grid-template-columns: 1fr; left: .5rem; right: .5rem; bottom: .5rem; padding: 1rem; }
    .kake-knapper { flex-direction: row; flex-wrap: wrap; }
    .kake-knapper .btn-kake { flex: 1 1 40%; }
}
.kake-valg { padding: .9rem 0; border-bottom: 1px solid var(--km-linje); }
.kake-valg:last-child { border-bottom: 0; }
.kake-tabell td:first-child { white-space: nowrap; }

/* ---------- Diverse ---------- */
.toast { border-radius: var(--km-r); border-color: var(--km-linje); }
.alert { border-radius: var(--km-r); }
.modal-content { border-radius: var(--km-r); border: 0; }
.modal-title { font-family: var(--km-overskrift); font-size: 1.7rem !important; }
.pagination { --bs-pagination-active-bg: var(--km-kull); --bs-pagination-active-border-color: var(--km-kull); --bs-pagination-color: var(--km-kull); }
.ikon-aksent { color: var(--km-oransje-tekst); }