/* ===== BEGIN: PROJECT kulturella-match-engine ===== */

/* KME CSS-variabler */
.kme-wrapper {
    --km-bg:            #0f0f0f;
    --km-surface:       #1a1a1a;
    --km-accent:        #e0ff56;
    --km-cal-accent:    #e0ff56;
    --km-pink:          #ff96d6;
    --kme-radius-pill:  999px;
    --kme-radius-card:  16px;
    --kme-radius-sm:    8px;
    --kme-blur:         blur(12px);
    --kme-transition:   all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --kme-glow-accent:  0 0 16px rgba(224,255,86,0.25);
    --kme-glow-pink:    0 0 16px rgba(255,150,214,0.25);
    --kme-glass-bg:     rgba(255,255,255,0.03);
    --kme-glass-border: rgba(255,255,255,0.08);
    color-scheme: dark;
}

/* ---- Animasjoner ---- */
@keyframes kme-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes kme-pulse-glow {
    0%, 100% { box-shadow: var(--kme-glow-accent); }
    50%       { box-shadow: 0 0 28px rgba(224,255,86,0.45); }
}
.kme-animate-in { animation: kme-fade-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.kme-pulse      { animation: kme-pulse-glow 2s ease-in-out infinite; }

/* ---- Glasskort ---- */
.kme-glass-card {
    background: var(--kme-glass-bg);
    backdrop-filter: var(--kme-blur);
    -webkit-backdrop-filter: var(--kme-blur);
    border: 1px solid var(--kme-glass-border);
    border-radius: var(--kme-radius-card);
    padding: 1.5rem;
    transition: var(--kme-transition);
    text-decoration: none;
    display: block;
    color: inherit;
    position: relative;
}
.kme-glass-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    text-decoration: none;
    color: inherit;
}

/* ---- Grid ---- */
.kme-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .kme-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .kme-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .kme-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Seksjonstekst ---- */
.kme-section-title {
    color: var(--km-accent);
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* ---- Pill-knapper (pending-liste og generelt) ---- */
.kme-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.15);
    padding: 0.45rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
    transition: opacity .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
.kme-btn-pill:hover { opacity: .85; }
.kme-btn-sm { padding: 0.35rem 0.9rem; font-size: 0.78rem; }

/* ---- Profil-core: statistikkgrid med bokser ---- */
.kme-profil-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    margin: .25rem 0 .25rem;
    width: 100%;
}
@media (max-width: 480px) {
    .kme-profil-stats { grid-template-columns: repeat(2, 1fr); }
}
.kme-profil-stat {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: .65rem .4rem;
    text-align: center;
    cursor: default;
    transition: background .15s;
    min-width: 0;
}
.kme-profil-stat:hover { background: rgba(255,255,255,0.08); }
.kme-profil-stat__icon {
    font-size: .95rem;
    line-height: 1;
    margin-bottom: .22rem;
    display: block;
}
.kme-profil-stat__val {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .22rem;
    word-break: break-all;
}
.kme-profil-stat__lbl {
    font-size: .62rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.25;
    word-break: break-word;
}



/* ---- Pille-knapper ---- */
.kme-pill {
    border-radius: var(--kme-radius-pill);
    padding: 0.5rem 1.25rem;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--kme-transition);
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.kme-pill:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--km-accent);
    box-shadow: 0 0 12px rgba(224,255,86,0.15);
}
.kme-pill.active {
    background: var(--km-cal-accent);
    color: #0f0f0f;
    border-color: transparent;
    font-weight: 700;
}

/* ---- Filter-rad ---- */
.kme-filter-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}
.kme-filter-row::-webkit-scrollbar { display: none; }

/* ---- Toggle-switcher ---- */
.kme-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.kme-switch input { opacity: 0; width: 0; height: 0; }
.kme-switch-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.12);
    cursor: pointer;
    transition: all 0.25s ease;
}
.kme-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 2px; top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transition: all 0.25s ease;
}
.kme-switch input:checked + .kme-switch-slider {
    background: var(--km-cal-accent);
    border-color: var(--km-cal-accent);
    box-shadow: 0 0 16px rgba(224,255,86,0.3);
}
.kme-switch input:checked + .kme-switch-slider::before {
    transform: translateX(20px) translateY(-50%);
    background: #0f0f0f;
}

/* ---- Range-slider ---- */
.kme-range {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, var(--km-cal-accent) var(--val, 50%), rgba(255,255,255,0.1) var(--val, 50%));
    border-radius: 999px;
    outline: none;
}
.kme-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    background: #0f0f0f;
    border: 2px solid var(--km-cal-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(224,255,86,0.4);
    transition: box-shadow 0.2s ease;
}
.kme-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 18px rgba(224,255,86,0.6);
}

/* ---- Gradient-badge ---- */
.kme-badge-gradient {
    background: linear-gradient(135deg, rgba(224,255,86,0.15), rgba(255,150,214,0.15));
    border: 1px solid rgba(224,255,86,0.2);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--km-cal-accent);
    display: inline-block;
}

/* ---- Score-ring ---- */
.kme-score-ring {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: conic-gradient(var(--km-cal-accent) calc(var(--score) * 1%), rgba(255,255,255,0.08) 0);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; color: #0f0f0f;
    flex-shrink: 0;
}

/* ---- Wizard modal overlay ---- */
#kme-wizard-root {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
/* Modul-spesifikke aksentfarger */
.kme-wizard-modal.kme-wizard-event {
    --km-accent: #e0ff56;
    --kme-glow-accent: 0 0 16px rgba(224,255,86,0.3);
    border-color: rgba(224,255,86,0.15);
}
.kme-wizard-modal.kme-wizard-activity {
    --km-accent: #52bece;
    --kme-glow-accent: 0 0 16px rgba(82,190,206,0.3);
    border-color: rgba(82,190,206,0.15);
}
.kme-wizard-modal.kme-wizard-marketplace {
    --km-accent: #ff96d6;
    --kme-glow-accent: 0 0 16px rgba(255,150,214,0.3);
    border-color: rgba(255,150,214,0.15);
}

.kme-wizard-modal {
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    animation: kme-fade-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.kme-wizard-title {
    color: var(--km-accent);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
}
.kme-wizard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.5rem;
    border-radius: var(--kme-radius-pill);
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--kme-transition);
    margin: 0.25rem;
}
.kme-wizard-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--km-accent);
}
.kme-wizard-btn.primary {
    background: var(--km-accent);
    color: #0f0f0f;
    border-color: transparent;
    font-weight: 700;
}
.kme-wizard-btn.primary:hover {
    box-shadow: var(--kme-glow-accent);
}
.kme-wizard-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.kme-wizard-stars { display: flex; gap: 0.5rem; margin: 1rem 0; }
.kme-wizard-star {
    font-size: 1.5rem;
    cursor: pointer;
    color: rgba(255,255,255,0.2);
    transition: color 0.15s ease;
}
.kme-wizard-star.active,
.kme-wizard-star:hover { color: var(--km-accent); }
.kme-wizard-textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.75rem;
    color: #fff;
    font-size: 0.9rem;
    resize: vertical;
    margin-top: 0.5rem;
    box-sizing: border-box;
}
/* Wizard entity-kort (rik kontekst øverst i wizard) */
.kme-wizard-entity-card {
    display: block;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease;
}
a.kme-wizard-entity-card:hover {
    border-color: color-mix(in srgb, var(--km-accent) 40%, transparent);
    text-decoration: none;
    color: inherit;
}
.kme-wizard-entity-title {
    font-weight: 700;
    color: var(--km-accent);
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    line-height: 1.3;
}
.kme-wizard-entity-meta {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* Entity card: placed below the question title, so reduce top gap */
.kme-wizard-title + .kme-wizard-entity-card {
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
}
.kme-wizard-entity-detail {
    font-style: italic;
    opacity: 0.8;
}

/* Coverage multi-select buttons */
.kme-wizard-coverage { flex-wrap: wrap; }
.kme-coverage-btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 120px;
}
.kme-coverage-btn.active {
    background: rgba(82,190,206,0.18);
    border-color: #52bece;
    color: #52bece;
    font-weight: 700;
}

.kme-wizard-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    color: #fff;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    box-sizing: border-box;
}

/* ── Tab-navigator ─────────────────────────────────────────────────────── */
.kme-tab-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: wrap;
}
.kme-tab-nav::-webkit-scrollbar { display: none; }
.kme-tab-btn {
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.kme-tab-btn:hover {
    background: rgba(255,255,255,0.10);
    border-color: var(--tab-color, #fff);
    color: #fff;
    text-decoration: none;
}
.kme-tab-btn.active {
    background: var(--tab-color, #fff);
    color: #0f0f0f !important;
    border-color: transparent;
    font-weight: 700;
}

/* ── Match-card (brukere) ──────────────────────────────────────────────── */
.kme-match-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}
.kme-match-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,150,214,0.3);
    flex-shrink: 0;
}
.kme-match-meta { flex: 1; min-width: 0; }
.kme-match-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.975rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kme-match-type {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.15rem;
}

/* Score ring — per-modul farger */
.kme-score-ring--person {
    background: radial-gradient(circle, #1a1a1a 52%, transparent 53%),
                conic-gradient(#ff96d6 calc(var(--score) * 1%), rgba(255,255,255,0.08) 0);
    color: #ff96d6;
}
.kme-score-ring--event {
    background: radial-gradient(circle, #1a1a1a 52%, transparent 53%),
                conic-gradient(#e0ff56 calc(var(--score) * 1%), rgba(255,255,255,0.08) 0);
    color: #e0ff56;
}
.kme-score-ring--activity {
    background: radial-gradient(circle, #1a1a1a 52%, transparent 53%),
                conic-gradient(#52bece calc(var(--score) * 1%), rgba(255,255,255,0.08) 0);
    color: #52bece;
}

/* ── Felles kulturfelt-pills ───────────────────────────────────────────── */
.kme-shared-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.kme-shared-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}
.kme-shared-pill {
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    background: rgba(255,150,214,0.12);
    border: 1px solid rgba(255,150,214,0.3);
    color: #ff96d6;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Animerte match-bars ───────────────────────────────────────────────── */
.kme-bars-section { display: flex; flex-direction: column; gap: 0.5rem; }
.kme-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 36px;
    align-items: center;
    gap: 0.5rem;
}
.kme-bar-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kme-bar-track {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.kme-bar-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
    animation: kme-bar-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1) var(--bar-delay, 0s) forwards;
}
.kme-bar-fill--person   { background: linear-gradient(to right, rgba(255,150,214,0.6), #ff96d6); }
.kme-bar-fill--event    { background: linear-gradient(to right, rgba(224,255,86,0.5),  #e0ff56); }
.kme-bar-fill--activity { background: linear-gradient(to right, rgba(82,190,206,0.5),  #52bece); }
@keyframes kme-bar-grow {
    from { width: 0; }
    to   { width: var(--bar-pct, 0%); }
}
.kme-bar-pct {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-align: right;
}
.kme-bars-section--person   .kme-bar-pct { color: #ff96d6; }
.kme-bars-section--event    .kme-bar-pct { color: #e0ff56; }
.kme-bars-section--activity .kme-bar-pct { color: #52bece; }

/* ── Event / Aktivitet-kort ────────────────────────────────────────────── */
.kme-card-thumb {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    margin: -1.5rem -1.5rem 1rem;
    height: 140px;
}
.kme-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.kme-glass-card:hover .kme-card-thumb img { transform: scale(1.04); }
.kme-card-body { display: flex; flex-direction: column; gap: 0.4rem; }
.kme-card-title {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.35;
}
.kme-card-excerpt {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}
.kme-card-meta {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    margin-top: 0.25rem;
}

/* Module badge */
.kme-module-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.18rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    border: 1px solid transparent;
}
.kme-module-badge--event {
    background: rgba(224,255,86,0.1);
    border-color: rgba(224,255,86,0.25);
    color: #e0ff56;
}
/* PROJECT: kulturella-community */
.kme-module-badge--community {
    background: rgba(167,139,250,0.1);
    border-color: rgba(167,139,250,0.25);
    color: #a78bfa;
}
.kme-module-badge--activity {
    background: rgba(82,190,206,0.1);
    border-color: rgba(82,190,206,0.25);
    color: #52bece;
}

/* ── Event/activity card color accents ────────────────────────────────── */
.kme-event-card    { border-color: rgba(224,255,86,0.12); }
.kme-event-card:hover { border-color: rgba(224,255,86,0.3); box-shadow: 0 8px 32px rgba(224,255,86,0.06); }
.kme-activity-card { border-color: rgba(82,190,206,0.12); }
.kme-activity-card:hover { border-color: rgba(82,190,206,0.3); box-shadow: 0 8px 32px rgba(82,190,206,0.06); }

/* ── Responsive ────────────────────────────────────────────────────────── */
/* ── Mobil: enkeltkolonne grid, lik kortdesign ────────────────────────────── */
@media (max-width: 639px) {
    .kme-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    /* Grid: én kolonne, konsekvent avstand */
    .kme-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0 0.75rem;
        align-items: start; /* ikke stretch i én kolonne — unngår kunstig strekking */
    }

    /* Alle grid-celler fyller full bredde */
    .kme-grid-card-wrap {
        width: 100%;
        min-width: 0;
    }

    /* Alle korttyper — lik design */
    .kme-grid .kme-glass-card,
    .kme-grid .kme-person-card {
        width: 100%;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.1);
        overflow: hidden;
    }
    .kme-grid .kme-glass-card:hover,
    .kme-grid .kme-person-card:hover {
        transform: none;
        box-shadow: none;
    }
    .kme-glass-card {
        padding: 1rem;
    }

    /* Person-kort hero: fyller full kortbredde */
    .kme-person-card__hero {
        width: 100%;
        height: 200px;
        position: relative;
        overflow: hidden;
    }
    .kme-person-card__hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }
    .kme-person-card__gradient {
        position: absolute;
        inset: 0;
        display: block;
        background: linear-gradient(
            to bottom,
            transparent 30%,
            rgba(10,4,26,0.55) 60%,
            rgba(10,4,26,0.92) 100%
        );
    }

    /* Thumbnail i event/aktivitet-kort */
    .kme-card-thumb { height: 110px; }

    /* Bar-rad smalere label */
    .kme-bar-row { grid-template-columns: 80px 1fr 30px; }

    /* Tab-navigasjon */
    .kme-tab-nav {
        padding: 0 0.75rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .kme-tab-nav::-webkit-scrollbar { display: none; }

    .kme-section-title {
        padding: 0 0.75rem;
    }
}

/* ── Topppar-widget ───────────────────────────────────────────────────────── */
.kme-top-pairs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.kme-pair-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
}
.kme-pair-avatars {
    display: flex;
    margin-right: 0.25rem;
}
.kme-pair-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1a1a1a;
    margin-right: -8px;
}
.kme-pair-info { flex: 1; min-width: 0; }
.kme-pair-names {
    font-weight: 600;
    font-size: 0.88rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kme-pair-score {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.15rem;
}
.kme-pair-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,150,214,0.15);
    color: #ff96d6;
    flex-shrink: 0;
}

/* ── Instagram Reels swipe feed ─────────────────────────────────────────── */

/* Feed wrapper — phone-width centered by default (tablet and up), widened further at the
   1024px desktop breakpoint below, full-screen edge-to-edge below 768px (mobile). */
.kme-swipe-feed {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: min(88svh, 700px);
    margin: 0 auto;
    overflow: hidden;
    /* Prevent text selection during drag */
    user-select: none;
    -webkit-user-select: none;
    /* JS now drives both drag axes itself (horizontal dismiss/save, vertical category
       switch) — touch-action must not leave either axis for the browser to pan natively,
       or it can commit to native panning before JS's preventDefault() has a chance to run. */
    touch-action: none;
}

/* ── Desktop/PC: true edge-to-edge card, narrow content column, small sharp image over a
   blurred backdrop ──────────────────────────────────────────────────────────────────────
   Below this, the feed is a small phone-shaped box floating in empty space on a wide screen —
   same interaction/visual language (background image, bottom text overlay, same gestures),
   just sized to use the screen instead of ignoring it. Reuses 1024px since that's already this
   file's desktop breakpoint (see .kme-grid above). Uses the same viewport-breakout technique as
   the existing mobile full-screen block further down (left/right:50% + negative margins), since
   a plain width:100% would still be capped by the WPBakery column's own contained width.
   Only two things go truly full-bleed: the background image and the edge-hugging prev/next
   arrows (.kme-reel-nav, unchanged — no rule needed here, it's already positioned relative to
   the feed's own edges). Everything else that's text or a button — the info column, the save
   button, and the bottom tab row — is capped to the same centered ~480px content column, so
   none of it stretches edge-to-edge on a wide screen. The sharp foreground image (.kme-reel-fg)
   is shown at a modest, deliberately-not-fullscreen size — marketplace/profile photos aren't
   shot at desktop-hero resolution, so stretching one edge-to-edge via background-size:cover
   looks soft/pixelated; .kme-reel-bg instead becomes a blurred, darkened backdrop filling the
   full card (an ambient backdrop is expected to be soft — a sharp photo isn't), with the real
   image shown crisp and modestly-sized on top of it. */
/* Selectors below are scoped under .kme-swipe-feed on purpose: this block sits EARLIER in the
   file than the base .kme-reel-* rules it overrides, and an @media query adds no specificity of
   its own, so a bare .kme-reel-info here would simply lose the source-order tiebreak against the
   base .kme-reel-info further down. (Several older overrides in this block do lose exactly that
   way today — .kme-swipe-card's border-radius, .kme-reel-gradient — left as they are rather than
   changing desktop visuals nobody asked about.) */
@media (min-width: 1024px) {
    .kme-swipe-feed {
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        max-width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        height: 100svh;
    }
    .kme-swipe-card {
        border-radius: 0;
    }
    .kme-swipe-feed .kme-reel-tabs {
        /* position:absolute with left:0;right:0 in its base rule. A definite width (not
           width:100%/auto) is required for the standard "left:0;right:0 + margin:auto"
           absolute-centering trick to actually center rather than anchor left — width:100% here
           fills the entire left/right span with nothing left over for auto margins to
           distribute, so max-width's clamp-down happens after centering was already resolved to
           0, leaving the box pinned to the left edge instead of centered (confirmed live).
           640px, not the original 480px — "litt bredere" (a bit wider) per live feedback. If
           this width changes again, update .kme-reel-save-btn's calc() below too (half-width). */
        width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ── Image + text as a real flex column, bounded top and bottom ──────────────────────
       Replaces a pair of absolutely-positioned blocks anchored to a top:36% + imageheight/2
       formula. That formula could only ever be tuned to fit "most" window heights: the info
       block sizes to its own content, so on a shorter PC window — or a card with a long title
       and a full three-line bio — the CTA row kept growing downward until it disappeared under
       the tab bar. Reported live twice now, most recently as "søk nå og mer info knappen skjules
       bak menyen". Padding the column by the two things that can actually cover it, and letting
       the IMAGE (never the text) absorb whatever height is left over, turns that clearance into
       a layout guarantee instead of a tuned constant.
       Both insets are measured live by swipe.js (measureLayoutInsets) — the site menu's height
       depends on the theme's settings and on whether the WP admin bar is showing — with the
       fallbacks here used only if that hasn't run yet.
       .kme-reel-inner is already display:flex;flex-direction:column in its base rule, so only
       alignment and padding are new. Everything else inside it (.kme-reel-bg, the gradient
       overlay, the save button) is absolutely positioned and so isn't a flex item at all. */
    .kme-swipe-feed .kme-reel-inner {
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        /* Top: the site's sticky menu, then this feed's own search pill (top:64px, 44px tall,
           itself offset by the same inset below) plus a small gap. Bottom: the category tab bar,
           plus breathing room. */
        padding: calc(var(--kme-top-inset, 0px) + 116px) 0 calc(var(--kme-tabs-h, 80px) + 20px);
    }
    .kme-swipe-feed .kme-reel-info {
        /* An in-flow flex item now. The base rule is position:absolute;bottom:0;left:0;right:0 —
           all four have to be unset, or those offsets keep applying to the relative box. */
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: 640px;
        max-width: 100%;
        /* flex-shrink:0 — text is the content; the image is what gives way on a short window. */
        flex: 0 0 auto;
        /* The base rule's 5rem is manual clearance for a tab bar this used to sit behind; the
           column's own bottom padding does that job properly now. */
        padding-bottom: 0;
    }
    .kme-swipe-feed .kme-reel-ctas {
        /* Extra room between the text content (title/bio/meta/tags) and the CTA row. */
        margin-top: 1.25rem;
    }
    /* Card/feed chrome parked at the top, pushed clear of the site's sticky menu. Desktop-only
       for the same reason the inset itself is: on mobile that menu auto-hides on scroll
       (Uncode's own menu_hide_mobile setting), so there's nothing to clear there. */
    .kme-swipe-feed .kme-reel-save-btn,
    .kme-swipe-feed .kme-reel-totop-btn,
    .kme-swipe-feed .kme-reel-category-pill {
        top: calc(var(--kme-top-inset, 0px) + 14px);
    }
    .kme-swipe-feed .kme-reel-search-form {
        top: calc(var(--kme-top-inset, 0px) + 64px);
    }
    .kme-swipe-feed .kme-reel-save-btn {
        /* Aligned to the left edge of the centered content column (half of the 640px width the
           info block and tab row share = 320px) instead of the raw viewport edge, so it reads as
           part of that same limited-width content, not full-bleed chrome. */
        left: calc(50% - 320px + 14px);
    }
    /* Dark2 (#141618) + the two same brand colors the /start/ header's animated background
       uses (kulturpunktet #ff66c4, cerulean #0cb4ce), softly floating — replaces the blurred
       copy of the item's own photo that used to fill this space. The item's own sharp photo
       still shows via .kme-reel-fg below; this is now purely decorative backdrop around it. */
    .kme-reel-bg {
        background-image: none !important;
        background-color: #141618;
        overflow: hidden;
    }
    .kme-reel-bg::before,
    .kme-reel-bg::after {
        content: '';
        position: absolute;
        width: 130%;
        height: 130%;
        border-radius: 50%;
        filter: blur(70px);
        opacity: 0.5;
        animation: kme-reel-bg-float 16s ease-in-out infinite;
    }
    .kme-reel-bg::before {
        background: #ff66c4;
        top: -35%;
        left: -35%;
    }
    .kme-reel-bg::after {
        background: #0cb4ce;
        bottom: -35%;
        right: -35%;
        animation-delay: -8s;
    }
    /* The base rule's gradient (near-opaque black by 80-100%) was tuned to darken a bright
       blurred photo for text legibility — against dark2 + soft floating color it would instead
       just hide the floating color entirely where it's meant to show. Lightened, not removed —
       still gives the text a little separation from the backdrop. */
    .kme-reel-gradient {
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 40%,
            rgba(0,0,0,0.35) 70%,
            rgba(0,0,0,0.55) 100%
        );
    }
    .kme-swipe-feed .kme-reel-fg {
        display: block;
        /* In-flow flex item like .kme-reel-info above (was absolute + top:36% + translate). */
        position: relative;
        /* flex-shrink:1 with no floor — this is the release valve that makes the CTA row's
           clearance a guarantee: whenever the text plus this image won't both fit between the
           menu and the tab bar, the image is what shrinks, never the text. */
        flex: 0 1 auto;
        min-height: 0;
        /* Smaller than the previous min(30vw, 420px), per live feedback — at 420px the image
           alone pushed the text far enough down that the CTA row met the tab bar. The svh term
           is what stops that returning on a short window: the square scales with the height it
           actually has. aspect-ratio rather than a matching width/height pair keeps it square
           through both that scaling and the flex-shrink above. */
        height: min(300px, 26svh, 20vw);
        width: auto;
        aspect-ratio: 1;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(0,0,0,0.55);
        /* Above .kme-reel-gradient (1) — the darkening overlay is for the blurred backdrop and
           for text legibility at the bottom, not meant to dim the crisp featured image too. */
        z-index: 2;
    }
}

/* Short desktop windows (a 1366x768 laptop leaves roughly 650px of viewport once browser chrome
   is subtracted, and the site menu eats another ~90 of that). The flex column above already
   guarantees the CTA row stays above the tab bar there by shrinking the image — these two steps
   just keep that from being reached by squeezing the photo down to a sliver, by giving the
   column less to fit in the first place. Under 720px tall the photo goes entirely: at that point
   it would be a thumbnail contributing nothing, and the text and its buttons are what have to
   stay reachable. */
@media (min-width: 1024px) and (max-height: 860px) {
    .kme-swipe-feed .kme-reel-bio   { -webkit-line-clamp: 2; }
    .kme-swipe-feed .kme-reel-inner { gap: 0.85rem; }
    .kme-swipe-feed .kme-reel-ctas  { margin-top: 0.9rem; }
}
@media (min-width: 1024px) and (max-height: 720px) {
    .kme-swipe-feed .kme-reel-fg { display: none; }
}

/* Bounding box for the track. NOTE: this markup nests two elements sharing this class
   (the shortcode's own wrapper, and each render_*_recommendations() method's own output) —
   see class-shortcodes.php. A plain CSS selector can't reliably target only the inner one
   that actually holds the cards, so the flex/transform styling for the real track is set
   as inline styles by JS (which finds it via a card's parentElement) rather than here. */
.kme-swipe-stack {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
}

/* Individual card — full-bleed Reels style, laid out as a horizontal flex/track item */
.kme-swipe-card {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
    cursor: grab;
    user-select: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.kme-swipe-card:active { cursor: grabbing; }

/* Drag hints — category switch only (horizontal axis now); vertical swipe is plain browsing */
.kme-swipe-card__hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    border: 3px solid;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
    z-index: 30;
    text-transform: uppercase;
    white-space: nowrap;
    /* Neutral, not tied to any one category's color — the destination category shown in this
       hint changes every drag, so no single tab color would be correct here. Dark glass, not a
       light tint — same legibility reasoning as .kme-reel-badge-pill etc. above (a light
       background reads as nearly invisible over a bright/light source photo). */
    color: #fff;
    border-color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.55);
}
/* "Next" hint sits on the RIGHT (matches .kme-reel-nav--next and the tab row's own
   left-to-right order), "prev" on the LEFT — independent of which way the current drag
   happens to be going (that was tried before and read as "wrong side, wrong pointer" live).
   3rem, not a smaller inset, clears .kme-reel-nav's edge-hugging ellipse on the same side. */
.kme-swipe-card__hint--tab-next { right: 3rem; }
.kme-swipe-card__hint--tab-prev { left: 3rem; }
.kme-swipe-card--hint-tab-next .kme-swipe-card__hint--tab-next { opacity: 1; }
.kme-swipe-card--hint-tab-prev .kme-swipe-card__hint--tab-prev { opacity: 1; }

/* ── Save button — per card, top-left ────────────────────────────────────────────────── */
.kme-reel-save-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 50; /* above .kme-reel-nav (42, now feed-level) — nav's bulge is thin but nonzero this near the top */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.5);
    border: 1.5px solid rgba(255,255,255,0.25);
    /* !important — same host-theme-leak risk as .kme-reel-title etc. (see its comment). */
    color: #fff !important;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* A dark shadow keeps white legible regardless of how light the underlying card image is,
       on top of the already-dark background tint. */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.kme-reel-save-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.kme-reel-save-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.04); }
.kme-reel-save-btn--saved {
    background: rgba(224,255,86,0.18);
    border-color: #e0ff56;
    color: #e0ff56;
}

/* ── Category pill — top-center, floats OVER the image, FEED-level ────────────────────────
   Generic "which of the 4 categories is this" label (Brukermatch/Aktiviteter/Kulturmidler/
   Tjenester) — same text for every card in a category, purely classification. Rendered once at
   feed level (like .kme-reel-nav below), not per-card — every card in a category shows the
   identical text, so a per-card version just meant it slid up/down with the card on every
   vertical browse swipe; text is updated on tab switch by swipe.js instead. Distinct from
   .kme-reel-badge/.kme-reel-score-pill (the specific per-card detail — real event_type terms,
   match%, etc.), which live UNDER the image instead, inside .kme-reel-info. Dark glass, same
   family as .kme-reel-save-btn/.kme-reel-totop-btn — NOT a light/white-tinted glass: this pill
   floats over whatever photo the card happens to have, and a light background reads as nearly
   invisible against a bright/light source image (confirmed live on a lime-green and a
   near-white card). A consistently dark backdrop keeps the white text legible regardless of the
   underlying image's own brightness. */
.kme-reel-category-pill {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 45; /* below save/search/totop (50), above .kme-reel-nav (42) */
    display: inline-flex !important;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: 999px !important;
    white-space: nowrap;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    color: #fff !important;
}

/* ── Match% pill — per-card (brukere-swipe only), first child of .kme-reel-info ───────────
   Pink→blue gradient using this plugin's own real brand colors (brukere's own tab pink,
   aktiviteter's own tab blue) rather than a freehand gradient, per house convention. Normal
   in-flow element (not absolutely positioned) — .kme-reel-info itself sits right below the
   featured image on desktop (its own top:calc(...) rule further down), so this pill being its
   first child reads as "under the picture," not overlaid on top of it. */
.kme-reel-score-pill {
    display: inline-flex !important;
    align-items: center;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, #ff96d6 0%, #52bece 100%) !important;
    border: none !important;
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px !important;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    cursor: default;
    white-space: nowrap;
    position: relative; /* anchors the tooltip below */
}
.kme-reel-score-pill::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 200px;
    text-align: center;
    white-space: normal;
    background: rgba(20,10,40,0.97);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e8e0ff;
    font-size: 0.7rem;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s, transform 0.18s;
    transform: translateY(-4px);
    z-index: 60;
}
.kme-reel-score-pill:hover::after,
.kme-reel-score-pill--active::after {
    opacity: 1;
    transform: translateY(0);
}

/* ── Back-to-top — feed-level, top-right (mirrors the save button's top-left) ────────────
   Replaces the old "Fortsett" tab-row pill: releases the scroll-lock and goes back to the
   page top instead of continuing past the module. Dark glass like the save button, plus a
   pulsing glow "overlay" and a nudging arrow so it reads as a persistent, always-available
   escape hatch rather than a one-off tap target — same "always-on, not hover-only" affordance
   language as .kme-reel-nav's chevron nudge elsewhere in this file. */
.kme-reel-totop-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 50; /* same layer as save/search — above .kme-reel-nav (42) */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff !important;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    animation: kme-totop-glow 2.4s ease-in-out infinite;
}
.kme-reel-totop-btn:hover { background: rgba(0,0,0,0.75); transform: scale(1.04); }
.kme-reel-totop-btn__icon {
    display: inline-flex;
    animation: kme-totop-nudge 1.8s ease-in-out infinite;
}
@keyframes kme-totop-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
    50%      { box-shadow: 0 0 14px rgba(255,255,255,0.35); }
}
@keyframes kme-totop-nudge {
    0%, 100% { transform: translateY(0);    opacity: 0.75; }
    50%      { transform: translateY(-3px); opacity: 1; }
}

/* ── Prev/next nav — edge-hugging "lens" shape, fixed at feed level ─────────────────────
   Lives once at feed level (not per-card) so it stays put on screen while the card track
   slides underneath during a swipe, instead of dragging along with the active card. That
   means it sits ABOVE every card's content, image and text alike — .kme-swipe-stack's
   isolation:isolate makes it impossible to thread a feed-level element "between" a card's
   image and its own text, so there's no z-index trick available to keep this under the text
   while also being feed-level. Text is kept clear of it via .kme-reel-info's side padding
   instead (see below) — a layout guarantee, not a stacking-order one.
   A tall ellipse (border-radius:50% on a box the full height of the feed) positioned half off
   the feed edge, so only its inner half is visible: the silhouette is naturally narrow at the
   very top/bottom (the ellipse's poles) and widest at vertical center. On top of that geometric
   taper, the fill itself is ALSO a vertical gradient (transparent → tinted → transparent)
   rather than a flat color, so it visibly fades in rather than cutting in sharply at the edges. */
.kme-reel-nav {
    position: absolute;
    top: 0;
    height: 100%;
    width: 60px;
    z-index: 42; /* above .kme-swipe-stack's isolated content (auto) and .kme-reel-info (10) */
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(20,20,20,0.4) 32%,
        rgba(20,20,20,0.4) 68%,
        transparent 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: opacity 0.15s;
}
.kme-reel-nav:hover { opacity: 1; } /* stays fully present, never dims — this is meant to always read as "swipeable here" */
.kme-reel-nav--prev { left: -30px; }
.kme-reel-nav--next { right: -30px; }
.kme-reel-nav__chevron {
    position: absolute;
    top: 50%;
    font-size: 1.5rem;
    line-height: 1;
}
/* Always-on gentle nudge, not a hover/tap-only effect — the motion itself is what says
   "there's more this way, swipe" rather than relying on the static shape alone to be noticed. */
.kme-reel-nav--prev .kme-reel-nav__chevron {
    right: 10px;
    animation: kme-nav-hint-prev 1.8s ease-in-out infinite;
}
.kme-reel-nav--next .kme-reel-nav__chevron {
    left: 10px;
    animation: kme-nav-hint-next 1.8s ease-in-out infinite;
}
@keyframes kme-nav-hint-prev {
    0%, 100% { transform: translateY(-50%) translateX(0);   opacity: 0.7; }
    50%      { transform: translateY(-50%) translateX(-6px); opacity: 1;   }
}
@keyframes kme-nav-hint-next {
    0%, 100% { transform: translateY(-50%) translateX(0);  opacity: 0.7; }
    50%      { transform: translateY(-50%) translateX(6px); opacity: 1;   }
}

/* ── Top-center free-text search — feed-level (like the nav arrows/back-to-top button), not
   per-card, so it doesn't move on swipe. Replaces the old .kme-reel-search-btn (a static link,
   easy to confuse with the unrelated "Søk nå →" apply-CTA some categories have below) with a
   real input that submits to that category's own search page — see swipe.js for the submit
   handler that picks the right target as the active tab changes. */
.kme-reel-search-form {
    position: absolute;
    top: 64px; /* clear of the save button's row (top:14px) rather than sharing it */
    left: 50%;
    transform: translateX(-50%);
    z-index: 50; /* above .kme-reel-nav (42, now feed-level) */
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 320px;
    height: 44px;
    /* Same "glass" family as .kme-reel-cta-btn (translucent backdrop-blur, not solid), tinted
       with the active category's color exactly like .kme-reel-cta-btn--primary's cta_color
       tint ({color}40 background / {color}b3 border) — set as a plain (non-!important) inline
       style by swipe.js on load and on every tab switch, since the color needs to track the
       currently active tab and this form (unlike a per-card element) doesn't get
       server-re-rendered when that changes. background/border-color are deliberately NOT
       !important here so that inline style can still win — border-width/style/radius/display
       ARE !important, since a plain single-class selector on these previously lost a
       specificity fight against this page's own theme/form-button defaults (rendered as a
       solid black square instead of a glass pill) — same root cause as the Round 16 text-color
       bug, same fix, just split from the `border` shorthand so !important doesn't also lock the
       color sub-properties JS needs to write. */
    background: rgba(255,255,255,0.12);
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: rgba(255,255,255,0.3);
    border-radius: 999px !important;
    /* No right-side padding — the button fills the pill's right end flush (see below), rather
       than floating as an inset circle disconnected from the pill's own curve. */
    padding: 0 0 0 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.15s, border-color 0.15s;
}
.kme-reel-search-form__input {
    flex: 1;
    min-width: 0;
    /* No forced height/line-height on the input itself — that approach (tried previously)
       didn't actually center the text, likely fighting the browser's own form-control baseline
       handling. Left at its natural (content-based) height instead, vertically centered purely
       via the parent form's flex align-items:center — the standard, more reliable way to center
       a form control inside a flex row. -webkit-appearance/appearance reset removes Safari/
       WKWebView's own default input chrome, which can otherwise add invisible vertical offset. */
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    background: none !important;
    border: none !important;
    outline: none;
    /* !important — same host-theme-leak risk as .kme-reel-title etc. (see its comment). */
    color: #fff !important;
    font-size: 0.85rem;
    line-height: normal;
    padding: 0 8px 0 0;
}
.kme-reel-search-form__input::placeholder { color: rgba(255,255,255,0.55); }
.kme-reel-search-form__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    flex-shrink: 0;
    /* Rounded only on the right — matches the pill's own border-radius on that side instead of
       being a separate inset circle, so the button reads as part of the pill's shape. */
    border-radius: 0 999px 999px 0 !important;
    background: rgba(255,255,255,0.18) !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
    transition: background 0.15s;
}
.kme-reel-search-form__btn:hover { background: rgba(255,255,255,0.3) !important; }
.kme-reel-search-form__btn svg { width: 15px; height: 15px; }

/* ── Reels inner card ───────────────────────────────────────────────────── */
.kme-reel-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

/* Full-bleed background image — this base rule still shows the item's own photo (unblurred):
   it's the ONLY image in the 768-1023px tablet gap between the mobile and desktop blocks below,
   both of which replace it with a decorative dark2 + floating-brand-color backdrop instead (see
   each block's own .kme-reel-bg override) since both of those have a separate sharp .kme-reel-fg
   copy of the same photo already. Shared here since both overrides use the same two colors/
   animation — kept as one definition rather than duplicated per breakpoint. */
.kme-reel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    z-index: 0;
}
@keyframes kme-reel-bg-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(8%, 6%) scale(1.12); }
}

/* The same image again, shown small/sharp over the blurred .kme-reel-bg — both mobile
   (max-width:767px block) and desktop (min-width:1024px block) show it now; only the tablet gap
   between them keeps today's single full-bleed image, mostly so this doesn't need its own
   from-scratch tuning for a range nobody asked about. Deliberately scoped to its own @media
   (rather than an unconditional display:none overridden elsewhere) — two same-specificity rules
   for the same property fall back to source order otherwise, which is exactly the fragility this
   avoids: each range now owns its own display value regardless of source order. */
@media (min-width: 768px) and (max-width: 1023px) {
    .kme-reel-fg {
        display: none;
    }
}

/* Blurred person avatar as bg */
.kme-reel-avatar-blur {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(32px) saturate(1.4) brightness(0.5);
    transform: scale(1.1);
    z-index: 0;
}

/* Gradient overlay — transparent top, dark bottom */
.kme-reel-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0) 25%,
        rgba(0,0,0,0.4) 55%,
        rgba(0,0,0,0.88) 80%,
        rgba(0,0,0,0.97) 100%
    );
    z-index: 1;
}

/* Top area (avatar for person cards) */
.kme-reel-top {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.kme-reel-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.8);
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    display: block;
}

/* Bottom info overlay */
.kme-reel-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Side padding widened from 1.25rem to clear .kme-reel-nav's ~30px visible bulge (plus a
       little buffer) — the nav is feed-level and always above this text (see its own comment),
       so title/bio/tags/CTAs must never extend far enough to be covered by it; this is the
       layout guarantee that replaces the z-index guarantee the old per-card version had. */
    padding: 1.25rem 2.75rem 1.5rem;
    z-index: 10;
}

/* First child of .kme-reel-info (like .kme-reel-score-pill) — .kme-reel-info itself sits right
   below the featured image on desktop, so this reads as "under the picture," not overlaid on
   top of it. Just a positioning/wrap container — .kme-reel-badge-pill (below) carries the
   actual pill styling, since a card can show more than one (e.g. hendelser's real
   støtteordning-type terms) and each needs its own separate pill shape, not one pill stretched
   around multiple labels. */
.kme-reel-badge {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0.6rem;
}
.kme-reel-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: 999px !important;
    white-space: nowrap;
    /* Dark glass, not light/white-tinted — this pill sits inside .kme-reel-info, whose top edge
       can overlap the sharp framed image (.kme-reel-fg) on a tall card with a lot of text above
       it. That image is deliberately NOT darkened (it's meant to look crisp, see .kme-reel-fg's
       own comment) — a light-tinted pill went almost invisible over a bright/light source photo
       (confirmed live: lime-green and near-white cards). A consistently dark backdrop keeps
       white text legible no matter what's behind it, same family as .kme-reel-save-btn/
       .kme-reel-totop-btn/.kme-reel-category-pill. */
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.22) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    /* !important: this card is embedded via shortcode into arbitrary host pages/themes, whose
       own typography defaults (e.g. a heading/paragraph color rule scoped to their own column
       wrapper) can out-specificity a plain single-class selector like this one — confirmed on
       start-v2, where WPBakery/Uncode's default (non-"dark"-styled) column text color leaked
       through and rendered this text black instead of white. */
    color: #fff !important;
}
/* Kulturfelt variants — same pill shape and dark-glass background as the base pill above
   (same legibility reasoning), just a colored border + text instead of white, so they read as a
   distinct dimension (genre) from the plain pills next to them (opportunity-type /
   funding-scheme-type) without going back to a low-contrast tinted fill. */
.kme-reel-badge-pill--blue {
    color: #52bece !important;
    background: rgba(0,0,0,0.5) !important;
    border-color: rgba(82,190,206,0.65) !important;
}
/* PROJECT: kulturella-community — Fellesskap-fanens kulturfelt-pill (Uncode «Fellesskap»-swatch #a78bfa) */
.kme-reel-badge-pill--violet {
    color: #a78bfa !important;
    background: rgba(0,0,0,0.5) !important;
    border-color: rgba(167,139,250,0.65) !important;
}
.kme-reel-badge-pill--lime {
    color: #e0ff56 !important;
    background: rgba(0,0,0,0.5) !important;
    border-color: rgba(224,255,86,0.65) !important;
}

.kme-reel-title {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    font-weight: 800;
    /* !important — see .kme-reel-badge's comment above; same host-theme-leak risk applies here. */
    color: #fff !important;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    /* A single soft blur shadow isn't enough over a bright/near-white source photo — confirmed
       live. The four tight 1px offsets act as a faux stroke hugging the glyph edges (works
       regardless of background brightness); the soft blur stays on top for depth over darker
       images. Same technique used below for .kme-reel-audience/.kme-reel-bio. */
    text-shadow:
        -1px -1px 2px rgba(0,0,0,0.85), 1px -1px 2px rgba(0,0,0,0.85),
        -1px 1px 2px rgba(0,0,0,0.85), 1px 1px 2px rgba(0,0,0,0.85),
        0 2px 8px rgba(0,0,0,0.6);
}

/* "Who this is for" (hendelser's evcal_subtitle today) — emphasized on purpose: bolder and a
   touch larger than .kme-reel-bio right below it, so it reads as the answer to "is this
   relevant to me" before the fuller description. */
.kme-reel-audience {
    font-size: 0.9rem;
    font-weight: 700;
    /* !important — see .kme-reel-badge's comment above; same host-theme-leak risk applies here. */
    color: #fff !important;
    margin: 0 0 0.5rem;
    line-height: 1.4;
    /* Same faux-stroke technique as .kme-reel-title — see its comment. */
    text-shadow:
        -1px -1px 2px rgba(0,0,0,0.85), 1px -1px 2px rgba(0,0,0,0.85),
        -1px 1px 2px rgba(0,0,0,0.85), 1px 1px 2px rgba(0,0,0,0.85),
        0 1px 6px rgba(0,0,0,0.5);
}

.kme-reel-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.75rem;
}
.kme-reel-meta span {
    font-size: 0.82rem;
    /* !important — see .kme-reel-badge's comment above; same host-theme-leak risk applies here. */
    color: rgba(255,255,255,0.8) !important;
    line-height: 1.4;
    /* Plain text — no pill style */
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
    white-space: normal;
    overflow: visible;
    max-width: none;
    text-overflow: clip;
}
.kme-reel-meta span.kme-reel-meta__price {
    color: #ff66c4 !important;
    font-weight: 700;
    font-size: 0.98rem;
}

.kme-reel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 0.75rem;
}
/* Structural only — color comes from --felt/--kg below, matching this site's own established
   distinction between the two fields (see uncode-child/style.css's onboarding tag-picker:
   Kulturfelt = rose/pink, Kulturuttrykk/Kulturgren = Kulturaksen lime). Every tag used to be
   this same lime regardless of which field it came from; --kg keeps that original color
   unchanged, --felt is the new one. */
.kme-reel-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.kme-reel-tag--felt {
    /* !important — see .kme-reel-badge's comment above; same host-theme-leak risk applies here.
       Dark glass background, not a light tint — same legibility reasoning as .kme-reel-badge-pill
       above (a light-tinted fill goes nearly invisible over a bright/light source photo). */
    color: #ff96d6 !important;
    background: rgba(0,0,0,0.45);
    border-color: rgba(255,150,214,0.5);
}
.kme-reel-tag--kg {
    color: #e0ff56 !important;
    background: rgba(0,0,0,0.45);
    border-color: rgba(224,255,86,0.5);
}

/* Full width, 50/50 when there are two (flex:1 on each button, no wrap — they always share the
   row rather than overflow onto a second line). Primary and secondary now share the same base
   "glass" look (translucent dark backdrop, white text, backdrop-blur) instead of one being a
   solid opaque block and the other translucent — they read as the same family of button, with
   the primary distinguished only by a stronger fill/border and heavier weight, plus the
   category-color tint applied inline via cta_color (see reel_card()). */
.kme-reel-ctas {
    display: flex;
    gap: 8px;
    width: 100%;
}

.kme-reel-cta-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.3);
    /* !important — these are <a> tags, so a host theme's own link-color default is an even more
       likely collision than for plain text; see .kme-reel-badge's comment above for why. */
    color: #fff !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.12);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.kme-reel-cta-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: #fff !important;
    transform: scale(1.02);
}
.kme-reel-cta-btn--primary {
    background: rgba(255,255,255,0.26);
    border-color: rgba(255,255,255,0.55);
    font-weight: 800;
}
.kme-reel-cta-btn--primary:hover {
    background: rgba(255,255,255,0.34);
    color: #fff !important;
}

/* Restyles UM's OWN follow/unfollow button (real markup from Followers_API::follow_button() —
   not reinvented, see reel_card()'s follow_html) to match this card's glass CTA family. Scoped
   to .kme-reel-ctas only, so um-followers' own styling elsewhere on the site is untouched.
   !important throughout: UM's own stylesheet rules for .um-follow-btn/.um-button are exactly
   the kind of same-or-higher-specificity host styling this whole component has repeatedly lost
   to without it (see .kme-reel-title's comment for the recurring pattern). */
.kme-reel-ctas .um-follow-btn,
.kme-reel-ctas .um-unfollow-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 14px !important;
    border-radius: 14px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border: 1.5px solid rgba(255,150,214,0.55) !important;
    color: #fff !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    /* Same {color}40 tint formula as .kme-reel-cta-btn--primary's cta_color, using brukere's
       own tab pink (#ff96d6) — not yet following reads as the inviting "primary action" tint. */
    background: rgba(255,150,214,0.4) !important;
    transition: background 0.15s, border-color 0.15s, transform 0.1s !important;
    white-space: nowrap !important;
    text-align: center !important;
    cursor: pointer !important;
    margin: 0 !important;
}
.kme-reel-ctas .um-follow-btn:hover {
    background: rgba(255,150,214,0.55) !important;
}
/* Already following — visibly darker/quieter than the not-yet-following tint above, so it
   reads as "done" rather than repeating the same inviting call-to-action look. */
.kme-reel-ctas .um-unfollow-btn {
    background: rgba(255,150,214,0.16) !important;
    border-color: rgba(255,150,214,0.35) !important;
}
.kme-reel-ctas .um-unfollow-btn:hover {
    /* Leans toward the "Unfollow" state UM's own JS swaps the label to on hover. */
    background: rgba(255,80,140,0.3) !important;
    border-color: rgba(255,80,140,0.5) !important;
}

/* "Se alle X" — quieter than the CTAs above it; this is a way out to a full search/filter
   page, not the primary action on the card. */
.kme-reel-browse-all {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55) !important;
    text-decoration: none;
}
.kme-reel-browse-all:hover {
    color: rgba(255,255,255,0.85) !important;
    text-decoration: underline;
}

/* Empty state */
.kme-swipe-empty {
    display: none;
    position: absolute;
    inset: 0;
    text-align: center;
    color: rgba(255,255,255,0.45);
    padding: 3rem 1rem;
    font-size: 0.9rem;
    z-index: 0;
}

/* ── Tab nav — icon-only, bottom overlay ───────────────────────────────────
   Restyled to match the native app's own bottom pill nav exactly: real backdrop blur (the
   native app's Android side can't do this — a live blur-behind LIBRARY crashed on real devices
   there — but that's a native-view limitation, not a browser one; CSS backdrop-filter is
   standard, well-supported WebView/Safari behavior on both platforms) over a translucent dark2
   fill, with the same two floating brand-color glow blobs the native pill and this exact
   .kme-reel-bg backdrop already use elsewhere in this file (same colors, same
   kme-reel-bg-float animation, just rescaled for this much smaller pill). Material Symbols
   icons in the app's own kulturpunktet pink instead of per-category colors, on a fully
   pill-shaped floating bar. */
.kme-reel-tabs {
    position: absolute;
    /* A free-floating pill clear of all four edges, not a bar flush against the bottom with
       only its top corners rounded. Kept as left/right/bottom OFFSETS rather than side margins
       so the @media(min-width:1024px) block's width:640px + auto-margin centering of this exact
       selector still resolves the same way (definite width + both offsets + auto margins = still
       centered, just within a 12px-inset span). env() covers the iPhone home indicator, which a
       bottom-flush bar didn't have to think about; it resolves to 0 without viewport-fit=cover. */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    z-index: 45;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* Symmetric now — the old 14px bottom was compensating for sitting on the viewport edge. */
    padding: 8px 12px;
    background: rgba(20, 22, 24, 0.72);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: 999px;
    /* Clips the glow blobs below to the pill's own rounded shape — same masksToBounds/
       clipToOutline treatment the native pill uses for the same reason. */
    overflow: hidden;
    /* Casts all round, since the pill now has a bottom edge to cast from (was upward-only). */
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
/* Fixed px size (not a % of the pill's own box) — this bar is much wider than tall, so sizing
   the blobs relative to its own bounds would draw flat ellipses instead of the round soft glow
   the native pill's fixed-size blobs have. ~2x the pill's own height, same as the native app's
   own blob-to-pill size ratio (GlowBlobView: 90px in a 64pt pill). Centered via top/left math
   (half the blob's own 120px size), not a static transform: kme-reel-bg-float's own keyframes
   set transform directly, which would otherwise replace rather than combine with it. */
.kme-reel-tabs::before,
.kme-reel-tabs::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    top: calc(50% - 60px);
    border-radius: 50%;
    filter: blur(24px);
    opacity: 0.5;
    animation: kme-reel-bg-float 16s ease-in-out infinite;
    z-index: -1;
}
.kme-reel-tabs::before {
    background: #ff66c4;
    left: -60px;
}
.kme-reel-tabs::after {
    background: #0cb4ce;
    right: -60px;
    animation-delay: -8s;
}

.kme-reel-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: background 0.15s, transform 0.1s;
    position: relative;
}
.kme-reel-tab:hover {
    background: rgba(255,102,196,0.12);
    transform: scale(1.08);
}
.kme-reel-tab--active {
    background: rgba(255,102,196,0.18);
}
/* Same icons as the Android app's drawer/bottom-nav (see reel_tab_icon() in
   class-shortcodes.php), always kulturpunktet pink regardless of category or active state —
   the active/inactive distinction is carried by .kme-reel-tab's own background above instead,
   matching how the app itself uses one consistent accent color rather than per-item colors. */
.kme-reel-tab__icon {
    width: 24px;
    height: 24px;
    fill: #ff66c4;
}
/* Reopens the intro banner — smaller and more muted than the 48px category circles so it
   doesn't read as a 5th category, just a quiet utility icon in the same always-visible row.
   The glyph is a plain "?" (class-shortcodes.php), not the ❓ emoji it used to be: an emoji
   carries its own colors from the system emoji font, so `color` never applied to it at all and
   it could never be made white — which is also why it read as oversized next to the flat
   monochrome tab icons. */
.kme-reel-tab--help {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    align-self: center;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    /* !important — same host-theme-leak risk as .kme-reel-title etc. (see its comment); a bare
       `color` on a <button> is exactly the fight this file has lost before. */
    color: #fff !important;
    font-family: inherit;
    cursor: pointer;
}
.kme-reel-tab--help:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.3);
    transform: scale(1.08);
}
/* Exit pill — last item in the tab row (category switching loops, so this is the only way
   left to release the scroll-lock and continue past the widget). Deliberately NOT a circle
   like the category icons, so it doesn't read as "just another category". */
.kme-reel-tab--exit {
    width: auto;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    gap: 5px;
    font-family: inherit;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
}
.kme-reel-tab--exit:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.35);
    transform: scale(1.04);
}
.kme-reel-tab--exit-icon { font-size: 1.1rem; line-height: 1; }
.kme-reel-tab--exit-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Active indicator dot */
.kme-reel-tab--active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tab-color, #fff);
}

/* Loading spinner while a category switch is fetching its card stack */
.kme-swipe-feed.kme-swipe-feed--loading::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    z-index: 60;
    pointer-events: none;
    animation: kme-swipe-spin 0.7s linear infinite;
}
@keyframes kme-swipe-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

/* Bio text inside reel card */
.kme-reel-bio {
    font-size: 0.82rem;
    /* !important — see .kme-reel-badge's comment above; same host-theme-leak risk applies here. */
    color: rgba(255,255,255,0.72) !important;
    margin: 0 0 0.6rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Had no shadow at all before — the semi-transparent white color made this the least legible
       text on the card over a bright/light source photo. Same faux-stroke technique as
       .kme-reel-title, lighter since this text is already dimmer/smaller than the title. */
    text-shadow:
        -1px -1px 2px rgba(0,0,0,0.75), 1px -1px 2px rgba(0,0,0,0.75),
        -1px 1px 2px rgba(0,0,0,0.75), 1px 1px 2px rgba(0,0,0,0.75);
}

/* Adjust info area to not overlap tab nav (mobile/tablet only in practice — the desktop block
   zeroes this and pads its flex column by the measured --kme-tabs-h instead). 5.5rem, not the
   original 5rem: the tab row is a floating pill now, so it occupies its own height PLUS a 12px
   bottom offset. */
.kme-reel-info {
    padding-bottom: 5.5rem; /* clear tab nav */
}

/* ── Mobile: true full-screen edge-to-edge ──────────────────────────────── */
@media (max-width: 767px) {
    .kme-swipe-feed {
        /* Break out of any parent container padding/margins */
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        max-width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        /* dvh = dynamic viewport height — shrinks when address bar hides. --kme-vh (set by
           swipe.js from window.visualViewport) is preferred when available — Chrome has a
           confirmed quirk where dvh doesn't reliably settle when its own URL bar collapses,
           especially once position:fixed below removes its usual scroll-driven trigger to
           finish that transition; Safari doesn't have this issue, so dvh alone stays the
           fallback rather than a hard requirement. */
        height: 100dvh;
        height: var(--kme-vh, 100dvh);
        border-radius: 0;
    }
    /* When scroll-lock is active, pin the feed to the viewport so page
       padding/margins above the feed don't create a dark gap at the top */
    body.kme-swipe-active #kme-swipe-feed {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        height: var(--kme-vh, 100dvh) !important;
        margin: 0 !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 9990;
    }
    /* Once #kme-swipe-feed above is position:fixed, it's out of normal document flow — its
       wrapping row (host page content, not this stylesheet) no longer sizes around it and
       collapses, so it no longer backs the feed the way it does when in-flow. If Chrome's
       address-bar-collapse timing (see swipe.js's --kme-vh handling) leaves the fixed feed
       briefly shorter than the real viewport, what shows through the gap is whatever
       neighboring content sits there — not reliably dark. Matching this module's own dark
       card family here means a transient gap reads as "still this experience" instead of a
       flash of the host page's light background. Confirmed Chrome-mobile-only (desktop, the
       Twinr app wrapper, and other mobile browsers already render this correctly). */
    body.kme-swipe-active {
        background: #0d0d14;
    }
    .kme-swipe-card {
        border-radius: 0;
    }
    /* Dark2 (#141618) + the two same brand colors the /start/ header's animated background
       uses (kulturpunktet #ff66c4, cerulean #0cb4ce), softly floating — replaces the blurred
       copy of the item's own photo that used to fill this space. The item's own sharp photo
       still shows via .kme-reel-fg below; this is now purely decorative backdrop around it. */
    .kme-reel-bg {
        background-image: none !important;
        background-color: #141618;
        overflow: hidden;
    }
    .kme-reel-bg::before,
    .kme-reel-bg::after {
        content: '';
        position: absolute;
        width: 130%;
        height: 130%;
        border-radius: 50%;
        filter: blur(70px);
        opacity: 0.5;
        animation: kme-reel-bg-float 16s ease-in-out infinite;
    }
    .kme-reel-bg::before {
        background: #ff66c4;
        top: -35%;
        left: -35%;
    }
    .kme-reel-bg::after {
        background: #0cb4ce;
        bottom: -35%;
        right: -35%;
        animation-delay: -8s;
    }
    /* Same reasoning as the desktop block above: the base rule's near-opaque gradient was tuned
       for a bright blurred photo, and would otherwise hide the floating color against dark2. */
    .kme-reel-gradient {
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) 40%,
            rgba(0,0,0,0.35) 70%,
            rgba(0,0,0,0.55) 100%
        );
    }
    /* Full-bleed width band, floating clear of the very top edge (rather than flush against it)
       so the dark2 + floating-color backdrop shows above it too — masked to fade in from that
       backdrop at the top AND dissolve into it at the bottom (was a hard-edged rectangle cut off
       mid-image, which read as pasted on rather than part of the card — confirmed live; a
       one-sided bottom-only fade still looked odd against a flush top edge). Same "editorial
       image fades to flat color" treatment apps like Spotify/Apple Music use for card artwork.
       mask-image, not a gradient overlay layered on top — an overlay would still show the
       image's own hard edges underneath a fade of color; masking fades the image's actual
       alpha, so .kme-reel-bg's colors show through directly on both sides. Height bumped from
       38vh since two fades (not one) now eat into the visible photo area — needs more room to
       still read as a real photo, not just a sliver between two fades. */
    .kme-reel-fg {
        display: block;
        position: absolute;
        left: 0;
        /* 10vh, not the original 6vh — plus env(safe-area-inset-top) so the band starts clear
           of the save/category-pill/search-form row above it (that row itself now grows by the
           same safe-area amount, see body.kme-swipe-active overrides below) rather than tucking
           in right underneath it on every screen size. */
        top: calc(10vh + env(safe-area-inset-top, 0px));
        transform: none;
        width: 100%;
        height: 42vh;
        background-size: cover;
        background-position: center;
        border-radius: 0;
        mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 100%);
        z-index: 2;
    }
    /* The category-switch drag hint (.kme-swipe-card__hint, top:50% in its base rule) used to
       sit in the gap above the old centered image; the image is now a top-anchored band, so
       this instead sits just below it, clear of both the photo and the info panel's own
       top-of-content pills. */
    .kme-swipe-card__hint {
        top: calc(10vh + env(safe-area-inset-top, 0px) + 42vh + 20px);
    }
    /* Save/category-pill/"Lukk" sit at top:14px in their base rule, which is fine on a normal
       in-flow page but collides with the iOS status bar once the feed goes position:fixed +
       inset:0 (body.kme-swipe-active, above) and renders edge-to-edge under it in the native
       app (env(safe-area-inset-top) only resolves non-zero there — see
       km_capacitor_app_viewport_fit_cover() in functions.php). Reported live: Lukk sat flush
       against the battery icon, Lagre partly obscured by the clock. Android doesn't need this —
       its own native chrome already insets the WebView below the status bar. Scoped to the
       fixed/active state specifically, not the base mobile rule, so the normal in-flow/browser
       case (no notch to clear) keeps its original 14px. */
    body.kme-swipe-active .kme-reel-save-btn,
    body.kme-swipe-active .kme-reel-totop-btn {
        top: calc(14px + env(safe-area-inset-top, 0px));
    }
    body.kme-swipe-active .kme-reel-category-pill {
        top: calc(14px + env(safe-area-inset-top, 0px));
    }
    /* .kme-reel-search-form's base rule (top:64px) assumed the save-button row stayed at its
       own base top:14px — now that row shifts down by env(safe-area-inset-top) above, the
       search form needs the same extra shift or it sits back on top of it (reported live: the
       search bar landed over the Save/Lukk row instead of below it). */
    body.kme-swipe-active .kme-reel-search-form {
        top: calc(64px + env(safe-area-inset-top, 0px));
    }
    /* .kme-reel-info's base rule (padding-bottom: 5.5rem, above) assumed the tab bar's own
       bottom offset stayed at its base 12px — .kme-reel-tabs already adds
       env(safe-area-inset-bottom) to clear the iPhone home indicator, so the CTA content needs
       the same extra clearance or it ends up rendering under (behind) the now-lower tab bar. */
    body.kme-swipe-active .kme-reel-info {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Event / Activity cards need overflow:hidden for integrated image ─────── */
.kme-event-card,
.kme-activity-card {
    overflow: hidden;
}

/* ── Equal card heights in grid (multi-column only) ─────────────────────── */
/* stretch makes every card in a row the same height as the tallest */
@media (min-width: 640px) {
    .kme-grid {
        align-items: stretch;
    }
}
.kme-grid-card-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.kme-grid-card-wrap > .kme-glass-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.kme-grid-card-wrap > .kme-glass-card .kme-card-body {
    flex: 1;
}
.kme-grid-card-wrap > .kme-glass-card .kme-lagrede-actions {
    margin-top: auto;
    padding-top: 0.75rem;
}
/* Person cards equally tall */
.kme-grid .kme-person-card {
    height: 100%;
}

/* ── Grid card wrapper + action buttons ─────────────────────────────────── */
.kme-grid-card-wrap {
    position: relative;
}
.kme-grid-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.kme-grid-actions .kme-grid-btn {
    pointer-events: auto;
}
.kme-grid-card-wrap:hover .kme-grid-actions,
.kme-grid-card-wrap:focus-within .kme-grid-actions {
    opacity: 1;
}
/* Always visible on touch devices */
@media (hover: none) {
    .kme-grid-actions { opacity: 1; }
}
.kme-grid-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
    position: relative;
    z-index: 10;
}
/* Tooltip via ::after on the button */
.kme-grid-btn[data-kme-tooltip]::after {
    content: attr(data-kme-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    background: rgba(15, 8, 35, 0.95);
    border: 1px solid rgba(255,255,255,0.14);
    color: #e8e0ff;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 30;
}
.kme-grid-btn[data-kme-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.kme-grid-dismiss {
    background: rgba(255,150,214,0.2);
    color: #ff96d6;
    box-shadow: 0 2px 8px rgba(255,150,214,0.15);
}
.kme-grid-dismiss:hover {
    background: rgba(255,150,214,0.45);
    transform: scale(1.15);
    box-shadow: 0 4px 14px rgba(255,150,214,0.3);
}
.kme-grid-keep {
    background: rgba(82,190,206,0.2);
    color: #52bece;
    box-shadow: 0 2px 8px rgba(82,190,206,0.15);
}
.kme-grid-keep:hover {
    background: rgba(82,190,206,0.45);
    transform: scale(1.15);
    box-shadow: 0 4px 14px rgba(82,190,206,0.3);
}

/* ── Card CTA button (Søk nå / Ta kontakt) ──────────────────────────────── */
.kme-card-cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    color: #000;
    background: #e0ff56;
    border: none;
    margin-top: 0.6rem;
    transition: filter 0.15s, transform 0.1s;
}
/* ── Knapp-farger: overstyrer temaets globale a:hover med !important ──────── */

/* Standard CTA (gul bakgrunn) */
.kme-card-cta                       { color: #000 !important; text-decoration: none !important; }
.kme-card-cta:hover, .kme-card-cta:focus { color: #000 !important; text-decoration: none !important; }

/* Blå variant */
.kme-card-cta--blue                       { color: #fff !important; }
.kme-card-cta--blue:hover, .kme-card-cta--blue:focus { color: #005f70 !important; }

/* Rosa variant */
.kme-card-cta--pink                       { color: #111 !important; }
.kme-card-cta--pink:hover, .kme-card-cta--pink:focus { color: #8b004f !important; }

/* Hover-effekt (brightness/scale) */
.kme-card-cta:hover { filter: brightness(1.08); transform: scale(1.03); text-decoration: none !important; }
.kme-card-cta--blue { background: #52bece; }
.kme-card-cta--pink { background: #ff96d6; }

/* Ghost-lenke */
.kme-card-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none !important;
    color: rgba(255,255,255,0.75) !important;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    margin-top: 0.6rem;
    transition: background 0.15s, color 0.15s;
}
.kme-card-link:hover, .kme-card-link:focus {
    background: rgba(255,255,255,0.14);
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Card bio text ──────────────────────────────────────────────────────── */
.kme-card-bio {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin: 0.4rem 0;
    line-height: 1.45;
}

/* ── Lagrede forslag card actions row ───────────────────────────────────── */
.kme-lagrede-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0.6rem;
}

/* All grid cards — buttons stretch equally */
.kme-glass-card .kme-lagrede-actions,
.kme-person-card .kme-lagrede-actions {
    flex-wrap: nowrap;
    gap: 8px;
}
.kme-glass-card .kme-lagrede-actions .kme-card-link,
.kme-glass-card .kme-lagrede-actions .kme-card-cta,
.kme-person-card .kme-lagrede-actions .kme-card-link,
.kme-person-card .kme-lagrede-actions .kme-card-cta {
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 9px 10px;
    font-size: 0.82rem;
    margin-top: 0;
}

/* ── Fjern fra lagrede-knapp (inline i actions-rad) ─────────────────────── */
.kme-lagrede-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.12);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kme-lagrede-remove:hover {
    background: rgba(255,150,214,0.12);
    color: #ff96d6;
    border-color: rgba(255,150,214,0.3);
}

/* ── ✕-knapp øverst til høyre på alle oppgavekort — MÅ komme etter .kme-lagrede-remove ── */
.kme-lagrede-card-close.kme-lagrede-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    gap: 0;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.18);
    z-index: 30;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.kme-lagrede-card-close.kme-lagrede-remove:hover {
    background: rgba(220,50,50,0.55);
    color: #fff;
    border-color: rgba(255,80,80,0.45);
}

/* ── Profil-core action buttons (also reused by the "Fyll ut" nudge card) ── */
.kme-profil-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.12);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.kme-profil-action-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--km-accent, #e0ff56);
    color: #fff;
    text-decoration: none;
}

/* ── Hide UM notices inside/near swipe feed ─────────────────────────────── */
body.kme-swipe-active [class*="um-notice"],
body.kme-swipe-active [class*="um-notification"],
body.kme-swipe-active .um-notice,
body.kme-swipe-active .notice,
body.kme-swipe-active .notice-info,
body.kme-swipe-active .notice-warning,
body.kme-swipe-active .updated,
#kme-swipe-feed [class*="um-notice"],
#kme-swipe-feed .um-notice {
    display: none !important;
}

/* ── Hide ELLA (AI Engine's floating chat widget, .mwai-chat.mwai-window —
   not a KME element, lives page-level via the "Kulturassistenten" uncode_block, e.g. on
   start-v2) while the swipe module has scroll-lock focus. Reuses the same body.kme-swipe-active
   class the lock already toggles — no new JS needed, it reappears automatically once the lock
   releases (scroll-away or the "Lukk" button). Both bot IDs this site actually uses share
   this class regardless of which one a given user's role resolves to. */
body.kme-swipe-active .mwai-chat.mwai-window {
    display: none !important;
}

/* ── Lock body scroll when swipe feed is active ─────────────────────────── */
body.kme-swipe-active {
    overflow: hidden;
    /* position: fixed is set via JS with top offset to prevent scroll jump */
    position: fixed;
    left: 0;
    right: 0;
}

/* ── Done panel — shown inline below cards when all are swiped ─────────── */
.kme-swipe-done {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem 6rem; /* extra bottom for tab nav */
    text-align: center;
    z-index: 43; /* above .kme-reel-nav (42) — now feed-level, would otherwise sit over this message */
    animation: kme-fade-up 0.4s ease both;
}
.kme-swipe-done[hidden] { display: none; }

.kme-swipe-done__points-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(224,255,86,0.2), rgba(224,255,86,0.08));
    border: 1.5px solid rgba(224,255,86,0.4);
    color: #e0ff56;
    font-size: 0.95rem;
    font-weight: 700;
    animation: kme-fade-up 0.4s ease 0.15s both;
}

.kme-swipe-done__icon {
    font-size: 3rem;
    line-height: 1;
    color: #e0ff56;
}
.kme-swipe-done__msg {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    margin: 0;
}
.kme-swipe-done__hint {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin: -0.5rem 0 0;
    max-width: 260px;
    line-height: 1.4;
}
/* Primary CTA in this panel — brand pink, standing out against the neutral fresh/oppgaver
   pills below it, since updating the profile is the most effective fix for a thin deck. */
.kme-swipe-done__profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    background: #ff66c4;
    transition: filter 0.15s, transform 0.1s;
}
.kme-swipe-done__profile-btn:hover {
    filter: brightness(1.08);
    transform: scale(1.03);
    color: #fff;
    text-decoration: none;
}
.kme-swipe-done__tabs {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 260px;
    margin-top: 0.5rem;
}
.kme-swipe-done__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    border: 1.5px solid var(--tab-color, rgba(255,255,255,0.3));
    color: var(--tab-color, #fff);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    transition: background 0.15s, transform 0.1s;
}
.kme-swipe-done__tab:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.03);
    color: var(--tab-color, #fff);
    text-decoration: none;
}
.kme-swipe-done__fresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255,255,255,0.06);
    transition: background 0.15s, color 0.15s;
    margin-top: 0.25rem;
}
.kme-swipe-done__fresh:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    text-decoration: none;
}
.kme-swipe-done__fresh-note {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin: -0.25rem 0 0;
}

.kme-swipe-done__oppgaver {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    transition: background 0.15s, color 0.15s;
    margin-top: 0.25rem;
}
.kme-swipe-done__oppgaver:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
}

/* ── Swipe intro banner ─────────────────────────────────────────────────── */
.kme-swipe-intro {
    position: absolute;
    inset: 0;
    z-index: 180;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: inherit;
    animation: kme-fade-up 0.3s ease both;
}
.kme-swipe-intro__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    max-width: 300px;
}
.kme-swipe-intro__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.kme-swipe-intro__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    text-align: left;
}
.kme-swipe-intro__list li { line-height: 1.4; }
.kme-swipe-intro__close {
    margin-top: 0.5rem;
    padding: 0.65rem 2rem;
    border-radius: 999px;
    background: #e0ff56;
    color: #111;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, filter 0.15s;
}
.kme-swipe-intro__close:hover { filter: brightness(1.08); transform: scale(1.04); }

/* ── ELLA congratulations overlay ──────────────────────────────────────── */
.kme-ella-congrats {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    animation: kme-fade-up 0.5s ease both;
}
.kme-ella-congrats.is-visible {
    display: flex;
}
.kme-ella-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid #ff96d6;
    box-shadow: 0 0 24px rgba(255,150,214,0.4);
    object-fit: cover;
}
.kme-ella-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.kme-ella-sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
    max-width: 280px;
}
.kme-ella-points {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e0ff56;
    background: rgba(224,255,86,0.1);
    border: 1px solid rgba(224,255,86,0.25);
    border-radius: 999px;
    padding: 0.4rem 1.2rem;
}
.kme-ella-close-btn {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.6rem 1.8rem;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s;
}
.kme-ella-close-btn:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    text-decoration: none;
}

/* ── Fireworks canvas ───────────────────────────────────────────────────── */
#kme-fireworks-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

/* ── Person match card (.kme-person-card) ───────────────────────────────── */
.kme-person-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    /* overflow visible so score-pill tooltip can float above the card */
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.kme-person-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.35);
    /* lift above sibling cards so tooltip is never hidden underneath */
    z-index: 10;
}

/* Hero image section */
.kme-person-card__hero {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: #1a1030;
    flex-shrink: 0;
    /* round top corners since parent no longer has overflow:hidden */
    border-radius: 16px 16px 0 0;
}
.kme-person-card__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.kme-person-card__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(10, 4, 26, 0.55) 60%,
        rgba(10, 4, 26, 0.92) 100%
    );
    pointer-events: none;
}

/* Score pill — top left corner of card with freely floating tooltip */
.kme-person-card__score-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    background: linear-gradient(135deg, #52bece 0%, #9b59b6 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 3;
    cursor: default;
}
.kme-person-card__score-pill::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    white-space: nowrap;
    background: rgba(20,10,40,0.96);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e8e0ff;
    font-size: 0.7rem;
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s, transform 0.18s;
    z-index: 10;
}
.kme-person-card__score-pill:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Name + brukertype overlaid at bottom of hero */
.kme-person-card__hero-info {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 2;
}
.kme-person-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    line-height: 1.2;
    margin-bottom: 4px;
}
.kme-person-card__type {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Body section */
.kme-person-card__body {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Location row */
.kme-person-card__loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 3px 10px 3px 7px;
    align-self: flex-start;
}
.kme-person-card__loc svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Bio */
.kme-person-card__bio {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Interests section */
.kme-person-card__interests {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.kme-person-card__interests-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45);
}
.kme-person-card__interests-label--dim {
    color: rgba(255,255,255,0.28);
    margin-top: 4px;
}

/* "X felles" count badge inside label */
.kme-shared-count {
    display: inline-block;
    background: rgba(224, 255, 86, 0.18);
    color: #e0ff56;
    border: 1px solid rgba(224, 255, 86, 0.3);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: 2px;
}

/* "Nær deg" location badge */
.kme-near-badge {
    display: inline-block;
    background: rgba(224, 255, 86, 0.18);
    color: #e0ff56;
    border: 1px solid rgba(224, 255, 86, 0.35);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 5px;
    vertical-align: middle;
}

/* Person card — push actions to bottom */
.kme-person-card .kme-lagrede-actions {
    margin-top: auto;
    padding-top: 10px;
}

/* Felles interesser — rosa */
.kme-shared-pill--match {
    background: rgba(255, 150, 214, 0.2);
    border-color: rgba(255, 150, 214, 0.55);
    color: #ff96d6;
    font-weight: 600;
}

/* Andre interesser — blå */
.kme-shared-pill--dim {
    background: rgba(82, 190, 206, 0.12);
    border-color: rgba(82, 190, 206, 0.35);
    color: #52bece;
    font-weight: 400;
}

/* ---- Profil-core: rad-headings ---- */
.kme-profil-stats__heading {
    font-size: .68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: .85rem 0 .4rem;
    padding: 0;
}
.kme-profil-stats__heading:first-of-type {
    margin-top: .25rem;
}

/* ── Lokasjon-wizard: autocomplete ─────────────────────────────────────── */
.km-ac-wrap {
    position: relative;
}
.km-ac-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #1e2020;
    border: 1px solid rgba(82, 190, 206, 0.3);
    border-radius: 10px;
    list-style: none;
    margin: 0;
    padding: .3rem 0;
    z-index: 10;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.km-ac-list.is-open {
    display: block;
}
.km-ac-item {
    padding: .55rem .9rem;
    cursor: pointer;
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
    line-height: 1.3;
    transition: background .12s;
}
.km-ac-item:hover,
.km-ac-item.is-focused {
    background: rgba(82, 190, 206, .13);
    color: #fff;
}
.km-ac-item__sub {
    font-size: .72rem;
    color: rgba(255, 255, 255, .42);
    display: block;
    margin-top: .1rem;
}

/* ── Lokasjon-wizard: mobil-korreksjon ──────────────────────────────────── */
@media (max-width: 520px) {
    #km-lokasjon-wizard {
        align-items: flex-start !important;
        padding: 0.75rem !important;
    }
    #km-lokasjon-wizard .kme-wizard-modal {
        padding: 1.25rem 1.1rem 1.5rem;
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
        margin: auto 0;
    }
}

/* ===== END: PROJECT kulturella-match-engine ===== */


/* PROJECT: kulturella-community — tekstkort (forumtråder uten bilde): teksten er innholdet, så den får plass og lesbarhet. */
.kme-reel-inner--text .kme-reel-bg {
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(167,139,250,0.30), transparent 60%),
        radial-gradient(110% 70% at 100% 100%, rgba(255,150,214,0.18), transparent 60%),
        #15101f !important;
}
.kme-reel-inner--text .kme-reel-gradient { display: none; }
.kme-reel-inner--text .kme-reel-title {
    font-size: clamp(1.3rem, 5.2vw, 1.75rem);
    line-height: 1.2;
    text-shadow: none;
}
.kme-reel-byline {
    margin: 0.15rem 0 0.7rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6) !important;
    letter-spacing: 0.01em;
}
.kme-reel-text {
    position: relative;
    margin: 0 0 0.75rem;
    padding-left: 0.85rem;
    border-left: 3px solid rgba(167,139,250,0.7);
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.9) !important;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kme-reel-text p {
    margin: 0 0 0.6em;
    color: inherit !important;
    font-size: inherit;
    line-height: inherit;
}
.kme-reel-text p:last-child { margin-bottom: 0; }
@media (max-height: 700px) {
    .kme-reel-text { -webkit-line-clamp: 7; font-size: 0.95rem; }
}
@media (min-width: 1024px) and (max-height: 860px) {
    .kme-swipe-feed .kme-reel-text { -webkit-line-clamp: 8; }
}

/* ===== BEGIN: PROJECT kulturella-match-engine — ledighetskalender (profil + kort) ===== */
.kme-avail { --kav-busy: #ff5c7a; --kav-free: #3ecf8e; --kav-lim: #f5c451; --kav-off: rgba(255,255,255,0.28); color: rgba(255,255,255,0.85); font-size: 13px; }
.kme-avail--busy { opacity: .6; pointer-events: none; }
.kme-avail__saved { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: rgba(62,207,142,0.18); color: #9ff0c8; font-size: 12px; font-weight: 700; }
.kme-avail__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.kme-avail__summary strong { font-weight: 700; color: #fff; }
.kme-avail__next { color: rgba(255,255,255,0.55); }
.kme-avail__dot, .kme-avail-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--kav-free, #3ecf8e); box-shadow: 0 0 0 2px rgba(0,0,0,0.35); }
.kme-avail__dot--busy, .kme-avail-dot--busy { background: #ff5c7a; }
.kme-avail__dot--limited, .kme-avail-dot--limited { background: #f5c451; }
.kme-avail__dot--closed, .kme-avail-dot--closed { background: rgba(255,255,255,0.35); }
.kme-avail__settings { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.kme-avail__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.kme-avail__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kme-avail__pill { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.7); cursor: pointer; text-transform: none; letter-spacing: normal; line-height: 1.2; }
.kme-avail__pill.is-active { background: linear-gradient(90deg, #ff96d6, #52bece); border-color: transparent; color: #0d0d0d; }
.kme-avail__toggle { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.8); cursor: pointer; margin: 0; }
.kme-avail__toggle input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #52bece; flex-shrink: 0; }
.kme-avail__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kme-avail__month { font-weight: 700; text-transform: capitalize; color: #fff; }
.kme-avail__navbtn { appearance: none; -webkit-appearance: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.kme-avail__navbtn:disabled { opacity: .3; cursor: default; }
.kme-avail__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kme-avail__wd { text-align: center; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; padding-bottom: 2px; }
.kme-avail__day { appearance: none; -webkit-appearance: none; font: inherit; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 34px; border-radius: 9px; border: 1px solid transparent; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; padding: 0; line-height: 1; text-transform: none; letter-spacing: normal; }
button.kme-avail__day { cursor: pointer; }
.kme-avail__day--empty { background: transparent; }
.kme-avail__day--busy { background: rgba(255,92,122,0.28); color: #ffd3dc; border-color: rgba(255,92,122,0.5); }
.kme-avail__day--available { background: rgba(62,207,142,0.22); color: #c9f7e2; border-color: rgba(62,207,142,0.45); }
.kme-avail__day--limited { background: rgba(245,196,81,0.10); }
.kme-avail__day--closed { background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.35); }
.kme-avail__day--past { opacity: .35; }
.kme-avail__day--today { border-color: #fff; }
.kme-avail__day--sel { outline: 2px solid #52bece; outline-offset: -2px; }
.kme-avail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 10px; border-radius: 12px; background: rgba(82,190,206,0.08); border: 1px solid rgba(82,190,206,0.3); }
.kme-avail__selinfo { flex-basis: 100%; font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 2px; }
.kme-avail__act { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #fff; cursor: pointer; text-transform: none; letter-spacing: normal; line-height: 1.2; }
.kme-avail__act--busy { background: #ff5c7a; border-color: #ff5c7a; color: #1a0b10; }
.kme-avail__act--available { background: #3ecf8e; border-color: #3ecf8e; color: #062016; }
.kme-avail__act--cancel { margin-left: auto; color: rgba(255,255,255,0.6); }
.kme-avail__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,0.55); }
.kme-avail__leg { display: inline-flex; align-items: center; gap: 5px; }
.kme-avail__sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.kme-avail__sw--busy { background: rgba(255,92,122,0.7); }
.kme-avail__sw--available { background: rgba(62,207,142,0.7); }
.kme-avail__hint { flex-basis: 100%; }
/* Ledighetsprikk på personkortet (Samarbeid) */
.kme-person-card__avail { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: rgba(255,255,255,0.8); margin-top: 3px; }
/* ===== END: PROJECT kulturella-match-engine — ledighetskalender ===== */

/* ===== BEGIN: PROJECT kulturella-match-engine — «Finn kandidater» ===== */
.kme-cands { max-width: 1100px; margin: 0 auto; padding: 18px 16px 110px; color: rgba(255,255,255,0.88); }
.kme-cands--loading .kme-cands__list, .kme-cands--loading .kme-cands__map { opacity: .5; }
.kme-cands-msg { color: rgba(255,255,255,0.6); font-size: 14px; padding: 20px 0; }
.kme-cands__back { font-size: 13px; color: #52bece !important; text-decoration: none; }
.kme-cands__title { font-size: 26px !important; margin: 8px 0 4px !important; color: #fff !important; }
.kme-cands__job { color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 12px; }
.kme-cands__warn { background: rgba(245,196,81,0.12); border: 1px solid rgba(245,196,81,0.4); color: #f5dd9a; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.kme-cands__filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.kme-cands__filters .kme-cands__in { flex: 1 1 160px; min-width: 0; height: 40px; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.15) !important; background: #141414 !important; color: #fff !important; padding: 0 10px !important; font-size: 14px !important; margin: 0 !important; }
.kme-cands__period { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; font-size: 12px; color: rgba(255,255,255,0.6); }
.kme-cands__period .kme-cands__in { flex: 1 1 140px; }
.kme-cands__chk { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; cursor: pointer; }
.kme-cands__chk input { accent-color: #52bece; width: 16px; height: 16px; }
.kme-cands__tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.kme-cands__tab { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.7); cursor: pointer; text-transform: none; letter-spacing: normal; }
.kme-cands__tab.is-active { background: linear-gradient(90deg, #ff96d6, #52bece); color: #0d0d0d; border-color: transparent; }
.kme-cands__count { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.55); }
.kme-cands__invited { margin-bottom: 14px; }
.kme-cands__invhead { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #ff66c4; margin-bottom: 6px; }
.kme-cands__invlist { display: flex; flex-wrap: wrap; gap: 6px; }
.kme-cands__inv { font-size: 12px; padding: 5px 10px; border-radius: 50px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #fff !important; text-decoration: none !important; }
.kme-cands__inv span { color: rgba(255,255,255,0.55); margin-left: 4px; }
.kme-cands__inv--applied { border-color: rgba(62,207,142,0.5); }
.kme-cands__inv--applied span { color: #3ecf8e; }
.kme-cands__inv--declined { opacity: .55; }
.kme-cand { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kme-cand .kme-person-card { cursor: pointer; }
.kme-cand__bar { display: flex; align-items: center; gap: 8px; }
.kme-cand__km { font-size: 11px; color: rgba(255,255,255,0.55); }
.kme-cand__pick { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin: 0 0 0 auto; cursor: pointer; color: rgba(255,255,255,0.75); }
.kme-cand__pick input { accent-color: #52bece; width: 16px; height: 16px; margin: 0; }
.kme-cand__invite { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 8px; border: none; background: #ff66c4; color: #0d0d0d; cursor: pointer; text-transform: none; letter-spacing: normal; }
.kme-cands__more { text-align: center; margin: 16px 0; }
.kme-cands__morebtn, .kme-cands__selbtn, .kme-cands-modal__send { appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; font-weight: 700; padding: 11px 20px; border-radius: 10px; border: none; background: #ff66c4; color: #0d0d0d; cursor: pointer; text-transform: none; letter-spacing: normal; }
.kme-cands__morebtn { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.kme-cands__map { height: 62vh; min-height: 360px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.kme-cands__map .leaflet-popup-content { font-size: 13px; }
.kme-map-cluster { display: flex !important; align-items: center; justify-content: center; border-radius: 50%; background: rgba(82,190,206,0.9); color: #0d0d0d; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 4px rgba(82,190,206,0.3); }
.kme-cands__sel { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 9990; display: flex; align-items: center; gap: 12px; background: #1b1b1b; border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; padding: 8px 8px 8px 16px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); font-size: 13px; }
.kme-cands-modal__lead { font-size: 13px; color: rgba(255,255,255,0.65); margin: 0 0 10px; }
.kme-cands-modal__msg { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: #141414; color: #fff; padding: 10px; font-size: 14px; font-family: inherit; resize: vertical; }
.kme-cands-toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(80px + env(safe-area-inset-top, 0px)); z-index: 1000000; background: #3ecf8e; color: #062016; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); max-width: 90vw; }
/* Invitasjonsbanner + forfatterpanel på aktivitetssiden */
.kme-job-invite, .kme-job-owner { border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; font-size: 14px; }
.kme-job-invite { background: linear-gradient(90deg, rgba(255,150,214,0.14), rgba(82,190,206,0.14)); border: 1px solid rgba(255,150,214,0.35); }
.kme-job-invite__msg { font-style: italic; color: rgba(255,255,255,0.75); margin: 6px 0 0; }
.kme-job-invite__actions, .kme-job-owner__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kme-job-owner { background: rgba(82,190,206,0.08); border: 1px solid rgba(82,190,206,0.35); }
.kme-job-owner__title { font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #52bece; margin-bottom: 4px; }
.kme-job-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; text-decoration: none !important; border: 1px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.2; text-transform: none; letter-spacing: normal; }
.kme-job-btn--primary { background: #ff66c4; color: #0d0d0d !important; }
.kme-job-btn--blue { background: #52bece; color: #0d0d0d !important; }
.kme-job-btn--ghost { background: transparent; color: rgba(255,255,255,0.75) !important; border-color: rgba(255,255,255,0.2); }
/* ===== END: PROJECT kulturella-match-engine — «Finn kandidater» ===== */

/* ===== BEGIN: PROJECT kulturella-match-engine — søknadsskjema + innboks ===== */
.kme-apply .km-edit-modal-box { max-width: 560px; }
.kme-apply__info { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0 0 12px; }
.kme-apply__ok { font-size: 15px; color: #3ecf8e; }
.kme-apply__field { margin-bottom: 14px; }
.kme-apply__label { display: block; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.kme-apply__req { color: #ff66c4; }
.kme-apply__field input[type=text], .kme-apply__field input[type=url], .kme-apply__field input[type=date], .kme-apply__field textarea,
.kme-fb__label, .kme-fb__opts, .kme-fb__type {
    width: 100%; box-sizing: border-box; border-radius: 10px !important; border: 1px solid rgba(255,255,255,0.15) !important; background: #141414 !important; color: #fff !important; padding: 10px 12px !important; font-size: 14px !important; font-family: inherit; margin: 0 !important;
}
.kme-apply__field input[type=file] { font-size: 13px; color: rgba(255,255,255,0.8); }
.kme-apply__hint { display: block; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.kme-apply__opt { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 6px; cursor: pointer; color: rgba(255,255,255,0.85); }
.kme-apply__opt input { accent-color: #ff66c4; width: 18px; height: 18px; margin: 0; }
.kme-apply__err { background: rgba(255,92,122,0.12); border: 1px solid rgba(255,92,122,0.45); color: #ffc2cd; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.kme-apply__send { width: 100%; justify-content: center; padding: 13px 16px; font-size: 15px; }
.kme-apps__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 4px 0 16px; }
.kme-apps__stat { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 12px; }
.kme-apps__stat strong { display: block; font-size: 20px; color: #fff; }
.kme-apps__stat span { font-size: 11px; color: rgba(255,255,255,0.55); }
.kme-app { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.kme-app[data-status=rejected] { opacity: .55; }
.kme-app__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kme-app__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kme-app__who { flex: 1; min-width: 0; }
.kme-app__name { font-weight: 700; color: #fff !important; text-decoration: none !important; }
.kme-app__meta { font-size: 12px; color: rgba(255,255,255,0.5); }
.kme-app__status { height: 36px; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.18) !important; background: #141414 !important; color: #fff !important; font-size: 13px !important; padding: 0 8px !important; margin: 0 !important; max-width: 130px; }
.kme-app__qa { margin-bottom: 8px; }
.kme-app__q { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.kme-app__a { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; word-break: break-word; }
.kme-app__a a { color: #52bece !important; }
.kme-app__actions { margin-top: 8px; }
.kme-apps__mode { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.kme-apps__mode label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin: 0; cursor: pointer; }
.kme-apps__mode input { accent-color: #ff66c4; width: 18px; height: 18px; margin: 1px 0 0; }
.kme-apps__mode small { color: rgba(255,255,255,0.45); word-break: break-all; }
.kme-fb { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.kme-fb__head { display: flex; align-items: center; gap: 6px; }
.kme-fb__head .kme-fb__type { flex: 1; height: 38px; padding: 0 8px !important; }
.kme-fb__req { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin: 0; white-space: nowrap; }
.kme-fb__req input { accent-color: #ff66c4; margin: 0; }
.kme-fb__mv, .kme-fb__del { appearance: none; -webkit-appearance: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #fff; font-size: 16px; cursor: pointer; padding: 0; flex-shrink: 0; }
.kme-fb__mv:disabled { opacity: .3; }
.kme-fb__del { color: #ff8da1; }
.kme-fb__add { margin-top: 4px; }
.kme-apps__save { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.kme-apps__saved { font-size: 13px; color: #3ecf8e; }
/* ===== END: PROJECT kulturella-match-engine — søknadsskjema + innboks ===== */

/* PROJECT: kulturella-match-engine — gratisgrenser (aktiviteter/invitasjoner) */
.kme-limit { background: rgba(255,150,214,0.08); border: 1px solid rgba(255,150,214,0.35); border-radius: 14px; padding: 16px; color: rgba(255,255,255,0.85); font-size: 14px; margin: 0 0 16px; }
.kme-limit strong { color: #fff; }
.kme-limit p { margin: 8px 0 0; }
.kme-limit a:not(.kme-job-btn) { color: #ff96d6 !important; }
.kme-limit--inline { padding: 10px 12px; font-size: 13px; }

/* PROJECT: kulturella-match-engine — fargefiks: knapper/tekst i samme stil som resten (Søk nå-pillen, mørk bakgrunn).
   Høy spesifisitet fordi .jb-single-main a { color: #52bece !important } ellers farger knappeteksten. */
body .kme-job-btn, body .jb-single-main a.kme-job-btn, body .kme-cands a.kme-job-btn {
    border-radius: 50px !important; font-weight: 700 !important; padding: 10px 20px !important; font-size: 14px !important; text-decoration: none !important;
}
body .kme-job-btn.kme-job-btn--primary, body .jb-single-main a.kme-job-btn.kme-job-btn--primary { background: #ff66c4 !important; color: #000 !important; border-color: #ff66c4 !important; }
body .kme-job-btn.kme-job-btn--blue, body .jb-single-main a.kme-job-btn.kme-job-btn--blue { background: #52bece !important; color: #000 !important; border-color: #52bece !important; }
body .kme-job-btn.kme-job-btn--ghost, body .jb-single-main a.kme-job-btn.kme-job-btn--ghost { background: transparent !important; color: rgba(255,255,255,0.85) !important; border: 1px solid rgba(255,255,255,0.25) !important; }
body .kme-job-btn:hover { filter: brightness(1.08); }
.kme-job-owner { background: #1a1a1a; border-color: rgba(82,190,206,0.35); color: rgba(255,255,255,0.85); }
.kme-job-owner__actions .kme-job-btn { flex: 1 1 auto; justify-content: center; }
.kme-cands, .kme-cands p, .kme-cands label, .kme-cands span { color: rgba(255,255,255,0.85); }
body .kme-cands .kme-cands__title { color: #fff !important; }
body .kme-cands a.kme-cands__back { color: #52bece !important; }
.kme-cands__period span, .kme-cands__count { color: rgba(255,255,255,0.55) !important; }
.kme-cands__filters { background: #1a1a1a; }
.kme-cands__tab { color: rgba(255,255,255,0.8) !important; }
.kme-cands__tab.is-active { color: #000 !important; }
.kme-cand__invite, .kme-cands__selbtn, .kme-cands-modal__send { border-radius: 50px !important; color: #000 !important; }
.kme-cand__bar { padding: 0 2px; }
.kme-apps__stat { background: #1a1a1a; }
.kme-app { background: #1a1a1a; }
.kme-app__name, .kme-apps__stat strong { color: #fff !important; }

/* PROJECT: kulturella-match-engine — kandidatliste som smale rader + datovelger/avkrysning i Kulturella-stil */
.kme-rows { display: flex; flex-direction: column; gap: 8px; }
.kme-row { display: grid; grid-template-columns: auto 56px minmax(0, 1fr) auto; align-items: start; gap: 12px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px; cursor: pointer; }
.kme-row:hover { border-color: rgba(255,102,196,0.35); }
.kme-row__pick { margin: 0 !important; padding-top: 18px; display: flex; }
.kme-row__avatar { width: 56px; height: 56px; border-radius: 50% !important; object-fit: cover; border: 2px solid #ff66c4; box-sizing: border-box; }
.kme-row__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kme-row__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body .kme-cands a.kme-row__name { color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none !important; line-height: 1.25; }
.kme-row__score { font-size: 11px; font-weight: 800; color: #000 !important; background: linear-gradient(90deg, #ff96d6, #52bece); border-radius: 50px; padding: 2px 8px; }
.kme-row__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.kme-row__meta span { color: rgba(255,255,255,0.6) !important; }
.kme-row__avail { display: inline-flex; align-items: center; gap: 5px; }
.kme-row__avail .kme-avail-dot { width: 8px; height: 8px; }
.kme-cands .kme-row__refs { color: #ffd76a !important; font-weight: 700; }
.kme-cands .kme-row__bio { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.8) !important; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kme-row__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.kme-cands .kme-row__tags span { font-size: 11px; font-weight: 600; color: #ff96d6 !important; border: 1px solid rgba(255,102,196,0.35); border-radius: 50px; padding: 1px 8px; }
.kme-row__invite { align-self: center; appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 50px !important; border: none; background: #ff66c4; color: #000 !important; cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: normal; }
@media (max-width: 520px) {
  .kme-row { grid-template-columns: auto 48px minmax(0, 1fr); gap: 10px; }
  .kme-row__avatar { width: 48px; height: 48px; }
  .kme-row__invite { grid-column: 3; justify-self: start; margin-top: 4px; }
}
/* Rosa avkrysning (samme stil overalt på kandidatsiden) */
.kme-cands input[type=checkbox] { -webkit-appearance: none !important; appearance: none !important; width: 22px !important; height: 22px !important; min-width: 22px; margin: 0 !important; border: 2px solid #ff66c4 !important; border-radius: 6px !important; background: transparent !important; cursor: pointer; position: relative; display: inline-block; vertical-align: middle; }
.kme-cands input[type=checkbox]:checked { background: #ff66c4 !important; }
.kme-cands input[type=checkbox]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #000; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* Datovelger: samme høyde/stil som de andre feltene */
.kme-cands__period { flex-wrap: wrap; }
.kme-cands__period > span:first-child { flex-basis: 100%; }
.kme-cands__period > span:nth-child(3) { display: none; }
.kme-cands__filters input[type=date].kme-cands__in { -webkit-appearance: none !important; appearance: none !important; flex: 1 1 calc(50% - 4px); min-width: 0; height: 44px !important; line-height: 44px !important; display: flex; align-items: center; text-align: left; color-scheme: dark; }
.kme-cands__filters input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.kme-cands__filters input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.8); opacity: .8; }
.kme-cands .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* PROJECT: kulturella-match-engine — profilbilde som kartmarkør (kantfarge = ledighet) */
.kme-map-person { background: none !important; border: none !important; }
.kme-map-person span { display: block; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #52bece; box-sizing: border-box; overflow: hidden; background: #1a1a1a; box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.kme-map-person img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 50%; max-width: none !important; }
.kme-map-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin-top: 8px; }
/* PROJECT: kulturella-match-engine — søkefelt + Filter-knapp, filtre kollapset */
.kme-cands__searchrow { display: flex; gap: 8px; margin-bottom: 10px; }
.kme-cands__searchrow .kme-cands__search { flex: 1 1 auto; min-width: 0; height: 44px; border-radius: 50px !important; border: 1px solid rgba(255,255,255,0.15) !important; background: #1a1a1a !important; color: #fff !important; padding: 0 16px !important; font-size: 14px !important; margin: 0 !important; }
.kme-cands__ftoggle { appearance: none; -webkit-appearance: none; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.18); background: #1a1a1a; color: rgba(255,255,255,0.85) !important; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: normal; }
.kme-cands__ftoggle.is-open { border-color: #ff66c4; color: #ff66c4 !important; }
.kme-cands__fcount { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 50px; background: #ff66c4; color: #000 !important; font-size: 11px; font-weight: 800; padding: 0 5px; }
.kme-cands__fcount[hidden] { display: none; }
.kme-cands__filters[hidden] { display: none !important; }
/* PROJECT: kulturella-match-engine — «Se ledighet»-knapp (kalenderen er sammenlagt som standard) */
.kme-avail__summary { margin-bottom: 0; }
.kme-avail__summary + * { margin-top: 14px; }
.kme-avail__toggle-btn { appearance: none; -webkit-appearance: none; margin-left: auto; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 50px; border: 1px solid rgba(82,190,206,0.55); background: rgba(82,190,206,0.12); color: #52bece !important; cursor: pointer; text-transform: none; letter-spacing: normal; line-height: 1.2; white-space: nowrap; }
.kme-avail__toggle-btn.is-open { background: #52bece; color: #000 !important; border-color: #52bece; }
/* PROJECT: kulturella-match-engine — radius-slider, zoomknapper og «Deg»-markør på kandidatkartet */
.kme-cands__radius { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.kme-cands__radius[hidden] { display: none; }
.kme-cands__radius-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.kme-cands__radius-head span { color: rgba(255,255,255,0.75) !important; }
.kme-cands__radius-val { font-size: 15px; color: #fff !important; background: linear-gradient(90deg, #52bece, #ff66c4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kme-cands__center { appearance: none; -webkit-appearance: none; background: transparent !important; border: none !important; border-bottom: 1px dashed rgba(255,102,196,0.6) !important; color: #ff96d6 !important; font: inherit; font-weight: 700; padding: 0 2px !important; margin: 0 !important; height: auto !important; border-radius: 0 !important; cursor: pointer; }
.kme-cands__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #52bece, #ff66c4); outline: none; margin: 6px 0; border: none !important; padding: 0 !important; }
.kme-cands__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid #ff66c4; box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor: pointer; }
.kme-cands__slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid #ff66c4; cursor: pointer; }
.kme-cands__radius.is-off .kme-cands__slider { opacity: .35; }
.kme-cands__radius-foot { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.kme-cands__radius-foot button { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: rgba(255,255,255,0.8) !important; cursor: pointer; text-transform: none; letter-spacing: normal; }
.kme-cands__radius-foot button.is-active { border-color: #ff66c4; color: #ff66c4 !important; }
.kme-cands__radius-foot button[hidden] { display: none; }
/* Leaflet-zoom: synlige +/− i mørk stil (temaets lenkefarger skjulte dem) */
.kme-cands__map .leaflet-bar { border: 1px solid rgba(255,255,255,0.2) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; border-radius: 12px !important; overflow: hidden; }
.kme-cands__map .leaflet-bar a, .kme-cands__map .leaflet-bar a:hover { width: 38px !important; height: 38px !important; line-height: 38px !important; font-size: 22px !important; font-weight: 700 !important; background: #1a1a1a !important; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; text-decoration: none !important; display: block !important; text-align: center !important; }
.kme-cands__map .leaflet-bar a:last-child { border-bottom: none !important; }
.kme-cands__map .leaflet-bar a.leaflet-disabled { color: rgba(255,255,255,0.3) !important; }
.kme-cands__map .leaflet-control-attribution { background: rgba(0,0,0,0.55) !important; color: rgba(255,255,255,0.6) !important; }
.kme-cands__map .leaflet-control-attribution a { color: rgba(255,255,255,0.75) !important; }
.kme-map-me { background: none !important; border: none !important; }
.kme-map-me span { display: flex; align-items: center; justify-content: center; width: 40px; height: 22px; border-radius: 50px; background: linear-gradient(90deg, #52bece, #ff66c4); color: #000; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 2px 8px rgba(0,0,0,0.5); }
/* PROJECT: kulturella-match-engine — «Ny aktivitet»: søknadsmåte + skjemaoppsett før publisering */
.kme-apply-choice { background: #1a1a1a; border: 1px solid rgba(255,102,196,0.35); border-radius: 14px; padding: 14px; margin: 6px 0 16px; }
.kme-apply-choice__title { font-weight: 800; font-size: 14px; color: #fff; margin-bottom: 10px; }
.kme-apply-choice__opt { display: flex !important; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); margin: 0 0 8px !important; cursor: pointer; }
.kme-apply-choice__opt:last-child { margin-bottom: 0 !important; }
.kme-apply-choice__opt input { accent-color: #ff66c4; width: 18px; height: 18px; margin: 2px 0 0 !important; flex-shrink: 0; }
.kme-apply-choice__opt strong { display: block; color: #fff; font-size: 14px; }
.kme-apply-choice__opt small { display: block; color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 2px; }
.kme-apply-choice__opt:has(input:checked) { border-color: #ff66c4; background: rgba(255,102,196,0.08); }
.kme-apply-setup { padding: 16px !important; margin: 20px 0 !important; background: #141414; border: 1px solid rgba(255,102,196,0.35); border-radius: 16px; max-width: none !important; }
.kme-apply-setup__head h3 { margin: 2px 0 12px !important; color: #fff !important; font-size: 20px !important; }
.kme-apply-setup__step { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #ff66c4; }
/* PROJECT: kulturella-match-engine — radius: full bredde slider + pill-switch for midtpunkt */
.kme-cands__radius .kme-cands__slider { display: block; width: 100% !important; max-width: none !important; min-width: 0; box-sizing: border-box; margin: 12px 0 8px !important; }
.kme-cands__pillswitch { display: inline-flex; padding: 3px; border-radius: 50px; background: #0f0f0f; border: 1px solid rgba(255,255,255,0.12); gap: 2px; }
.kme-cands__pill { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 50px; border: none; background: transparent; color: rgba(255,255,255,0.7) !important; cursor: pointer; text-transform: none; letter-spacing: normal; line-height: 1.2; }
.kme-cands__pill.is-active { background: linear-gradient(90deg, #ff96d6, #52bece); color: #000 !important; }
.kme-cands__pill:disabled { opacity: .35; cursor: default; }
/* PROJECT: kulturella-match-engine — søknadsvinduet: .km-edit-modal { display:flex } overstyrte [hidden] → vinduet sto alltid åpent */
.km-edit-modal.kme-apply[hidden] { display: none !important; }
.kme-cands__done { background: rgba(62,207,142,0.1); border: 1px solid rgba(62,207,142,0.45); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; color: rgba(255,255,255,0.9) !important; }
.kme-cands__done strong { color: #fff; }
body .kme-cands .kme-cands__done a { color: #52bece !important; }
/* PROJECT: kulturella-match-engine — søknadsskjema: synlige avkrysnings-/radioknapper (temaet skjuler standardkontrollene) */
.kme-apply input[type=checkbox], .kme-apply input[type=radio] { -webkit-appearance: none !important; appearance: none !important; width: 22px !important; height: 22px !important; min-width: 22px; margin: 0 !important; border: 2px solid #ff66c4 !important; background: transparent !important; cursor: pointer; position: relative; display: inline-block !important; vertical-align: middle; opacity: 1 !important; box-shadow: none !important; }
.kme-apply input[type=checkbox] { border-radius: 6px !important; }
.kme-apply input[type=radio] { border-radius: 50% !important; }
.kme-apply input[type=checkbox]:checked { background: #ff66c4 !important; }
.kme-apply input[type=checkbox]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #000; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.kme-apply input[type=radio]:checked::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #ff66c4; }
.kme-apply__opt:has(input:checked) { color: #fff; }
/* PROJECT: kulturella-match-engine — søknadsstatus: pill-velger ved «Send melding» + statuskort for søkeren */
.kme-app__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kme-app__statuswrap { position: relative; display: inline-flex; margin: 0 !important; }
.kme-app__statuswrap::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; color: inherit; }
.kme-app .kme-app__status { -webkit-appearance: none !important; appearance: none !important; height: auto !important; max-width: none !important; min-width: 130px; padding: 10px 36px 10px 16px !important; border-radius: 50px !important; font: inherit; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; cursor: pointer; background: transparent !important; border: 1px solid rgba(255,255,255,0.25) !important; color: #fff !important; margin: 0 !important; }
.kme-app__statuswrap--new { color: #fff; }
.kme-app__statuswrap--review { color: #f5c451; }
.kme-app__statuswrap--review .kme-app__status { border-color: rgba(245,196,81,0.6) !important; color: #f5c451 !important; }
.kme-app__statuswrap--shortlist { color: #52bece; }
.kme-app__statuswrap--shortlist .kme-app__status { border-color: #52bece !important; color: #52bece !important; }
.kme-app__statuswrap--accepted { color: #000; }
.kme-app__statuswrap--accepted .kme-app__status { background: #3ecf8e !important; border-color: #3ecf8e !important; color: #000 !important; }
.kme-app__statuswrap--rejected { color: #ff8da1; }
.kme-app__statuswrap--rejected .kme-app__status { border-color: rgba(255,92,122,0.6) !important; color: #ff8da1 !important; }
.kme-app__status option { background: #1a1a1a; color: #fff; }
.kme-job-status { border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; font-size: 14px; background: #1a1a1a; border: 1px solid rgba(82,190,206,0.45); color: rgba(255,255,255,0.88); }
.kme-job-status--accepted { border-color: #3ecf8e; background: rgba(62,207,142,0.1); }
.kme-job-status--rejected { border-color: rgba(255,92,122,0.5); }
.kme-job-status__title { font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #52bece; margin-bottom: 4px; }
.kme-job-status__text strong { color: #fff; }
.kme-job-status__steps { list-style: none; display: flex; gap: 4px; margin: 12px 0 8px !important; padding: 0 !important; }
.kme-job-status__steps li { flex: 1; font-size: 11px; color: rgba(255,255,255,0.45); text-align: center; margin: 0 !important; }
.kme-job-status__steps li span { display: block; height: 5px; border-radius: 5px; background: rgba(255,255,255,0.12); margin-bottom: 5px; }
.kme-job-status__steps li.is-done span { background: linear-gradient(90deg, #52bece, #ff96d6); }
.kme-job-status__steps li.is-current { color: #fff; font-weight: 700; }
.kme-job-status__meta { font-size: 12px; color: rgba(255,255,255,0.5); }
/* PROJECT: kulturella-match-engine — kortere fremdriftstekster + «Mine aktiviteter»-liste over søknader */
.kme-job-status__steps li { font-size: 10px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kme-myapps { margin: 28px 0 10px; }
.kme-myapps__title { font-size: 16px !important; font-weight: 800 !important; color: #fff !important; margin: 18px 0 10px !important; }
body a.kme-myapps__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; text-decoration: none !important; color: #fff !important; }
body a.kme-myapps__row:hover { border-color: rgba(255,102,196,0.4); }
.kme-myapps__name { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 14px; min-width: 0; }
.kme-myapps__name small { font-weight: 500; font-size: 12px; color: rgba(255,255,255,0.55); }
.kme-myapps__pill { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.25); color: #fff; white-space: nowrap; }
.kme-myapps__pill--review { border-color: rgba(245,196,81,0.6); color: #f5c451; }
.kme-myapps__pill--shortlist { border-color: #52bece; color: #52bece; }
.kme-myapps__pill--accepted { background: #3ecf8e; border-color: #3ecf8e; color: #000; }
.kme-myapps__pill--rejected { border-color: rgba(255,92,122,0.6); color: #ff8da1; }
.kme-myapps__pill--invite { background: #ff66c4; border-color: #ff66c4; color: #000; }
/* PROJECT: kulturella-match-engine — søknadsvinduet på mobil/app: hold det fritt for appens toppfelt og bunnmeny (samme grep som chatten) */
@media (max-width: 700px) {
  .km-edit-modal.kme-apply { align-items: stretch !important; padding: calc(64px + env(safe-area-inset-top, 0px)) 10px calc(104px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; }
  .km-edit-modal.kme-apply .km-edit-modal-box { max-height: 100% !important; height: 100%; }
  .kme-apply .kme-apply__field textarea, .kme-apply .kme-apply__field input { font-size: 16px !important; } /* hindrer iOS-zoom ved fokus */
}
/* PROJECT: kulturella-match-engine — søknadsvindu: bare app-marger i appen, tastaturmodus, én hake */
@media (max-width: 700px) {
  .km-edit-modal.kme-apply { padding: 8px 8px !important; }
  .km-edit-modal.kme-apply.kme-apply--app { padding: calc(64px + env(safe-area-inset-top, 0px)) 10px calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
  .km-edit-modal.kme-apply.kme-apply--kb { padding: 6px !important; position: fixed !important; bottom: auto !important; }
  .kme-apply--kb .km-edit-modal-head { padding-top: 8px !important; padding-bottom: 8px !important; }
}
.kme-apply input[type=checkbox]::before, .kme-apply input[type=radio]::before { content: none !important; display: none !important; }
.kme-apply input[type=checkbox]:checked { background-image: none !important; }
/* Temaets egen ikonfont-hake (input[type=checkbox]:checked:before, "\e116") ga dobbel hake — skru den av der vi tegner vår egen */
.kme-cands input[type=checkbox]::before, .kme-cands input[type=radio]::before,
.kme-apply-choice input[type=radio]::before { content: none !important; display: none !important; }

/* ===== PROJECT: kulturella-match-engine — «Mine aktiviteter» i Kulturella-stil ===== */
.kme-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.kme-dash-head .kme-myapps__title { margin: 0 !important; }
.jb-job-dashboard .jb-job-dashboard-heading { display: none !important; }
.jb-job-dashboard .jb-job-dashboard-rows { display: flex; flex-direction: column; gap: 10px; }
.jb-job-dashboard .kme-dash-card { display: block !important; background: #1a1a1a !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 16px !important; padding: 14px 16px !important; margin: 0 !important; }
.kme-dash-card__top { display: flex; align-items: center; gap: 10px; }
.kme-dash-card__title { flex: 1; min-width: 0; font-weight: 800; font-size: 16px; line-height: 1.3; }
body .kme-dash-card__title a, .kme-dash-card__title span { color: #fff !important; text-decoration: none !important; }
.kme-dash-card__status { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); white-space: nowrap; }
.kme-dash-card__status--not-filled, .kme-dash-card__status--publish { border-color: rgba(62,207,142,0.5); color: #3ecf8e; }
.kme-dash-card__status--pending { border-color: rgba(245,196,81,0.6); color: #f5c451; }
.kme-dash-card__status--filled, .kme-dash-card__status--jb-expired { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); }
.kme-dash-card .jb-row-actions { position: relative; flex-shrink: 0; width: auto !important; }
.kme-dash-card__more { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex !important; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
.kme-dash-card__more .jb-dropdown { background: #1a1a1a !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important; overflow: hidden; }
.kme-dash-card__more .jb-dropdown li a, .kme-dash-card__more .jb-dropdown li span { color: #fff !important; padding: 10px 14px !important; display: block; }
.kme-dash-card__more .jb-dropdown li:hover { background: rgba(255,102,196,0.12) !important; }
.kme-dash-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: rgba(255,255,255,0.55); margin: 6px 0 12px; }
.kme-dash-card__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.kme-dash-card__stat { background: #121212; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 4px; text-align: center; }
.kme-dash-card__stat strong { display: block; font-size: 18px; color: #fff; line-height: 1.1; }
.kme-dash-card__stat span { font-size: 11px; color: rgba(255,255,255,0.55); }
.kme-dash-card__stat.is-hot { border-color: rgba(255,102,196,0.5); }
.kme-dash-card__stat.is-hot strong { color: #ff66c4; }
.kme-dash-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kme-dash-card__actions .kme-job-btn { flex: 1 1 140px; justify-content: center; }
.kme-dash-empty { background: #1a1a1a; border-radius: 16px; padding: 18px; color: rgba(255,255,255,0.75); }
body .kme-dash-empty a { color: #ff66c4 !important; }
/* PROJECT: kulturella-match-engine — ⋯-knappen på aktivitetskortene: fast, rund 36×36 (JobboardWP-CSS klemte ringen) */
.jb-job-dashboard .kme-dash-card .jb-row-actions { display: flex !important; align-items: center; justify-content: center; width: 36px !important; min-width: 36px; height: 36px; padding: 0 !important; margin: 0 !important; }
.jb-job-dashboard .kme-dash-card .kme-dash-card__more { box-sizing: border-box !important; width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.04); flex: 0 0 36px; }
.jb-job-dashboard .kme-dash-card .kme-dash-card__more > i { font-size: 14px !important; line-height: 1 !important; width: auto !important; height: auto !important; margin: 0 !important; color: rgba(255,255,255,0.85); }
.jb-job-dashboard .kme-dash-card .kme-dash-card__more:hover { border-color: #ff66c4 !important; }
.jb-job-dashboard .kme-dash-card .kme-dash-card__more .jb-dropdown { right: 0; left: auto !important; top: 42px !important; min-width: 180px; }

/* ===== PROJECT: kulturella-match-engine — Samarbeid: Liste/Kart ===== */
.km-mem-view { display: inline-flex; padding: 3px; border-radius: 50px; background: #0f0f0f; border: 1px solid rgba(255,255,255,0.12); gap: 2px; margin: 4px 0 14px; }
.km-mem-view__btn { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 20px; border-radius: 50px; border: none; background: transparent; color: rgba(255,255,255,0.75) !important; cursor: pointer; text-transform: none; letter-spacing: normal; line-height: 1.2; }
.km-mem-view__btn.is-active { background: linear-gradient(90deg, #ff96d6, #52bece); color: #000 !important; }
.km-mem-map { height: 65vh; min-height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px; }
.km-mem-map.is-loading { opacity: .6; }
.km-mem-map .leaflet-bar { border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; }
.km-mem-map .leaflet-bar a, .km-mem-map .leaflet-bar a:hover { width: 38px !important; height: 38px !important; line-height: 38px !important; font-size: 22px !important; font-weight: 700 !important; background: #1a1a1a !important; color: #fff !important; text-decoration: none !important; display: block !important; text-align: center !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
.km-mem-map .leaflet-control-attribution { background: rgba(0,0,0,0.55) !important; color: rgba(255,255,255,0.6) !important; }
.km-mem-map .leaflet-control-attribution a { color: rgba(255,255,255,0.75) !important; }
.km-mem-map .leaflet-popup-content { font-size: 13px; }
/* PROJECT: kulturella-match-engine — ledighetskalender: valgt periode i blått, ledige datoer i Kulturella-grønn (#e0ff56) */
.kme-avail .kme-avail__day--open { background: rgba(224,255,86,0.10) !important; color: #eaff9a !important; border-color: rgba(224,255,86,0.25) !important; }
.kme-avail .kme-avail__day--available { background: #e0ff56 !important; color: #0d0d0d !important; border-color: #e0ff56 !important; }
.kme-avail .kme-avail__day--busy { background: rgba(255,92,122,0.35) !important; color: #ffd3dc !important; border-color: rgba(255,92,122,0.6) !important; }
.kme-avail .kme-avail__day--sel { background: rgba(82,190,206,0.45) !important; border-color: #52bece !important; color: #fff !important; outline: none !important; }
.kme-avail .kme-avail__day--sel-start, .kme-avail .kme-avail__day--sel-end { background: #52bece !important; color: #000 !important; box-shadow: 0 0 0 2px rgba(82,190,206,0.35); }
.kme-avail .kme-avail__sw--available { background: #e0ff56 !important; }
.kme-avail .kme-avail__act--available { background: #e0ff56 !important; border-color: #e0ff56 !important; color: #0d0d0d !important; }
.kme-avail .kme-avail__dot--available, .kme-avail-dot--available { background: #e0ff56 !important; }
.kme-dash-card__label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 5px; }
.kme-dash-card__label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 5px; }
/* PROJECT: kulturella-match-engine — «Forleng fristen»-popup */
.km-edit-modal.kme-extend[hidden] { display: none !important; }
.kme-extend__title { font-weight: 800; color: #fff; margin: 0 0 12px; }
.kme-extend__label { display: block; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.8); margin-bottom: 6px; }
.kme-extend__date { width: 100%; box-sizing: border-box; height: 46px; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.18) !important; background: #141414 !important; color: #fff !important; padding: 0 12px !important; font-size: 16px !important; color-scheme: dark; -webkit-appearance: none; }
.kme-extend__quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.kme-extend__quick button { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 50px; border: 1px solid rgba(82,190,206,0.5); background: rgba(82,190,206,0.1); color: #52bece !important; cursor: pointer; text-transform: none; letter-spacing: normal; }
.kme-extend__note { font-size: 12px; color: rgba(255,255,255,0.55); margin: 4px 0 0; }
button.kme-job-btn { appearance: none; -webkit-appearance: none; font-family: inherit; }
/* PROJECT: kulturella-match-engine — «Utgått» i rød/oransje på aktivitetskortene */
.kme-dash-card .kme-dash-card__status--jb-expired { border-color: rgba(255,122,69,0.65) !important; color: #ff8a4c !important; background: rgba(255,122,69,0.1); }

/* ═══ PROJECT: kulturella-match-engine — kart i fullskjerm (km-map-kit.js): «Inviter personer» + Samarbeid ═══ */
html.kmk-fs-open, html.kmk-fs-open body { overflow: hidden !important; }
html.kmk-fs-open .mwai-chat, html.kmk-fs-open .um-notification-b, html.kmk-fs-open .kme-cands__sel { display: none !important; }
.kmk-fs { position: fixed; inset: 0; z-index: 100050; background: #0d0d0d; display: flex; flex-direction: column; --kmk-top: calc(env(safe-area-inset-top, 0px) + 12px); --kmk-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
/* Appen: native hamburger øverst til høyre (safe-area + 24, 48 høy) og flytende bunnmeny (≈96px) ligger over WebView-en */
html.kmk-app .kmk-fs { --kmk-top: calc(env(safe-area-inset-top, 0px) + 84px); --kmk-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
.kmk-fs > .kme-cands__map, .kmk-fs > .km-mem-map { flex: 1 1 auto; height: auto !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
.kmk-fs .leaflet-top.leaflet-right { top: var(--kmk-top); }
.kmk-fs .leaflet-bottom { bottom: calc(var(--kmk-bottom) + var(--kmk-sheet-h, 0px) + 6px); }
.kmk-fs__top { position: absolute; z-index: 1001; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 12px); display: flex; align-items: center; gap: 10px; pointer-events: none; }
html.kmk-app .kmk-fs__top { top: calc(env(safe-area-inset-top, 0px) + 28px); }
.kmk-fs__close { pointer-events: auto; appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); background: rgba(20,20,20,0.92); color: #fff !important; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.5); text-transform: none; letter-spacing: normal; }
.kmk-fs__title { font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
/* Kontroller: zoom + min posisjon + vis alle, store trykkflater */
.kmk-fs .leaflet-bar, .kme-cands__map .kmk-ctl, .km-mem-map .kmk-ctl { border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; }
.kmk-fs .leaflet-bar a, .kmk-fs .leaflet-bar a:hover { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; font-weight: 700 !important; background: #1a1a1a !important; color: #fff !important; text-decoration: none !important; display: flex !important; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
.kmk-fs .leaflet-bar a:last-child { border-bottom: none !important; }
.kmk-ctl a.is-busy svg { animation: kmk-spin 1s linear infinite; }
@keyframes kmk-spin { to { transform: rotate(360deg); } }
/* Bunnark (radius) */
.kmk-fs__sheet { position: absolute; z-index: 1001; left: 12px; right: 12px; bottom: var(--kmk-bottom); max-width: 520px; margin: 0 auto; background: rgba(22,22,22,0.96); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kmk-fs__handle { appearance: none; -webkit-appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: none; border: 0; color: rgba(255,255,255,0.75) !important; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.kmk-fs__handle i { font-style: normal; transition: transform .2s; }
.kmk-fs__sheet.is-collapsed .kmk-fs__handle i { transform: rotate(180deg); }
.kmk-fs__body { padding: 0 16px 14px; max-height: 42vh; overflow: auto; }
.kmk-fs__sheet.is-collapsed .kmk-fs__body { display: none; }
.kmk-fs__body .kme-cands__radius { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.kmk-rad__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 8px; }
.kmk-rad__head strong { font-size: 18px; color: #fff; }
.kmk-rad__slider { width: 100%; accent-color: #ff66c4; margin: 4px 0 10px; }
.kmk-rad__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.65); }
.kmk-rad__all { appearance: none; -webkit-appearance: none; padding: 7px 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #fff !important; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: normal; }
.kmk-rad__all.is-active { background: linear-gradient(90deg, #ff96d6, #52bece); color: #000 !important; border-color: transparent; }
.kmk-rad.is-off .kmk-rad__slider { opacity: .4; }
.kmk-rad__hint { margin: 8px 0 0; font-size: 12px; color: rgba(255,255,255,0.55); }
.kme-map-person.is-outside, .kme-map-cluster.is-outside { opacity: .35; }
.kmk-toast { position: absolute; z-index: 1002; left: 50%; transform: translateX(-50%); top: calc(var(--kmk-top, 12px) + 4px); max-width: 86vw; background: #1b1b1b; color: #fff; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 10px 14px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
body > .kmk-toast { position: fixed; top: 20px; }
/* Personboble */
.kmk-popup .leaflet-popup-content-wrapper { background: #1a1a1a; color: #fff; border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,0.6); padding: 0; }
.kmk-popup .leaflet-popup-content { margin: 0; width: auto !important; min-width: 280px; max-width: calc(100vw - 48px); font-size: 13px; line-height: 1.4; }
.kmk-popup .leaflet-popup-tip { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.14); }
.kmk-popup a.leaflet-popup-close-button { color: rgba(255,255,255,0.7) !important; width: 32px !important; height: 32px !important; font-size: 22px !important; line-height: 30px !important; top: 6px !important; right: 6px !important; }
.kmk-pop { padding: 16px; }
.kmk-pop__head { display: flex; align-items: center; gap: 12px; padding-right: 22px; }
.kmk-pop__av { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #ff66c4; overflow: hidden; background: #111; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.kmk-pop__av img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.kmk-pop__id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kmk-pop__id strong { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2; overflow-wrap: anywhere; }
.kmk-pop__score { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 50px; background: linear-gradient(90deg, rgba(255,150,214,0.22), rgba(82,190,206,0.22)); color: #fff; }
.kmk-pop__rows { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.kmk-pop__rows li { display: flex; gap: 8px; align-items: flex-start; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,0.82); line-height: 1.35 !important; }
.kmk-pop__rows li::before { display: none !important; }
.kmk-pop__rows li > span { flex: 0 0 20px; text-align: center; }
.kmk-pop__btns { display: flex; gap: 8px; margin-top: 14px; }
.kmk-pop__btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.22); background: transparent; color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.kmk-pop__btn--primary { background: linear-gradient(90deg, #ff96d6, #52bece); border-color: transparent; color: #000 !important; }
html.kmk-fs-open .kme-cands-toast { z-index: 100100 !important; }
/* Fullskjerm-kart: søk + forenklet filter under «Lukk kart», radius-slider over hele bredden */
.kmk-fs__tools { position: absolute; z-index: 1001; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 62px); display: flex; flex-direction: column; gap: 8px; }
html.kmk-app .kmk-fs__tools { top: calc(env(safe-area-inset-top, 0px) + 80px); }
.kmk-fs__search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 14px; border-radius: 50px; background: rgba(20,20,20,0.94); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 4px 16px rgba(0,0,0,0.5); max-width: 560px; }
.kmk-fs__search input { flex: 1 1 auto; min-width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #fff !important; font-size: 16px !important; box-shadow: none !important; outline: none; -webkit-appearance: none; }
.kmk-fs__search input::placeholder { color: rgba(255,255,255,0.45); }
.kmk-fs__search button { appearance: none; -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff !important; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.kmk-fs__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.kmk-fs__chips::-webkit-scrollbar { display: none; }
.kmk-fs__chip { appearance: none; -webkit-appearance: none; flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); background: rgba(20,20,20,0.92); color: #fff !important; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.4); text-transform: none; letter-spacing: normal; }
.kmk-fs__chip.is-active { background: linear-gradient(90deg, #ff96d6, #52bece); color: #000 !important; border-color: transparent; }
.kmk-fs .kmk-rad__slider, .kmk-fs .kme-cands__slider { display: block !important; width: 100% !important; max-width: none !important; box-sizing: border-box; }
.kmk-fs__body .kme-cands__radius, .kmk-fs__body .kmk-rad { width: 100%; }
/* Flervalgsliste (kulturfelt / kulturuttrykk) under filterknappene i fullskjerm */
.kmk-fs__chip.is-open { border-color: #ff96d6; }
.kmk-fs__menu { display: flex; flex-wrap: wrap; gap: 8px; max-height: 38vh; overflow-y: auto; padding: 12px; border-radius: 16px; background: rgba(20,20,20,0.97); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 10px 28px rgba(0,0,0,0.6); max-width: 560px; }
.kmk-fs__menu[hidden] { display: none; }
.kmk-fs__opt { appearance: none; -webkit-appearance: none; height: 34px; padding: 0 12px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #fff !important; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: normal; }
.kmk-fs__opt.is-active { background: linear-gradient(90deg, #ff96d6, #52bece); color: #000 !important; border-color: transparent; font-weight: 800; }
.kmk-fs__done { appearance: none; -webkit-appearance: none; flex-basis: 100%; height: 40px; margin-top: 4px; border-radius: 50px; border: 0; background: #fff; color: #000 !important; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-transform: none; letter-spacing: normal; }
/* «Mine matcher»: topp 20 fremhevet med gradient-ring og rangering */
.kme-map-top { position: relative; }
.kme-map-top span { width: 60px !important; height: 60px !important; border: 3px solid transparent !important; background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #ff96d6, #52bece) border-box !important; box-shadow: 0 0 0 3px rgba(255,150,214,0.35), 0 4px 14px rgba(0,0,0,0.7) !important; }
.kme-map-top b { position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 50px; background: #fff; color: #000; font-size: 12px; font-weight: 900; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.kmk-fs__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 230px); }
/* Verktøyfeltet dekker hele bredden: bare selve søkefeltet/knappene/lista skal ta trykk, resten går til kartet/boblen */
.kmk-fs__tools, .kmk-fs__chips { pointer-events: none; }
.kmk-fs__search, .kmk-fs__chip, .kmk-fs__menu { pointer-events: auto; }
.kmk-fs__chips { align-self: flex-start; max-width: 100%; }
/* Filterknappene brytes over flere linjer (sidelengs rulling virket ikke på mobil med trykk-gjennom-feltet) */
.kmk-fs__chips { flex-wrap: wrap; overflow: visible; }
/* Lang tittel («Oppdag kreative personer») brytes over to linjer i stedet for å kuttes ved hamburgeren */
.kmk-fs__title { white-space: normal; font-size: 14px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
/* Referanser: stjernerad i boblen + stjernemerke på kartmarkøren */
.kmk-pop__stars { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(245,196,81,0.10); font-size: 13px; color: rgba(255,255,255,0.8); }
.kmk-stars { letter-spacing: 1px; font-size: 16px; line-height: 1; }
.kmk-stars i { font-style: normal; color: rgba(255,255,255,0.22); }
.kmk-stars i.on { color: #f5c451; }
.kmk-pop__stars b { color: #fff; font-weight: 800; }
.kme-map-person { position: relative; }
.kmk-refbadge { position: absolute; left: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: #f5c451; color: #1a1a1a; font-style: normal; font-size: 13px; font-weight: 900; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #1a1a1a, 0 2px 6px rgba(0,0,0,0.6); }
.kme-map-top .kmk-refbadge { left: -2px; bottom: -2px; width: 22px; height: 22px; line-height: 22px; }
/* Samarbeids-veiviseren: tydelig «Velg dato» i tomt datofelt */
.kme-wizard-date { position: relative; display: block; cursor: pointer; }
.kme-wizard-date .kme-wizard-input { min-height: 48px; width: 100%; box-sizing: border-box; }
.kme-wizard-date__ph { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 15px; font-weight: 700; color: #ff96d6; background: inherit; }
.kme-wizard-date:not(.has-value) .kme-wizard-input { color: transparent; }
.kme-wizard-date:not(.has-value) .kme-wizard-input::-webkit-datetime-edit { color: transparent; }
.kme-wizard-date.has-value .kme-wizard-date__ph { display: none; }

/* PROJECT: kulturella-match-engine — «Følg» i kartboblen (egen rad under Se profil / Send melding) */
.kmk-pop__btns { flex-wrap: wrap; }
.kmk-pop__btn.kmk-pop__btn--follow { flex: 1 1 100%; border-color: rgba(255, 102, 196, 0.7); }
.kmk-pop__btn.kmk-pop__btn--follow.is-following { border-color: transparent; background: linear-gradient(90deg, #ff66c4, #52bece); color: #111 !important; }
.kmk-pop__btn.kmk-pop__btn--follow.is-busy { opacity: 0.6; pointer-events: none; }

/* ===== PROJECT: kulturella-match-engine — «Kom i gang»-omvisning (assets/js/km-tour.js) ===== */
.km-tour { position: fixed; inset: 0; z-index: 2147483500; pointer-events: none; }
.km-tour__pane { position: fixed; pointer-events: auto; background: rgba(8, 6, 20, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: all 0.25s ease; }
.km-tour.is-soft .km-tour__pane { opacity: 0; pointer-events: none; }
.km-tour__ring { position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 2px #b9a6ff, 0 0 18px 4px rgba(124, 92, 255, 0.75); transition: all 0.25s ease; animation: km-tour-pulse 1.8s ease-in-out infinite; }
@keyframes km-tour-pulse { 50% { box-shadow: 0 0 0 3px #d6caff, 0 0 26px 8px rgba(124, 92, 255, 0.55); } }
.km-tour__tip {
    position: fixed; pointer-events: auto; max-width: 420px; margin: 0 auto; padding: 14px 16px 12px;
    border-radius: 16px; color: #fff; background: linear-gradient(135deg, #7c5cff, #9b7bff);
    box-shadow: 0 14px 34px rgba(60, 30, 160, 0.55); font-family: inherit; transition: top 0.25s ease, bottom 0.25s ease;
}
.km-tour__tip.is-nudge { animation: km-tour-nudge 0.4s ease; }
@keyframes km-tour-nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.km-tour__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.km-tour__step { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.km-tour__pts { padding: 3px 9px; border-radius: 999px; background: #fff; color: #5b3ce0; font-size: 12px; font-weight: 800; white-space: nowrap; }
.km-tour__text { margin: 0 0 10px !important; font-size: 15px; line-height: 1.4; color: #fff !important; font-weight: 600; }
.km-tour__foot { display: flex; justify-content: space-between; align-items: center; }
.km-tour__skip { border: 0; background: none; padding: 4px 0; color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.km-tour__go { padding: 7px 14px; border-radius: 999px; background: #fff; color: #5b3ce0 !important; font-size: 13px; font-weight: 800; text-decoration: none !important; }
.km-tour__go[hidden] { display: none; }
.km-tour__arrow { position: absolute; width: 16px; height: 16px; background: #8a6bff; transform: rotate(45deg); }
.km-tour__tip.is-below .km-tour__arrow { top: -7px; }
.km-tour__tip:not(.is-below) .km-tour__arrow { bottom: -7px; }
.km-tour__toast {
    position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 90px); transform: translateX(-50%);
    padding: 10px 18px; border-radius: 999px; background: #111; color: #ff96d6; font-weight: 800; font-size: 15px;
    box-shadow: 0 0 0 2px #ff66c4, 0 10px 30px rgba(0, 0, 0, 0.5); white-space: nowrap; pointer-events: none;
}
.km-tour__toast[hidden] { display: none; }
.km-tour__toast.is-in { animation: km-tour-toast 3.2s ease forwards; }
@keyframes km-tour-toast { 0% { opacity: 0; transform: translate(-50%, -10px) scale(0.8); } 10%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }
.km-tour.is-done .km-tour__pane, .km-tour.is-done .km-tour__ring, .km-tour.is-done .km-tour__tip { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
@media (prefers-reduced-motion: reduce) { .km-tour__ring, .km-tour__toast.is-in, .km-tour__tip.is-nudge { animation: none; } }

/* PROJECT: kulturella-match-engine — boblen på Samarbeid-kartet: rad 1 Se profil (rosa) + Send melding (omriss),
   rad 2 Følg (blå) + liten bokmerke-knapp. «✓ Følger» = blått omriss, så de to aldri har samme farge. */
.kmk-pop__btns .kmk-pop__btn { flex: 1 1 40%; }
.kmk-pop__btn.kmk-pop__btn--profile { border-color: transparent; background: #ff66c4; color: #111 !important; }
.kmk-pop__btn.kmk-pop__btn--follow { flex: 1 1 60%; border-color: transparent; background: #52bece; color: #111 !important; }
.kmk-pop__btn.kmk-pop__btn--follow.is-following { border: 1px solid #52bece; background: transparent; color: #52bece !important; }
.kmk-pop__btn.kmk-pop__btn--follow.is-busy { opacity: 0.6; pointer-events: none; }
.kmk-pop__btn.kmk-pop__save { position: relative; flex: 0 0 44px; min-width: 44px; padding: 0; }
.kmk-pop__save::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 2h8v10l-4-2.5L3 12V2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 2h8v10l-4-2.5L3 12V2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kmk-pop__btn.kmk-pop__save.is-saved { border-color: transparent; background: #ff66c4; }
.kmk-pop__save.is-saved::before {
    background: #111;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 2h8v10l-4-2.5L3 12V2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 2h8v10l-4-2.5L3 12V2Z'/%3E%3C/svg%3E");
}
.kmk-pop__save.is-busy { opacity: 0.5; pointer-events: none; }

/* PROJECT: kulturella-match-engine — kompakt personboble (km-map-kit personPopup, 2026-09-29).
   Overstyrer de eldre boble-reglene lenger opp. Tekst ≥ 12 px, alle knapper 40 px høye. */
.kmk-popup .leaflet-popup-content { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.kmk-pop { padding: 14px 14px 12px; }
.kmk-pop__head { gap: 10px; padding-right: 26px; }
.kmk-pop__av { width: 52px; height: 52px; border-width: 2px; }
.kmk-pop__id strong { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kmk-pop__score { font-size: 12px; padding: 2px 8px; }
.kmk-pop__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kmk-pop__chips > span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.88); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kmk-pop__chips .kmk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kmk-pop__chip--stars { color: #f5c451 !important; }
.kmk-pop__chip--stars small { color: rgba(255, 255, 255, 0.6); font-size: 11px; }
.kmk-pop__fields { margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kmk-pop__btns, .kmk-pop__btns { flex-wrap: nowrap !important; gap: 6px; margin-top: 12px; }
.kmk-pop__btns .kmk-pop__btn { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 10px; font-size: 13px; }
.kmk-pop__btn.kmk-pop__btn--follow { flex: 1 1 auto; }
.kmk-pop__btns .kmk-pop__btn.kmk-pop__btn--icon { flex: 0 0 40px; width: 40px; min-width: 40px; padding: 0; font-size: 16px; }
.kmk-pop__btn.kmk-pop__save { flex: 0 0 40px; min-width: 40px; }

/* PROJECT: kulturella-match-engine — Inviter-knapp: bare gradientkant før invitasjon, full gradient + «Navn invitert ✓» etter */
.kme-row__invite.kme-cand__invite, .kmk-pop__btn.kme-map-invite {
    position: relative; isolation: isolate; border: 0 !important; background: transparent !important; color: #fff !important; padding: 8px 16px;
}
.kme-row__invite.kme-cand__invite::before, .kmk-pop__btn.kme-map-invite::before {
    content: ""; position: absolute; inset: 0; z-index: -1; padding: 2px; border-radius: inherit;
    background: linear-gradient(90deg, #ff66c4, #52bece);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.kme-row__invite.kme-cand__invite.is-invited, .kmk-pop__btn.kme-map-invite.is-invited {
    background: linear-gradient(90deg, #ff66c4, #52bece) !important; color: #111 !important; cursor: default; opacity: 1;
}
.kme-row__invite.kme-cand__invite.is-invited::before, .kmk-pop__btn.kme-map-invite.is-invited::before { display: none; }

/* PROJECT: kulturella-match-engine — «Se profil» ved siden av Inviter + profil-forhåndsvisning (km-candidates.js openProfile) */
.kme-row__actions { align-self: center; display: flex; flex-direction: column; gap: 6px; }
.kme-row__profile {
    appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px;
    border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: #fff; cursor: pointer; white-space: nowrap;
}
@media (max-width: 767px) {
    /* Knappene fikk ikke plass i tekstkolonnen (lange navn i «Inviter Øystein») og stakk ut av kortet:
       raden bruker nå hele bredden under avataren, og knappene deler plassen og kortes av med … */
    .kme-row__actions { grid-column: 2 / -1; flex-direction: row; justify-self: stretch; margin-top: 4px; min-width: 0; }
    .kme-row__actions .kme-row__profile { flex: 0 0 auto; }
    .kme-row__actions .kme-row__invite { grid-column: auto; margin-top: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.kmk-pop__btn.kme-map-profile { flex: 0 0 auto; }
.kme-pp {
    position: fixed; inset: 0; z-index: 2147483200; display: flex; align-items: center; justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: rgba(6, 6, 12, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: kme-pp-in 0.2s ease;
}
@keyframes kme-pp-in { from { opacity: 0; } to { opacity: 1; } }
.kme-pp__box {
    display: flex; flex-direction: column; width: 100%; max-width: 760px; height: 100%; max-height: 100%;
    border-radius: 22px; overflow: hidden; background: #111; border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); animation: kme-pp-up 0.25s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes kme-pp-up { from { transform: translateY(24px) scale(0.98); } to { transform: none; } }
.kme-pp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.kme-pp__head strong { font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kme-pp__x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.kme-pp__frame { position: relative; flex: 1 1 auto; min-height: 0; }
.kme-pp__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #111; opacity: 0; transition: opacity 0.25s; }
.kme-pp.is-loaded .kme-pp__frame iframe { opacity: 1; }
.kme-pp__spin { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: #ff66c4; animation: kme-pp-spin 0.8s linear infinite; }
.kme-pp.is-loaded .kme-pp__spin { display: none; }
@keyframes kme-pp-spin { to { transform: rotate(360deg); } }
.kme-pp__foot { display: flex; justify-content: center; padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.kme-pp__foot .kme-row__invite { min-width: 60%; padding: 12px 22px; font-size: 15px; }

.km-tour__next { margin-left: auto; padding: 7px 16px; border: 0; border-radius: 999px; background: #fff; color: #5b3ce0; font-size: 13px; font-weight: 800; cursor: pointer; }
.km-tour__next[hidden] { display: none; }
.km-tour__foot { gap: 10px; }

/* Lastesymbol i omvisningens «Et øyeblikk …» */
.km-tour__spin { display: inline-block; width: 16px; height: 16px; margin-right: 9px; vertical-align: -3px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: km-tour-spin 0.8s linear infinite; }
@keyframes km-tour-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .km-tour__spin { animation-duration: 2.4s; } }

/* ELLA-knappen skjules mens «Kom i gang»-omvisningen pågår (lå over tooltipen nederst) */
html.km-tour-on .mwai-window:not(.mwai-open) { display: none !important; }

/* Skrivemodus i omvisningen: kun ringen rundt feltet mens tastaturet er oppe */
.km-tour.is-typing .km-tour__pane, .km-tour.is-typing .km-tour__tip { opacity: 0; pointer-events: none; }

.km-tour__count { opacity: 0.75; font-weight: 700; white-space: nowrap; }

/* Sveip-steget i omvisningen: mørkleggingen stopper ikke rulling, tooltipen står fast nederst uten pil */
.km-tour.is-scroll .km-tour__pane { pointer-events: none; }
.km-tour__tip.no-arrow .km-tour__arrow { display: none; }

/* Omvisningen, seksjonsoversikten på Rediger profil: ingen mørklegging/blur, bare rosa kant på seksjonene */
.km-tour.is-sections .km-tour__pane, .km-tour.is-sections .km-tour__ring { display: none !important; }
html.km-tour-sections .km-ep-section { box-shadow: 0 0 0 2px #ff66c4, 0 0 14px 2px rgba(255, 102, 196, 0.35) !important; border-radius: 16px; transition: box-shadow 0.25s; }

/* Omvisningen: samme ikon som knappen brukeren skal trykke på, inne i teksten */
.km-tour__ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 3px; vertical-align: middle; border-radius: 9px; background: rgba(0, 0, 0, 0.28); color: #fff; }
.km-tour__ico svg { width: 20px; height: 20px; }

/* «Kom i gang»-velkomst før veiviseren (samme uttrykk som onboarding-v2: mørkt kort, rosa/blå gradient) */
.km-tour-welcome {
    position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(6, 6, 14, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: kme-pp-in 0.25s ease;
}
.km-tour-welcome__card {
    position: relative; width: 100%; max-width: 420px; padding: 28px 22px 18px; border-radius: 24px; text-align: center; color: #fff;
    background: radial-gradient(120% 80% at 0% 0%, rgba(255, 102, 196, 0.22), transparent 60%), radial-gradient(120% 80% at 100% 100%, rgba(82, 190, 206, 0.2), transparent 60%), #141414;
    border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); animation: kme-pp-up 0.3s cubic-bezier(.2, .9, .3, 1.1);
}
.km-tour-welcome__badge { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #ff96d6; }
.km-tour-welcome__card h2 { margin: 0 0 12px !important; font-size: 26px !important; line-height: 1.15 !important; font-weight: 800; color: #fff !important;
    background: linear-gradient(90deg, #ff96d6, #52bece); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.km-tour-welcome__card p { margin: 0 0 12px !important; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.82) !important; }
.km-tour-welcome__card p strong { color: #fff; }
.km-tour-welcome__start { display: block; width: 100%; margin-top: 18px; height: 52px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #ff66c4, #52bece); color: #111; font-size: 17px; font-weight: 800; cursor: pointer; }
.km-tour-welcome__later { display: block; width: 100%; margin-top: 6px; height: 44px; border: 0; background: none; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* PROJECT: kulturella-match-engine — chat-knappen i kartboblen bruker UMs .um-message-btn (åpner meldingsvinduet).
   UM legger på eget konvoluttikon (::before) og egen polstring/bredde — nullstilles så knappen ser ut som de andre ikonknappene. */
.kmk-pop__btn.kmk-pop__btn--icon.um-message-btn::before { content: none !important; display: none !important; }
.kmk-pop__btns .kmk-pop__btn.kmk-pop__btn--icon.um-message-btn { padding: 0 !important; margin: 0 !important; width: 40px !important; min-width: 40px; display: inline-flex !important; align-items: center; justify-content: center; font-size: 16px !important; text-align: center; }

/* PROJECT: kulturella-match-engine — verifiseringspanel ([km_verifisering], km-verify.js) */
.kme-vp { max-width: 980px; margin: 0 auto; padding: 24px 16px 60px; color: #fff; font-size: 15px; }
.kme-vp__head h1 { font-size: 1.9rem; margin: 0 0 6px; color: #fff; }
.kme-vp__head p { color: rgba(255,255,255,.7); margin: 0 0 16px; }
.kme-vp__guide, .kme-vp__tpl { background: #1a1a1a; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; }
.kme-vp__guide summary, .kme-vp__tpl summary { cursor: pointer; font-weight: 700; }
.kme-vp__guide ul { margin: 10px 0 0 18px; color: rgba(255,255,255,.8); line-height: 1.55; }
.kme-vp__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.kme-vp-stat { appearance: none; -webkit-appearance: none; text-align: left; background: #1a1a1a; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; color: #fff; cursor: pointer; font: inherit; }
.kme-vp-stat:hover { border-color: rgba(255,102,196,.5); }
.kme-vp-stat b { display: block; font-size: 1.6rem; line-height: 1.1; background: linear-gradient(90deg, #ff96d6, #52bece); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kme-vp-stat span { font-size: .8rem; color: rgba(255,255,255,.65); }
.kme-vp__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.kme-vp__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.kme-vp__tab { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: rgba(255,255,255,.8); cursor: pointer; text-transform: none; letter-spacing: normal; }
.kme-vp__tab.is-on { background: #ff66c4; border-color: #ff66c4; color: #000; }
.kme-vp__search { flex: 0 1 240px; min-width: 0; background: #141414 !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 50px !important; color: #fff !important; padding: 8px 14px !important; }
.kme-vp__list { display: flex; flex-direction: column; gap: 12px; }
.kme-vp-card { background: #1a1a1a; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px 16px; }
.kme-vp-card__top { display: flex; gap: 12px; align-items: center; }
.kme-vp-card__av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; border: 2px solid #ff96d6; }
.kme-vp-card__id { flex: 1 1 auto; min-width: 0; }
.kme-vp-card__name { color: #fff !important; font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.kme-vp-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kme-vp-card__tags span { font-size: 11.5px; padding: 2px 9px; border-radius: 50px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.kme-vp-card__tags .is-paid { background: rgba(224,255,86,.16); color: #e0ff56; }
.kme-vp-card__tags .is-pending { background: rgba(255,102,196,.18); color: #ff96d6; }
.kme-vp-card__tags .is-verified { background: rgba(82,190,206,.18); color: #52bece; }
.kme-vp-card__tags .is-muted { background: transparent; color: rgba(255,255,255,.45); padding-left: 0; }
.kme-vp-card__score { flex: 0 0 74px; text-align: right; }
.kme-vp-card__score b { display: block; font-size: 1.05rem; }
.kme-vp-card__score i { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); margin-top: 4px; overflow: hidden; position: relative; }
.kme-vp-card__score i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #ff66c4, #52bece); }
.kme-vp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.kme-vp-chips .is-done { font-size: 12px; padding: 3px 10px; border-radius: 50px; background: rgba(82,190,206,.14); color: #8fe3ee; }
.kme-vp-missing { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,102,196,.07); border: 1px dashed rgba(255,102,196,.35); }
.kme-vp-missing.is-full { background: rgba(82,190,206,.08); border-color: rgba(82,190,206,.35); color: #8fe3ee; }
.kme-vp-missing__h { font-weight: 700; font-size: 13px; color: #ff96d6; margin-bottom: 4px; }
.kme-vp-missing ul { margin: 0 0 0 16px; padding: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.82); }
.kme-vp-card__status { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; font-size: 13px; }
.kme-vp-msg { color: #ffb45e; }
.kme-vp-msg.is-ok { color: #3ecf8e; }
.kme-vp-last { color: rgba(255,255,255,.5); }
.kme-vp-card__actions, .kme-vp__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.kme-vp-btn { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 50px !important; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff !important; cursor: pointer; text-decoration: none; text-transform: none; letter-spacing: normal; line-height: 1.2; }
.kme-vp-btn:disabled { opacity: .45; cursor: default; }
.kme-vp-btn--primary { background: linear-gradient(90deg, #ff66c4, #52bece); border: 0; color: #000 !important; }
.kme-vp-btn--ask { border-color: #ff96d6; color: #ff96d6 !important; }
.kme-vp-btn--ghost { border-color: transparent; color: rgba(255,255,255,.7) !important; }
.kme-vp-compose { margin: 12px 0 0; padding: 12px; border-radius: 12px; background: #121212; border: 1px solid rgba(255,255,255,.1); }
.kme-vp-compose__h { font-weight: 700; margin-bottom: 8px; }
.kme-vp-compose textarea, .kme-vp__tpl textarea { width: 100%; box-sizing: border-box; background: #0d0d0d !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important; padding: 10px 12px !important; font: inherit; font-size: 14px; line-height: 1.5; }
.kme-vp__tpl label { display: block; margin: 12px 0 0; font-weight: 700; font-size: 13px; }
.kme-vp__tpl label textarea { margin-top: 6px; font-weight: 400; }
.kme-vp__hint { font-size: 12.5px; color: rgba(255,255,255,.6); margin: 8px 0 0; }
.kme-vp__hint code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 5px; color: #ff96d6; }
.kme-vp-check { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.kme-vp__pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 18px 0; color: rgba(255,255,255,.6); font-size: 13px; }
.kme-vp-toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 2147483000; background: #1f1f24; color: #fff; padding: 10px 18px; border-radius: 50px; border: 1px solid rgba(82,190,206,.5); font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.kme-vp-toast.is-bad { border-color: #e5484d; }
@media (max-width: 767px) {
    .kme-vp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kme-vp__search { flex: 1 1 100%; }
    .kme-vp-card__score { flex-basis: 56px; }
}

/* PROJECT: kulturella-match-engine — «Mine aktiviteter» i samme uttrykk som den offentlige aktivitetsoversikten:
   rutenett, toppbilde med mørk overgang, status oppå bildet, typer/kategorier som chips. Statistikk og knapper beholdes. */
.jb-job-dashboard .jb-job-dashboard-rows { display: grid !important; grid-template-columns: 1fr; gap: 16px !important; }
@media (min-width: 760px) { .jb-job-dashboard .jb-job-dashboard-rows { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.jb-job-dashboard .kme-dash-card { padding: 0 !important; overflow: visible; box-shadow: 0 4px 24px rgba(0,0,0,0.4); transition: transform .2s ease, border-color .2s ease; display: flex !important; flex-direction: column; }
.jb-job-dashboard .kme-dash-card:hover { transform: translateY(-3px); border-color: rgba(82,190,206,0.3) !important; }
.kme-dash-card__img { position: relative; height: 130px; border-radius: 16px 16px 0 0; overflow: hidden; background: linear-gradient(135deg, #1a2535 0%, #0d1520 100%); flex: 0 0 auto; }
.kme-dash-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; max-width: none; }
.kme-dash-card__img-ov { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.70) 100%); }
.kme-dash-card__img .kme-dash-card__status { position: absolute; left: 12px; bottom: 10px; z-index: 1; background: rgba(13,13,13,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jb-job-dashboard .kme-dash-card__img .jb-row-actions { position: absolute !important; top: 10px; right: 10px; z-index: 3; }
.jb-job-dashboard .kme-dash-card__img .kme-dash-card__more { background: rgba(13,13,13,0.6) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kme-dash-card__img { overflow: visible; }
.kme-dash-card__img > img, .kme-dash-card__img-ov { border-radius: 16px 16px 0 0; }
.kme-dash-card__body { padding: 12px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.kme-dash-card__badges, .kme-dash-card__cats { display: flex; flex-wrap: wrap; gap: 5px; }
.kme-dash-card__badges { margin-bottom: 6px; }
.kme-dash-card__badges span { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: rgba(255,102,196,0.12); color: #ff96d6; border: 1px solid rgba(255,102,196,0.3); }
.kme-dash-card__cats { margin: 8px 0 2px; }
.kme-dash-card__cats span { font-size: 11px; padding: 3px 9px; border-radius: 100px; border: 1px solid rgba(82,190,206,0.35); color: #52bece; background: rgba(82,190,206,0.07); }
.kme-dash-card__body .kme-dash-card__actions { margin-top: auto; }
.kme-vp-card__tags .is-old { background: rgba(255,180,94,.14); color: #ffb45e; }

/* PROJECT: kulturella-match-engine — «Tilbyr det du ser etter: …» på personkort (KME_Scorer_NLP::reason_html) */
.kme-match-reason { display: inline-block; margin: 0 0 8px; padding: 4px 10px; border-radius: 50px; font-size: 12px; line-height: 1.35; background: rgba(224,255,86,.12); border: 1px solid rgba(224,255,86,.35); color: #e0ff56; }
.kme-match-reason strong { color: #fff; font-weight: 700; }
.kme-reel-info .kme-match-reason { display: block; width: fit-content; margin: 6px 0; }

/* PROJECT: kulturella-match-engine — «Legg Kulturella i kalenderen» (KME_Calendar_Feed::buttons_html) */
.kme-calsub__intro { color: rgba(255,255,255,.75); font-size: .92rem; line-height: 1.5; margin: 0 0 12px; }
.kme-calsub__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kme-calsub__btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 50px !important; border: 1px solid rgba(255,255,255,.2); background: #1a1a1a; color: #fff !important; font-weight: 700; font-size: 13px; text-decoration: none !important; cursor: pointer; font-family: inherit; line-height: 1.2; }
.kme-calsub__btn:hover { border-color: #ff66c4; }
.kme-calsub__other { margin-top: 12px; color: rgba(255,255,255,.75); font-size: .88rem; }
.kme-calsub__other summary { cursor: pointer; color: #ff96d6; font-weight: 600; }
.kme-calsub__copy { display: flex; gap: 8px; margin: 8px 0; }
.kme-calsub__copy input { flex: 1 1 auto; min-width: 0; background: #0d0d0d !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 50px !important; padding: 8px 12px !important; font-size: 12px !important; }
.kme-calsub__copybtn { flex: 0 0 auto; }
.kme-calsub__hint { font-size: .8rem; color: rgba(255,255,255,.5); margin: 4px 0 0; }
.kme-calsub__status { color: rgba(255,255,255,.6); font-size: .85rem; margin: 0 0 10px; }
.kme-calsub__synced { list-style: none; margin: 0 0 12px; padding: 0; font-size: .88rem; color: #3ecf8e; }
.kme-calsub__synced li { margin: 2px 0; }
.kme-calsub__synced strong { color: #fff; }
.kme-calsub__synced span { color: rgba(255,255,255,.5); }
.kme-calsub__btn.is-soon { opacity: .45; cursor: default; font-weight: 600; }
.kme-calimp { margin-top: 14px; }
.kme-calimp__open { width: 100%; }
.kme-calimp__modal { position: fixed; inset: 0; z-index: 2147483100; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.kme-calimp__modal[hidden] { display: none; }
.kme-calimp__box { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: #141414; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 20px 18px; color: #fff; }
.kme-calimp__box h3 { margin: 0 32px 10px 0; font-size: 1.15rem; color: #fff; }
.kme-calimp__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.kme-calimp__ical { margin-top: 16px; }
.kme-calimp__h { font-weight: 700; font-size: .92rem; margin: 14px 0 6px; }
.kme-calimp__msg { font-size: .88rem; color: #8fe3ee; margin: 4px 0 0; min-height: 1em; }
.kme-calimp__list { list-style: none; margin: 0; padding: 0; }
.kme-calimp__list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .88rem; }
.kme-calimp__rm { background: transparent; border: 1px solid rgba(229,72,77,.45); color: #ff8a8a; border-radius: 50px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 12px; }

/* PROJECT: kulturella-match-engine — bookingforespørsel (popup) og «Mine bookinger» */
.kme-book { position: fixed; inset: 0; z-index: 2147483100; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.kme-book[hidden] { display: none; }
.kme-book__box { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: #141414; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 22px 18px; color: #fff; display: flex; flex-direction: column; gap: 12px; }
.kme-book__box h3 { margin: 0 32px 0 0; color: #fff; font-size: 1.2rem; }
.kme-book__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer; }
.kme-book__svc { margin: -6px 0 0; color: #ff96d6; font-weight: 700; }
.kme-book__avail { margin: 0; font-size: .88rem; color: #8fe3ee; min-height: 0; }
.kme-book__avail:empty { display: none; }
.kme-book label, .kme-bk-card__form label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.85); }
.kme-book input, .kme-book textarea, .kme-bk-card__form input, .kme-bk-card__form textarea { background: #0d0d0d !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important; padding: 10px 12px !important; font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; color-scheme: dark; }
.kme-book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kme-book__msg { margin: 0; color: #ff8a8a; font-size: .88rem; }
.kme-book__msg:empty { display: none; }
.kme-book__send { display: flex; align-items: center; justify-content: center; padding: 13px 18px; border: 0; border-radius: 50px !important; background: linear-gradient(90deg, #ff66c4, #52bece); color: #000 !important; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none !important; font-family: inherit; }
.kme-book__send:disabled { opacity: .6; }
.kme-book__hint { margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.45; }
@media (max-width: 520px) { .kme-book__row { grid-template-columns: 1fr; } }

.kme-bk { max-width: 860px; margin: 0 auto; padding: 8px 0 60px; color: #fff; }
.kme-bk__tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.kme-bk__tab { padding: 9px 18px; border-radius: 50px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85) !important; text-decoration: none !important; font-weight: 700; font-size: 14px; }
.kme-bk__tab.is-on { background: #ff66c4; border-color: #ff66c4; color: #000 !important; }
.kme-bk__tab b { background: #e5484d; color: #fff; border-radius: 50px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }
.kme-bk__empty { background: #1a1a1a; border-radius: 16px; padding: 18px; color: rgba(255,255,255,.75); }
.kme-bk__list { display: flex; flex-direction: column; gap: 12px; }
.kme-bk-card { background: #1a1a1a; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px 16px; }
.kme-bk-card--sent, .kme-bk-card--countered { border-color: rgba(255,102,196,.45); }
.kme-bk-card--declined, .kme-bk-card--cancelled { opacity: .6; }
.kme-bk-card__top { display: flex; align-items: center; gap: 12px; }
.kme-bk-card__top img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; }
.kme-bk-card__top > div { flex: 1 1 auto; min-width: 0; }
.kme-bk-card__svc { color: #fff !important; font-weight: 800; text-decoration: none !important; }
.kme-bk-card__who { font-size: .85rem; color: rgba(255,255,255,.6); }
.kme-bk-card__who a { color: #ff96d6 !important; }
.kme-bk-card__status { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 50px; border: 1px solid rgba(255,255,255,.2); }
.kme-bk-card--sent .kme-bk-card__status, .kme-bk-card--countered .kme-bk-card__status { border-color: rgba(255,102,196,.6); color: #ff96d6; }
.kme-bk-card--confirmed .kme-bk-card__status, .kme-bk-card--completed .kme-bk-card__status { border-color: rgba(62,207,142,.5); color: #3ecf8e; }
.kme-bk-card__facts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .88rem; color: rgba(255,255,255,.8); }
.kme-bk-card__desc { margin: 10px 0 0; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.kme-bk-card__counter { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,102,196,.08); border: 1px dashed rgba(255,102,196,.4); font-size: .9rem; }
.kme-bk-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.kme-bk-btn { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 50px !important; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff !important; cursor: pointer; text-decoration: none !important; line-height: 1.2; }
.kme-bk-btn--accept, .kme-bk-btn--complete { background: linear-gradient(90deg, #ff66c4, #52bece); border: 0; color: #000 !important; }
.kme-bk-btn--decline, .kme-bk-btn--cancel { color: #ff8a8a !important; border-color: rgba(229,72,77,.45); }
.kme-bk-btn--ghost { border-color: transparent; color: rgba(255,255,255,.75) !important; }
.kme-bk-btn:disabled { opacity: .5; }
.kme-bk-card__form { margin: 12px 0 0; padding: 12px; border-radius: 12px; background: #121212; display: flex; flex-direction: column; gap: 10px; }

/* Kalender: tydelig bekreftelse + lesbar popup (2026-09-30) */
.kme-avail:not(.is-expanded) + .kme-calimp { display: none; }
.kme-calsub__synced { background: rgba(62,207,142,.10); border: 1px solid rgba(62,207,142,.45); border-radius: 12px; padding: 10px 12px !important; color: #fff !important; }
.kme-calsub__synced li { list-style: none !important; margin: 2px 0 !important; color: #fff !important; }
.kme-calsub__synced li::before, .kme-calsub__synced li::marker { content: none !important; }
.kme-calsub__ok { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #3ecf8e; color: #000; font-weight: 800; font-size: 12px; margin-right: 6px; }
.kme-calsub__synced strong { color: #3ecf8e !important; }
.kme-calsub__btn.is-on { border-color: #3ecf8e !important; color: #3ecf8e !important; background: rgba(62,207,142,.08); }
.kme-calimp__box, .kme-calimp__box p, .kme-calimp__box li, .kme-calimp__box summary { color: rgba(255,255,255,.85) !important; }
.kme-calimp__box h3, .kme-calimp__box strong, .kme-calimp__h { color: #fff !important; }
.kme-calimp__box .kme-calsub__other summary { color: #ff96d6 !important; }
.kme-calimp__box .kme-calsub__btn.is-soon { color: rgba(255,255,255,.7) !important; opacity: 1; border-style: dashed; }
.kme-calimp__box input::placeholder { color: rgba(255,255,255,.45) !important; }

/* Kalender: integrert kalender som grønn ✓-knapp, resten bak «Legg til en annen kalender» */
.kme-calsub__connected { display: flex; flex-direction: column; gap: 8px; }
.kme-calsub__done { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid #3ecf8e; background: rgba(62,207,142,.12); color: #fff; font-size: .95rem; }
.kme-calsub__done strong { color: #3ecf8e; }
.kme-calsub__done small { display: block; margin-top: 2px; color: rgba(255,255,255,.6); font-size: .8rem; }
.kme-calsub__done .kme-calsub__ok { width: 28px; height: 28px; font-size: 15px; flex: 0 0 28px; margin: 0; }
.kme-calsub__more { margin-top: 10px; }
.kme-calsub__more > summary { cursor: pointer; list-style: none; display: inline-flex; padding: 8px 14px; border-radius: 50px; border: 1px dashed rgba(255,255,255,.3); color: rgba(255,255,255,.85); font-weight: 700; font-size: 13px; }
.kme-calsub__more > summary::-webkit-details-marker { display: none; }
.kme-calsub__more[open] > summary { margin-bottom: 10px; }
.kme-avail .kme-calimp { margin: 10px 0 14px; }

/* PROJECT: kulturella-match-engine — digital avtale (KME_Agreements) */
.kme-bk-card__agr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,102,196,.08); border: 1px dashed rgba(255,102,196,.4); font-size: .9rem; }
.kme-bk-card__agr--signed { background: rgba(62,207,142,.10); border: 1px solid rgba(62,207,142,.45); color: #3ecf8e; }
.kme-agr { max-width: 820px; margin: 0 auto; padding: 8px 0 60px; }
.kme-agr__bar { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.kme-agr__doc { background: #fff; color: #111; border-radius: 16px; padding: 28px 26px; line-height: 1.6; font-size: 15px; }
.kme-agr__doc h1 { color: #111 !important; font-size: 1.5rem; margin: 0 0 4px; }
.kme-agr__doc h2 { color: #111 !important; font-size: 1.05rem; margin: 20px 0 6px; }
.kme-agr__doc p, .kme-agr__doc strong, .kme-agr__doc div { color: #111 !important; }
.kme-agr__muted, .kme-agr__doc .kme-agr__muted { color: #666 !important; font-size: .85em; }
.kme-agr__parties, .kme-agr__sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.kme-agr__party, .kme-agr__sig { border: 1px solid #ddd; border-radius: 12px; padding: 12px 14px; }
.kme-agr__role { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #888 !important; margin-bottom: 4px; }
.kme-agr__hash { word-break: break-all; }
.kme-agr__sign { margin: 18px 0 0; background: #141414; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; color: #fff; }
.kme-agr__sign h2 { margin: 0; color: #fff !important; font-size: 1.1rem; }
.kme-agr__sign label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.85); }
.kme-agr__sign label.kme-agr__check { flex-direction: row; align-items: center; gap: 10px; }
.kme-agr__sign input[type=text] { background: #0d0d0d !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important; padding: 10px 12px !important; font-size: 16px; }
@media (max-width: 600px) { .kme-agr__parties, .kme-agr__sigs { grid-template-columns: 1fr; } .kme-agr__doc { padding: 20px 16px; } }
@media print {
    body * { visibility: hidden !important; }
    .kme-agr__doc, .kme-agr__doc * { visibility: visible !important; }
    .kme-agr__doc { position: absolute; left: 0; top: 0; width: 100%; border-radius: 0; padding: 0; }
    body, html { background: #fff !important; }
}
.kme-calimp__flash { margin: 0 0 10px !important; padding: 10px 12px !important; border-radius: 12px; background: rgba(62,207,142,.12); border: 1px solid rgba(62,207,142,.45); color: #fff !important; font-size: .9rem !important; }
.kme-calimp__upgrade { display: flex !important; width: 100%; justify-content: space-between !important; gap: 10px; border: 1px solid transparent !important; background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(90deg, #ff66c4, #52bece) border-box !important; }
.kme-calimp__tag { flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 50px; background: linear-gradient(90deg, #ff66c4, #52bece); color: #000; }
.kme-calimp--locked .kme-calsub__hint { margin: 8px 2px 0; }
.kme-calsub__btn .kme-calimp__tag, a.kme-calimp__upgrade .kme-calimp__tag { color: #000 !important; }

/* PROJECT: kulturella-match-engine — ledighet som pille øverst til høyre på personkortets bilde */
.kme-person-card__avail--corner {
    position: absolute; top: 12px; right: 12px; z-index: 3; margin: 0;
    max-width: calc(100% - 110px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; color: #fff;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.kme-person-card__avail--corner .kme-avail-dot { width: 8px; height: 8px; }

/* PROJECT: kulturella-match-engine — tilkoblet kalender vist på «Hent opptatt-tid»-knappen */
.kme-calimp__open.has-sources { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kme-calimp__conn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: #3ecf8e; }
.kme-calimp__dot { width: 8px; height: 8px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 3px rgba(62,207,142,0.2); }
.kme-calimp__conn.is-error { color: #f5c451; }
.kme-calimp__conn.is-error .kme-calimp__dot { background: #f5c451; box-shadow: 0 0 0 3px rgba(245,196,81,0.2); }

/* PROJECT: kulturella-match-engine — Lukk flyter fast øverst til høyre når toppen av feeden er rullet ut av syne */
.kme-swipe-feed.kme-lukk-float .kme-reel-totop-btn {
    position: fixed !important;
    top: calc(var(--kme-top-inset, 0px) + env(safe-area-inset-top, 0px) + 14px) !important;
    right: 14px !important;
    z-index: 9995 !important;
}

/* PROJECT: kulturella-match-engine — ledighetsprikk øverst til venstre på profilbilder i kart og boble */
.kmk-avdot { position: absolute; left: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #1a1a1a, 0 1px 4px rgba(0,0,0,0.6); z-index: 2; }
.kme-map-top .kmk-avdot { width: 16px; height: 16px; left: 0; top: 0; }
.kmk-pop__avwrap { position: relative; flex-shrink: 0; display: block; }
.kmk-pop__avwrap .kmk-pop__av { display: block; }
.kmk-pop__avwrap .kmk-avdot { width: 16px; height: 16px; left: 1px; top: 1px; }

/* PROJECT: kulturella-match-engine — overskrift på Mine bookinger */
.kme-bk__head { margin-bottom: 18px; }
.kme-bk__sub { margin: 0; font-size: 14px; color: rgba(255,255,255,0.65); }

/* PROJECT: kulturella-match-engine — JobboardWPs egen radregel (.jb-job-dashboard .jb-job-dashboard-rows .jb-job-dashboard-row,
   høyere spesifisitet) la kortet i flex-rad: bildefeltet fikk 0 bredde, og ⋯-knappen og status havnet utenfor kortet. */
.jb-job-dashboard .jb-job-dashboard-rows .jb-job-dashboard-row.kme-dash-card { flex-direction: column !important; align-items: stretch !important; }
.jb-job-dashboard .jb-job-dashboard-rows .jb-job-dashboard-row.kme-dash-card > .kme-dash-card__img { width: 100%; align-self: stretch; }

/* PROJECT: kulturella-match-engine — Mine aktiviteter: fjern JobboardWPs lyse #ddd-ramme rundt kortrutenettet */
.jb-job-dashboard, .jb-job-dashboard .jb-job-dashboard-rows, .jb-job-dashboard .jb-job-dashboard-rows.isset-jobs { border: 0 !important; box-shadow: none !important; }
/* PROJECT: kulturella-match-engine — Mine aktiviteter: cerulean glød bak kortene (sterkere ved hover) */
.jb-job-dashboard .jb-job-dashboard-rows .jb-job-dashboard-row.kme-dash-card { box-shadow: 0 0 22px rgba(12, 180, 206, 0.28), 0 6px 24px rgba(0, 0, 0, 0.45) !important; border-color: rgba(82, 190, 206, 0.22) !important; }
.jb-job-dashboard .jb-job-dashboard-rows .jb-job-dashboard-row.kme-dash-card:hover { box-shadow: 0 0 30px rgba(12, 180, 206, 0.45), 0 8px 28px rgba(0, 0, 0, 0.5) !important; }
/* PROJECT: kulturella-match-engine — avrundede topphjørner på kortbildet (en eldre regel satte border-radius: 0 !important på bildet) */
.jb-job-dashboard .kme-dash-card .kme-dash-card__img,
.jb-job-dashboard .kme-dash-card .kme-dash-card__img > img,
.jb-job-dashboard .kme-dash-card .kme-dash-card__img-ov { border-radius: 16px 16px 0 0 !important; }

/* PROJECT: kulturella-match-engine — betaling på bookingkortene (fase 5) */
.kme-bk-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(82, 190, 206, 0.08); border: 1px solid rgba(82, 190, 206, 0.25); font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.kme-bk-pay--paid { background: rgba(62, 207, 142, 0.1); border-color: rgba(62, 207, 142, 0.35); color: #3ecf8e; font-weight: 700; }
.kme-bk-pay--muted { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }

/* PROJECT: kulturella-match-engine — avtalen i full bredde + PDF-knapper */
.kme-agr { max-width: none !important; width: 100%; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.kme-agr .kme-agr__doc { max-width: none !important; }
.kme-agr__pdfbtns { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* PROJECT: kulturella-match-engine — bookingskjema: tydelig send-knapp (Uncodes knappestil gjorde den nesten usynlig) + adresseforslag */
.kme-book .kme-book__send, .kme-book button.kme-book__send, .kme-book a.kme-book__send {
    display: block !important; width: 100% !important; margin: 14px 0 0 !important; padding: 14px 18px !important;
    background: #ff66c4 !important; color: #000 !important; border: 0 !important; border-radius: 50px !important;
    font-size: 15px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important;
    text-align: center; cursor: pointer; opacity: 1 !important; box-shadow: 0 0 18px rgba(255, 102, 196, 0.35);
}
.kme-book .kme-book__send:disabled { opacity: .6 !important; cursor: wait; }
.kme-book__addr { position: relative; display: block; }
.kme-book__sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 4px 0 0; padding: 6px; list-style: none; background: #1f1f24; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); max-height: 240px; overflow-y: auto; }
.kme-book__sugg li { padding: 10px 12px; border-radius: 8px; color: #fff; font-size: 14px; cursor: pointer; }
.kme-book__sugg li:hover { background: rgba(255, 102, 196, 0.16); }

/* PROJECT: kulturella-match-engine — bookingkort: «Send melding» med rosa kant; faktalinja uten temaets punkttegn */
.kme-bk-card .kme-bk-btn--msg { border: 1.5px solid #ff66c4 !important; color: #ff96d6 !important; border-radius: 50px !important; padding: 8px 16px !important; }
.kme-bk-card .kme-bk-card__facts { gap: 6px 18px; }
.kme-bk-card .kme-bk-card__facts li { list-style: none !important; margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; gap: 5px; }
.kme-bk-card .kme-bk-card__facts li::before, .kme-bk-card .kme-bk-card__facts li::marker { content: none !important; display: none !important; }
/* PROJECT: kulturella-match-engine — skillepunkt med jevn luft mellom dato · sted · budsjett */
.kme-bk-card .kme-bk-card__facts { gap: 6px 0; }
.kme-bk-card .kme-bk-card__facts li + li::before { content: '•' !important; display: inline-block !important; margin: 0 12px; color: rgba(255, 255, 255, 0.35); }

/* PROJECT: kulturella-match-engine — avtalevisningen går i hele skjermbredden (bryter ut av Uncodes innholdskolonne) */
.kme-agr {
    width: 100vw !important; max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(12px, 3vw, 40px) !important; padding-right: clamp(12px, 3vw, 40px) !important;
    box-sizing: border-box;
}
.kme-agr .kme-agr__doc { width: 100%; max-width: none !important; box-sizing: border-box; }
body.page-id-12879 .box-wrapper { overflow-x: clip !important; }
body.page-id-12879 .uncol, body.page-id-12879 .uncoltable, body.page-id-12879 .uncell, body.page-id-12879 .uncont { overflow: visible !important; }

/* PROJECT: kulturella-match-engine — bookingskjema på mobil: felt som ikke renner ut (iOS-dato/tid), to kolonner, kompakt */
.kme-book { background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.kme-book__box { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); gap: 10px; }
.kme-book__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px; }
.kme-book label { min-width: 0; gap: 5px; font-size: .82rem; }
.kme-book input, .kme-book textarea {
    min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 44px; margin: 0 !important;
    line-height: 1.3 !important; padding: 10px 12px !important; font-size: 16px !important; /* 16px: iOS zoomer ikke inn */
}
.kme-book input[type="date"], .kme-book input[type="time"] { -webkit-appearance: none; appearance: none; display: block; text-align: left; }
.kme-book input[type="date"]::-webkit-date-and-time-value, .kme-book input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.kme-book textarea { min-height: 96px; }
@media (max-width: 520px) {
    .kme-book__box { padding: 18px 14px; border-radius: 16px; }
    .kme-book__box h3 { font-size: 1.15rem !important; line-height: 1.25; }
}
/* PROJECT: kulturella-match-engine — «Fra kl. – Til kl.» smale og side om side */
.kme-book__times { display: flex; align-items: flex-end; gap: 8px; flex-wrap: nowrap; }
.kme-book__times label { flex: 0 0 auto; width: 118px; }
.kme-book__times input[type="time"] { width: 118px !important; }
.kme-book__dash { padding-bottom: 12px; color: rgba(255, 255, 255, 0.5); font-weight: 700; }
.kme-book__opt { padding-bottom: 13px; margin-left: 4px; font-size: .78rem; color: rgba(255, 255, 255, 0.45); }

/* PROJECT: kulturella-match-engine — referanse-popup (gjensidige referanser) */
.kme-ref { position: fixed; inset: 0; z-index: 2147483100; background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.kme-ref[hidden] { display: none; }
.kme-ref__box { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 24px); overflow-y: auto; background: #141414; border: 1px solid rgba(255, 102, 196, 0.35); border-radius: 18px; padding: 22px 18px 18px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; box-shadow: 0 0 28px rgba(255, 102, 196, 0.25); }
.kme-ref__x { position: absolute; top: 12px; right: 12px; padding: 6px 14px !important; border: 1px solid rgba(255, 102, 196, 0.6) !important; border-radius: 999px !important; background: rgba(255, 102, 196, 0.12) !important; color: #ff96d6 !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer; }
.kme-ref__av { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #ff66c4; margin-top: 8px; }
.kme-ref__box h3 { margin: 0 !important; color: #fff !important; font-size: 1.2rem !important; line-height: 1.3; }
.kme-ref__ctx { margin: 0; color: #8fe3ee; font-size: .88rem; font-weight: 700; }
.kme-ref__ctx:empty { display: none; }
.kme-ref__back { margin: 0; font-size: .9rem; color: #ff96d6; }
.kme-ref__stars { display: flex; gap: 6px; }
.kme-ref__stars button { background: none !important; border: 0 !important; padding: 2px !important; font-size: 34px !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.22) !important; cursor: pointer; }
.kme-ref__stars button.is-on { color: #f5c451 !important; }
.kme-ref label { align-self: stretch; display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: .85rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.kme-ref textarea { background: #0d0d0d !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 12px !important; padding: 10px 12px !important; font-size: 16px !important; width: 100%; box-sizing: border-box; }
.kme-ref__msg { margin: 0; color: #ff8a8a; font-size: .9rem; }
.kme-ref__msg.is-ok { color: #3ecf8e; font-weight: 700; }
.kme-ref__msg:empty { display: none; }
.kme-ref__send { align-self: stretch; padding: 13px 18px !important; border: 0 !important; border-radius: 50px !important; background: #ff66c4 !important; color: #000 !important; font-weight: 800 !important; font-size: 15px !important; cursor: pointer; box-shadow: 0 0 18px rgba(255, 102, 196, 0.35); }
.kme-ref__send:disabled { opacity: .6; }
.kme-ref__later { background: none !important; border: 0 !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 13px !important; cursor: pointer; text-decoration: underline; }
.kme-ref__hint { margin: 0; font-size: .78rem; color: rgba(255, 255, 255, 0.5); }
.kme-bk-ref { margin: 10px 0 0; }
.kme-ref-done { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #f5c451; }
.km-ref-ctx { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: #8fe3ee; }
.km-ref-mutual { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(62, 207, 142, 0.15); color: #3ecf8e; font-size: 10px; font-weight: 800; }
.km-tour-welcome__why { font-size: .88rem !important; color: rgba(255, 255, 255, 0.7) !important; margin-top: -4px !important; } /* PROJECT: kulturella-match-engine — kort forklaring av poengene */

/* PROJECT: kulturella-match-engine — «Referanser du kan gi» i Mine oppgaver */
.kme-ref-tasks { margin: 0 0 22px; padding: 16px; border-radius: 16px; background: #161616; border: 1px solid rgba(245, 196, 81, 0.35); box-shadow: 0 0 18px rgba(245, 196, 81, 0.12); }
.kme-ref-tasks__h { margin: 0 0 2px !important; font-size: 1.05rem !important; color: #fff !important; }
.kme-ref-tasks__sub { margin: 0 0 12px; font-size: .82rem; color: rgba(255, 255, 255, 0.6); }
.kme-ref-task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.kme-ref-task img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kme-ref-task__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kme-ref-task__txt strong { color: #fff; font-size: .95rem; }
.kme-ref-task__txt span { color: rgba(255, 255, 255, 0.6); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kme-ref-task .kme-ref-open { flex-shrink: 0; background: rgba(245, 196, 81, 0.15) !important; border: 1px solid rgba(245, 196, 81, 0.5) !important; color: #f5c451 !important; border-radius: 50px !important; padding: 8px 14px !important; font-weight: 700; }

/* PROJECT: kulturella-match-engine — ny startside per målgruppe ([km_start], kladd «Start (ny)») */
.km-start { max-width: 760px; margin: 0 auto; padding: 8px 0 24px; color: #fff; }
.km-start__hi { margin: 0 0 6px !important; color: #fff !important; font-size: clamp(1.5rem, 4vw, 2rem) !important; }
.km-start__line { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.km-start__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .km-start__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.km-start__card { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: 16px; background: #161616; border: 1px solid rgba(255, 150, 214, 0.25); text-decoration: none !important; color: #fff !important; box-shadow: 0 0 18px rgba(255, 150, 214, 0.12); transition: transform .15s ease, border-color .15s ease; }
.km-start__card:hover { transform: translateY(-2px); border-color: rgba(255, 150, 214, 0.6); }
.km-start__card strong { font-size: 1rem; }
.km-start__card span:last-child { font-size: .82rem; color: rgba(255, 255, 255, 0.65); line-height: 1.4; }
.km-start__card.is-soon { opacity: .55; }
.km-start__ic { font-size: 1.6rem; line-height: 1; }
.km-start__live { margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(82, 190, 206, 0.08); border: 1px solid rgba(82, 190, 206, 0.25); }
.km-start__live-h { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #52bece; margin-bottom: 6px; }
.km-start__live-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .95rem; }
.km-start__live-row a { color: #fff !important; text-decoration: none !important; }
.km-start__live-row span { color: rgba(255, 255, 255, 0.35); }
.km-start__avs { display: flex; margin-top: 10px; }
.km-start__avs img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #141414; margin-left: -8px; }
.km-start__avs img:first-child { margin-left: 0; }
.km-start__admin { margin: 14px 0 0; font-size: .8rem; color: #f5c451; }

/* PROJECT: kulturella-match-engine — ny landingsside og målgruppesider ([km_landing], kladd). Samme uttrykk som onboarding-v2. */
.kml { color: #fff; max-width: 1080px; margin: 0 auto; padding: 0 16px 40px; }
.kml h1 { color: #fff !important; font-size: clamp(2rem, 5.5vw, 3.4rem) !important; line-height: 1.08 !important; margin: 10px 0 18px !important; letter-spacing: -0.01em; }
.kml h2 { color: #fff !important; font-size: clamp(1.4rem, 3.4vw, 2rem) !important; margin: 0 0 16px !important; }
.kml-hero { padding: clamp(40px, 9vw, 96px) 0 32px; text-align: left; }
.kml-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,150,214,.18), rgba(82,190,206,.18)); border: 1px solid rgba(255,255,255,.14); font-size: .8rem; font-weight: 700; color: #ff96d6; }
.kml-bullets { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 1.15rem; color: rgba(255,255,255,.9); }
.kml-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.kml-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; border-radius: 50px; font-weight: 800; text-decoration: none !important; border: 1px solid rgba(255,255,255,.25); color: #fff !important; }
.kml-btn--pri { background: linear-gradient(90deg, #ff96d6, #52bece); border: 0; color: #000 !important; box-shadow: 0 0 24px rgba(255,150,214,.35); }
.kml-sec { padding: 32px 0; border-top: 1px solid rgba(255,255,255,.06); }
.kml-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kml-who__card, .kml-card, .kml-plan { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; background: #151519; border: 1px solid rgba(255,255,255,.08); color: #fff !important; text-decoration: none !important; }
.kml-who__card:hover { border-color: rgba(255,150,214,.55); box-shadow: 0 0 20px rgba(255,150,214,.2); }
.kml-who__card span, .kml-card p, .kml-plan p { margin: 0; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.72); }
.kml-who__card em { font-style: normal; font-weight: 700; font-size: .85rem; color: #ff96d6; margin-top: auto; }
.kml-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kml-card__ic { font-size: 1.8rem; }
.kml-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kml-steps li { counter-increment: s; padding: 18px; border-radius: 18px; background: #151519; border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 4px; }
.kml-steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff96d6, #52bece); color: #000; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.kml-steps span { color: rgba(255,255,255,.72); font-size: .92rem; }
.kml-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kml-plan__name { font-weight: 800; font-size: 1.05rem; }
.kml-plan__price { font-weight: 800; font-size: 1.25rem; color: #52bece; }
.kml-plan ul { margin: 6px 0 0; padding-left: 18px; color: rgba(255,255,255,.8); font-size: .88rem; }
.kml-faq details { padding: 14px 16px; border-radius: 14px; background: #151519; border: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
.kml-faq summary { cursor: pointer; font-weight: 700; }
.kml-faq p { margin: 8px 0 0; color: rgba(255,255,255,.75); }
.kml-quote blockquote { margin: 0; font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; color: #fff; border: 0; padding: 0; }
.kml-quote cite { display: block; margin-top: 6px; color: rgba(255,255,255,.55); font-style: normal; font-size: .85rem; }
.kml-final { text-align: center; }
.kml-final p { color: rgba(255,255,255,.75); }
.kml-small { margin-top: 14px; font-size: .85rem; }
.kml-small a { color: #52bece !important; }

/* PROJECT: kulturella-match-engine — landingsside v1.1: herobilde-karusell, større seksjoner med tydelig inndeling, tilbakeknapp (2026-10-01) */
.kml { padding-bottom: 0; }
.kml-hero--img { position: relative; isolation: isolate; min-height: min(82vh, 760px); display: flex; align-items: flex-end; padding: clamp(110px, 16vw, 180px) 0 clamp(48px, 8vw, 88px); }
.kml-hero--img::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
	background: linear-gradient(180deg, rgba(10,10,14,.35) 0%, rgba(10,10,14,.55) 45%, rgba(10,10,14,.96) 100%), linear-gradient(110deg, rgba(255,150,214,.38), rgba(82,190,206,.22) 70%); }
.kml-hero__bg { position: absolute; inset: 0 calc(50% - 50vw); z-index: -2; overflow: hidden; background: #111; }
.kml-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 6s ease; }
.kml-hero__img.is-on { opacity: 1; transform: scale(1); }
.kml-hero__in { position: relative; max-width: 760px; }
.kml-hero--img h1 { font-size: clamp(2.3rem, 6.5vw, 4.2rem) !important; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.kml-hero--img .kml-bullets { font-size: 1.2rem; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.kml-hero--img .kml-btn:not(.kml-btn--pri) { background: rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.kml-hero--img .kml-btn { padding: 16px 28px; font-size: 1.05rem; }
.kml-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 18px; padding: 8px 16px 8px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem;
	color: #fff !important; text-decoration: none !important; background: rgba(0,0,0,.4); border: 1px solid rgba(255,150,214,.55); backdrop-filter: blur(6px); }
.kml-back:hover { background: rgba(255,150,214,.25); }
.kml-hero__in .kml-back { display: flex; width: max-content; }
/* Seksjoner: mer luft, bånd i full bredde annenhver gang og en gradientlinje over hver overskrift */
.kml-sec { position: relative; padding: clamp(56px, 9vw, 104px) 0; border-top: 0; }
.kml-sec:nth-of-type(odd) { background: #111115; box-shadow: 0 0 0 100vmax #111115; clip-path: inset(0 -100vmax); }
.kml-sec h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem) !important; margin-bottom: 28px !important; }
.kml-sec h2::before { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin-bottom: 16px; background: linear-gradient(90deg, #ff96d6, #52bece); }
.kml-final h2::before { margin-left: auto; margin-right: auto; }
.kml-who, .kml-cards, .kml-steps, .kml-plans { gap: 18px; }
.kml-who__card, .kml-card, .kml-plan, .kml-steps li { padding: 24px; border-radius: 20px; }
.kml-who__card strong, .kml-card strong { font-size: 1.15rem; }
.kml-who__card span, .kml-card p, .kml-steps span { font-size: 1rem; }
.kml-sec:nth-of-type(odd) .kml-who__card, .kml-sec:nth-of-type(odd) .kml-card, .kml-sec:nth-of-type(odd) .kml-plan, .kml-sec:nth-of-type(odd) .kml-steps li, .kml-sec:nth-of-type(odd) .kml-faq details { background: #1b1b21; }
.kml-quote { text-align: center; }
.kml-quote blockquote { font-size: clamp(1.5rem, 4vw, 2.2rem); max-width: 760px; margin: 0 auto; }
.kml-final { padding-bottom: clamp(72px, 11vw, 128px); }
.kml-final .kml-btn--pri { padding: 16px 32px; font-size: 1.05rem; }
#hvem-er-du { scroll-margin-top: 80px; }
@media (max-width: 600px) { .kml-hero--img { min-height: 88vh; } .kml-hero--img .kml-btn { width: 100%; } }
/* PROJECT: kulturella-match-engine — appikoner (KME_Icons) på landingssidene */
.kml-bullets li { display: flex; align-items: center; gap: 12px; }
.kml-bullets .km-ikon { flex: 0 0 26px; width: 26px; height: 26px; color: #ff96d6; }
.kml-bullets li:nth-child(2) .km-ikon { color: #52bece; }
.kml-card__ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; font-size: 0;
	background: linear-gradient(135deg, rgba(255,150,214,.22), rgba(82,190,206,.22)); border: 1px solid rgba(255,255,255,.10); color: #ff96d6; margin-bottom: 6px; }
.kml-card__ic .km-ikon { width: 26px; height: 26px; }
.kml-card:nth-child(2n) .kml-card__ic { color: #52bece; }
/* PROJECT: kulturella-match-engine — ny startside: bredere innhold (følger kolonnen, som innholdet under) */
.km-start { max-width: none; }
.km-start__admin strong { color: #fff; }
/* PROJECT: kulturella-match-engine — landingsside: bredere innhold og romsligere «Hvem er du?» (3 + 2 kort) */
.kml { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
.kml-who { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.kml-who__card { grid-column: span 2; padding: 28px 26px 24px; gap: 10px; min-height: 240px; }
.kml-who__card:nth-child(n+4) { grid-column: span 3; }
.kml-who__card strong { font-size: 1.3rem; }
.kml-who__card span { font-size: 1.02rem; line-height: 1.55; }
.kml-who__card em { align-self: flex-start; margin-top: auto; padding: 11px 20px; border-radius: 999px; color: #fff; font-size: .92rem;
	background: linear-gradient(90deg, #ff96d6, #52bece); white-space: nowrap; }
.kml-who__card:nth-child(2n) .kml-card__ic { color: #52bece; }
@media (max-width: 900px) { .kml-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kml-who__card, .kml-who__card:nth-child(n+4) { grid-column: span 1; min-height: 0; } .kml-who__card:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .kml-who { grid-template-columns: 1fr; } .kml { padding-left: 16px; padding-right: 16px; } }
.kml-who__card .kml-card__ic { color: #ff96d6; line-height: 0; }
.kml-who__card:nth-child(2n) .kml-card__ic { color: #52bece; }
/* PROJECT: kulturella-match-engine — landingsside: sitat-slider fra brukerundersøkelsen */
.kml-qs { max-width: 900px; margin: 0 auto; }
.kml-qs__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kml-qs__track::-webkit-scrollbar { display: none; }
.kml-qs__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: 8px 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 190px; }
.kml-qs__slide blockquote { margin: 0 auto !important; padding: 0 !important; border: 0 !important; font-size: clamp(1.35rem, 3.4vw, 2.1rem) !important; line-height: 1.3 !important; font-weight: 700; color: #fff !important; max-width: 820px; }
.kml-qs__slide figcaption { margin-top: 14px; font-size: .9rem; color: rgba(255,255,255,.55); }
.kml-qs__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.kml-qs__dot { width: 10px; height: 10px; padding: 0 !important; border-radius: 50%; border: 0 !important; background: rgba(255,255,255,.22) !important; cursor: pointer; transition: width .25s ease, background .25s ease; }
.kml-qs__dot.is-on { width: 28px; border-radius: 6px; background: linear-gradient(90deg, #ff96d6, #52bece) !important; }
.kml-quote h2::before { margin-left: auto; margin-right: auto; }
/* PROJECT: kulturella-match-engine — «Se som»-bryter rett på ny startside (kun admin) */
.km-start__admin { margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(245,196,81,.45); background: rgba(245,196,81,.06); color: #f5c451; font-size: .85rem; }
.km-start__se-som { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.km-start__se-som a { padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem; text-decoration: none !important; color: #fff !important; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.km-start__se-som a:hover { border-color: rgba(245,196,81,.7); }
.km-start__se-som a.is-on { background: #f5c451; color: #111 !important; border-color: #f5c451; }
.km-start__se-som a.is-reset { background: transparent; color: #f5c451 !important; border-style: dashed; }
/* PROJECT: kulturella-match-engine — landingsside: mer luft mellom tekst og knapper */
.kml-final p { margin: 0 0 28px !important; font-size: 1.05rem; }
.kml-final .kml-btn--pri { margin-bottom: 8px; }
.kml-final .kml-small { margin: 28px 0 0 !important; }
.kml-hero--img .kml-bullets { margin-bottom: 36px; gap: 12px; }
.kml-ctas { gap: 14px; }
.kml-who__card em { margin-top: auto; }
.kml-who__card span:not(.kml-card__ic) { margin-bottom: 18px; }
.kml-plan ul { margin-bottom: 4px; }
/* PROJECT: kulturella-match-engine — landingsside: animerte farger i bakgrunnen som på /start/ (Uncode overlay_animated: kultur-rosa + #52bece på #141618) */
.kml { position: relative; isolation: isolate; }
.kml::before, .kml::after { content: ""; position: fixed; z-index: -3; pointer-events: none; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .32; will-change: transform; }
.kml::before { top: -20vmax; left: -15vmax; background: radial-gradient(circle, #ff96d6 0%, rgba(255,150,214,0) 65%); animation: kml-blob-a 22s ease-in-out infinite alternate; }
.kml::after { bottom: -25vmax; right: -15vmax; background: radial-gradient(circle, #52bece 0%, rgba(82,190,206,0) 65%); animation: kml-blob-b 26s ease-in-out infinite alternate; }
@keyframes kml-blob-a { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(35vw, 25vh) scale(1.15); } 100% { transform: translate(10vw, 55vh) scale(.9); } }
@keyframes kml-blob-b { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40vw, -30vh) scale(1.1); } 100% { transform: translate(-15vw, -60vh) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .kml::before, .kml::after { animation: none; } }
/* Båndene og kortene blir gjennomsiktige så fargene skinner gjennom */
.kml-sec:nth-of-type(odd) { background: rgba(255,255,255,.025); box-shadow: 0 0 0 100vmax rgba(255,255,255,.025); }
.kml-who__card, .kml-card, .kml-plan, .kml-steps li, .kml-faq details,
.kml-sec:nth-of-type(odd) .kml-who__card, .kml-sec:nth-of-type(odd) .kml-card, .kml-sec:nth-of-type(odd) .kml-plan, .kml-sec:nth-of-type(odd) .kml-steps li, .kml-sec:nth-of-type(odd) .kml-faq details {
	background: rgba(20,22,24,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* PROJECT: kulturella-match-engine — ny startside: profilsteg øverst (avhukes etter faktisk utfylling) */
.km-start-profile { margin: 4px 0 8px; padding: 22px 22px 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,150,214,.12), rgba(82,190,206,.08)); border: 1px solid rgba(255,150,214,.35); box-shadow: 0 0 22px rgba(255,150,214,.12); }
.km-start-profile.is-complete { border-color: rgba(82,190,206,.35); box-shadow: none; background: rgba(82,190,206,.06); }
.km-start-profile__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.km-start-profile__head strong { font-size: 1.12rem; color: #fff; }
.km-start-profile__count { flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #111; background: linear-gradient(90deg, #ff96d6, #52bece); }
.km-start-profile ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.km-start-profile li { display: flex; align-items: center; gap: 10px; font-size: .98rem; color: rgba(255,255,255,.9); }
.km-start-profile li .km-ikon { flex: 0 0 22px; width: 22px; height: 22px; color: #ff96d6; }
.km-start-profile li.is-done { color: rgba(255,255,255,.55); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.km-start-profile li.is-done .km-ikon { color: #52bece; }
.km-start-profile p { margin: 0 0 18px; font-weight: 700; color: #fff; }
.km-start-profile .km-start-way__btn { display: inline-flex; align-self: auto; width: auto; text-decoration: none !important; color: #fff !important; }
/* PROJECT: kulturella-match-engine — landingsside: ingen stripe mellom menyen og herobildet */
.row-parent:has(.kml), .uncol:has(> .uncoltable .kml), .uncell:has(.kml), .uncont:has(> .kml) { padding-top: 0 !important; margin-top: 0 !important; }
.kml > .kml-hero--img:first-child { margin-top: 0; }
.uncont:has(> .kml) > *:first-child { margin-top: 0 !important; }
/* PROJECT: kulturella-match-engine — knapper i Uncode-paletten (Kulturpunktet light → Cerulean light) med mørk tekst */
.kml-who__card em, .km-start-profile .km-start-way__btn { color: #111 !important; }
.kml-btn--pri { background: linear-gradient(90deg, #ff96d6, #52bece) !important; color: #111 !important; }

/* PROJECT: kulturella-match-engine — Min side-sidene (body.km-mypage): én animert bakgrunn for hele siden + felles topp (.kph) */
body.km-mypage { background: #141618 !important; }
body.km-mypage .box-wrapper, body.km-mypage .box-container, body.km-mypage .main-wrapper, body.km-mypage .main-container,
body.km-mypage .page-wrapper, body.km-mypage .page-body, body.km-mypage .post-wrapper, body.km-mypage .post-body,
body.km-mypage .main-container .row-container, body.km-mypage .main-container .row-parent,
body.km-mypage .main-container .style-color-134821-bg, body.km-mypage .main-container .style-color-wayh-bg { background-color: transparent !important; background-image: none !important; }
body.km-mypage::before, body.km-mypage::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(100px); opacity: .28; will-change: transform; }
body.km-mypage::before { top: -25vmax; left: -20vmax; background: radial-gradient(circle, #ff96d6 0%, rgba(255,150,214,0) 65%); animation: kml-blob-a 24s ease-in-out infinite alternate; }
body.km-mypage::after { bottom: -30vmax; right: -20vmax; background: radial-gradient(circle, #52bece 0%, rgba(82,190,206,0) 65%); animation: kml-blob-b 28s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { body.km-mypage::before, body.km-mypage::after { animation: none; } }

.kph { max-width: 1080px; margin: 0 auto 28px; padding: 36px 0 8px; color: #fff; text-align: left; }
.kph__back { display: inline-block; margin-bottom: 10px; font-size: .9rem; font-weight: 700; color: #52bece !important; text-decoration: none !important; }
.kph__back:hover { color: #ff96d6 !important; }
.kph__title { margin: 0 0 10px !important; padding: 0 !important; color: #fff !important; font-size: clamp(1.9rem, 4.6vw, 2.6rem) !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -0.01em; }
.kph__text { margin: 0 0 22px !important; max-width: 720px; font-size: 1.05rem !important; line-height: 1.55 !important; color: rgba(255,255,255,.72) !important; }
.kph__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.kph__btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; font-weight: 800; font-size: .95rem; line-height: 1;
	text-decoration: none !important; color: #fff !important; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); transition: background .2s ease, transform .15s ease; }
.kph__btn:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.kph__btn--pri { background: linear-gradient(90deg, #ff96d6, #52bece); border: 0; color: #111 !important; box-shadow: 0 0 18px rgba(255,150,214,.25); }
.kph__btn--pri:hover { background: linear-gradient(90deg, #ffb0e0, #7dd3de); }
/* Felles stil på innholdet under: faner/piller i samme format */
body.km-mypage .kme-bk { max-width: 1080px; margin: 0 auto; }
body.km-mypage .kme-bk__tab, body.km-mypage .km-mine-bookinger { border-radius: 999px !important; }
body.km-mypage .kme-bk__tab.is-on { background: linear-gradient(90deg, #ff96d6, #52bece) !important; color: #111 !important; border-color: transparent !important; }
body.km-mypage .vc_custom_heading, body.km-mypage .heading-text h2 { color: #fff; }
@media (max-width: 600px) { .kph { padding-top: 20px; } .kph__btn { flex: 1 1 auto; } }
.kph__badge { margin-left: 8px; padding: 3px 8px; border-radius: 999px; font-size: .75rem; background: #ff96d6; color: #111; }
body.km-mypage .km-mine-bookinger { display: none !important; } /* flyttet til toppen ved siden av «+ Ny tjeneste» */

/* PROJECT: kulturella-match-engine — tilbakemelding nederst på alle sider: stripe + knapp, skjemaet i popup */
.kfb { max-width: 1080px; margin: 0 auto; padding: 28px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.08); }
.kfb__text { margin: 0 !important; flex: 1 1 380px; font-size: .95rem !important; line-height: 1.5 !important; color: rgba(255,255,255,.7) !important; }
.kfb__btn { flex: 0 0 auto; padding: 12px 22px; border-radius: 999px; font-weight: 800; font-size: .95rem; line-height: 1; cursor: pointer; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); transition: background .2s ease; }
.kfb__btn:hover { background: rgba(255,255,255,.12); }
.kfb-modal { position: fixed; inset: 0; z-index: 100005; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.kfb-modal[hidden] { display: none !important; }
.kfb-modal__box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 24px 22px; border-radius: 22px; background: #141618; border: 1px solid rgba(255,150,214,.35); box-shadow: 0 0 40px rgba(255,150,214,.18); color: #fff; }
.kfb-modal__box h3 { margin: 0 0 6px !important; color: #fff !important; font-size: 1.35rem !important; }
.kfb-modal__lead { margin: 0 0 16px !important; color: rgba(255,255,255,.7) !important; font-size: .95rem !important; }
.kfb-modal__x { position: absolute; top: 14px; right: 14px; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: .85rem; cursor: pointer; color: #ff96d6; background: rgba(255,150,214,.12); border: 1px solid rgba(255,150,214,.45); }
.kfb-modal textarea, .kfb-modal input[type="text"], .kfb-modal input[type="email"] { width: 100%; border-radius: 14px !important; background: #0e0f10 !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; padding: 12px 14px !important; }
.kfb-modal textarea { min-height: 140px; }
.kfb-modal input[type="file"] { color: rgba(255,255,255,.8); }
.kfb-modal input[type="submit"], .kfb-modal .wpcf7-submit { margin-top: 8px; padding: 13px 26px !important; border-radius: 999px !important; border: 0 !important; font-weight: 800 !important; letter-spacing: .02em; text-transform: none !important;
	background: linear-gradient(90deg, #ff96d6, #52bece) !important; color: #111 !important; cursor: pointer; }
.kfb-modal .wpcf7-response-output { border-radius: 12px; margin: 12px 0 0 !important; }
/* PROJECT: kulturella-match-engine — felles topp med bilde (hovedsidene): bildet i full bredde, toner ut i den animerte bakgrunnen */
.kph--img { position: relative; isolation: isolate; max-width: none; margin: 0 0 28px; padding: clamp(64px, 9vw, 110px) 0 clamp(28px, 4vw, 44px); }
.kph--img .kph__bg { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; background-size: cover; background-position: center 40%; }
.kph--img .kph__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,24,.45) 0%, rgba(20,22,24,.62) 55%, rgba(20,22,24,1) 100%), linear-gradient(110deg, rgba(255,150,214,.22), rgba(82,190,206,.12) 70%); }
.kph--img .kph__in { position: relative; max-width: 1080px; margin: 0 auto; }
.kph--img .kph__title { text-shadow: 0 2px 20px rgba(0,0,0,.45); }
.kph--img .kph__text { color: rgba(255,255,255,.85) !important; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.kph--img .kph__btn:not(.kph__btn--pri) { background: rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 1112px) { .kph--img .kph__in { padding: 0 16px; } }
/* Hovedsidene har flere radfarger enn Min side-sidene – gjør alle mørke rad-/kolonnefarger gjennomsiktige (ikke lime-feltet) */
body.km-mypage .main-container .style-color-jevc-bg, body.km-mypage .main-container .style-color-rgdb-bg,
body.km-mypage .main-container .style-dark-bg { background-color: transparent !important; }
/* PROJECT: kulturella-match-engine — ingen glipe mellom menyen og toppbildet (Uncode-radens standardluft) */
.row-parent:has(.kph--img), .uncol:has(.kph--img), .uncell:has(.kph--img), .uncont:has(.kph--img), .uncode_text_column:has(> .kph--img),
.km-arkiv-wrapper:has(> .kph--img), .main-container .row-container:has(.kph--img) { padding-top: 0 !important; margin-top: 0 !important; }
.uncont:has(.kph--img) > *:first-child, .uncode_text_column > .kph--img:first-child, .km-arkiv-wrapper > .kph--img:first-child { margin-top: 0 !important; }
p:has(> .kph--img) { margin: 0 !important; }
.kph--img { margin-top: 0 !important; }

/* PROJECT: kulturella-match-engine — Kunnskapsportalen (body.km-kunnskap): designlag over WPBakery-innholdet, som fortsatt redigeres i backend.
   Seksjonene er bygget for lys bakgrunn (style="light", lime color-210407, lys color-xsdn) – her blir de mørke kort med lys tekst. */
body.km-kunnskap .main-container .style-color-xsdn-bg { background-color: transparent !important; }
/* Lys tekst i de lyse kolonnene */
body.km-kunnskap .main-container .style-light, body.km-kunnskap .main-container .style-light h1, body.km-kunnskap .main-container .style-light h2,
body.km-kunnskap .main-container .style-light h3, body.km-kunnskap .main-container .style-light h4, body.km-kunnskap .main-container .style-light h5,
body.km-kunnskap .main-container .style-light .heading-text, body.km-kunnskap .main-container .style-light .heading-text * { color: #fff !important; }
body.km-kunnskap .main-container .style-light p, body.km-kunnskap .main-container .style-light li, body.km-kunnskap .main-container .uncode_text_column,
body.km-kunnskap .main-container .uncode_text_column p { color: rgba(255,255,255,.78) !important; }
body.km-kunnskap .main-container .uncode_text_column a:not(.btn):not(.kph__btn):not(.kph__back) { color: #52bece !important; }
/* Lime intro + «Din organisasjon her?»: mørkt glasskort med Kulturaksen som aksent */
body.km-kunnskap .main-container .style-color-210407-bg { background: rgba(20,22,24,.72) !important; border: 1px solid rgba(224,255,86,.30); border-left: 4px solid #e0ff56; border-radius: 20px;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.km-kunnskap .main-container .style-color-210407-bg .heading-text h3 { font-size: clamp(1.15rem, 2.4vw, 1.45rem) !important; line-height: 1.5 !important; font-weight: 600 !important; }
/* Innholdskolonnene som kort (ikke inne i lime-kortet, der ville det blitt kort i kort) */
body.km-kunnskap .main-container .column_child > .uncol > .uncoltable > .uncell:not(.style-color-210407-bg) {
	background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s ease, box-shadow .2s ease; }
body.km-kunnskap .main-container .style-color-210407-bg .column_child > .uncol > .uncoltable > .uncell { background: none !important; border: 0 !important; backdrop-filter: none !important; }
body.km-kunnskap .main-container .column_child > .uncol > .uncoltable > .uncell > .uncont { padding: 24px !important; }
body.km-kunnskap .main-container .column_child:hover > .uncol > .uncoltable > .uncell:not(.style-color-210407-bg) { border-color: rgba(255,150,214,.45); box-shadow: 0 0 22px rgba(255,150,214,.15); }
body.km-kunnskap .main-container .row-inner { row-gap: 18px; }
/* Bilder og knapper */
body.km-kunnskap .main-container .uncode-single-media img, body.km-kunnskap .main-container .single-image img { border-radius: 14px; }
body.km-kunnskap .main-container .btn:not(.btn-link) { border-radius: 999px !important; padding: 11px 20px !important; font-weight: 800 !important; letter-spacing: .02em !important; text-transform: none !important;
	background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; box-shadow: none !important; }
body.km-kunnskap .main-container .btn:not(.btn-link):hover { background: rgba(255,255,255,.12) !important; }
body.km-kunnskap .main-container .style-color-210407-bg .btn:not(.btn-link) { background: linear-gradient(90deg, #ff96d6, #52bece) !important; border: 0 !important; color: #111 !important; }
/* PROJECT: kulturella-match-engine — Kunnskapsportalen: lenkefargen skal ikke treffe knappene/tilbakelenken i den felles toppen */
body.km-kunnskap .main-container .kph__btn--pri, body.km-kunnskap .main-container .kph__btn--pri * { color: #111 !important; }
body.km-kunnskap .main-container .kph__btn:not(.kph__btn--pri) { color: #fff !important; }
body.km-kunnskap .main-container .kph__back { color: #52bece !important; }
body.km-kunnskap .main-container .kph__text { color: rgba(255,255,255,.85) !important; }
/* PROJECT: kulturella-match-engine — Kunnskapsportalen: mørke logoer med gjennomsiktig bakgrunn får en hvit, avrundet boks.
   Styres i backend: legg «km-logo-lys» i «Extra class name» på bildeelementet i WPBakery. */
body.km-kunnskap .uncode-single-media.km-logo-lys .uncode-single-media-wrapper {
	background: #fff !important; border-radius: 14px !important; padding: 14px 18px !important; overflow: hidden; }
body.km-kunnskap .km-logo-lys img { border-radius: 0 !important; }
/* PROJECT: kulturella-match-engine — Kunnskapsportalen: knapp per organisasjon på oversikten (vc_button med «km-partner-btn» i Extra class name) */
body.km-kunnskap .main-container .btn.km-partner-btn:not(.btn-link), body.km-kunnskap .main-container .km-partner-btn .btn:not(.btn-link) {
	background: linear-gradient(90deg, #ff96d6, #52bece) !important; border: 0 !important; color: #111 !important; margin-top: 14px !important; white-space: normal; line-height: 1.25 !important; }
body.km-kunnskap .main-container .btn.km-partner-btn:not(.btn-link) *, body.km-kunnskap .main-container .km-partner-btn .btn * { color: #111 !important; }
body.km-kunnskap .main-container .btn.km-partner-btn:not(.btn-link):hover { background: linear-gradient(90deg, #ffb0e0, #7dd3de) !important; }
/* Kortene: innholdet i en kolonne, knappen nederst */
body.km-kunnskap .main-container .column_child > .uncol > .uncoltable > .uncell > .uncont { display: flex; flex-direction: column; height: 100%; }
body.km-kunnskap .main-container .column_child .uncont > .btn-container:last-child { margin-top: auto !important; }
/* PROJECT: kulturella-match-engine — knapper med kantlinje lyser opp i paletten ved hover (samme oppførsel overalt i det nye designet) */
body.km-kunnskap .main-container .btn:not(.btn-link):hover, body.km-kunnskap .main-container .btn:not(.btn-link):focus-visible,
.kph__btn:not(.kph__btn--pri):hover, .kph__btn:not(.kph__btn--pri):focus-visible,
.kfb__btn:hover, .kfb__btn:focus-visible,
.kml-btn:not(.kml-btn--pri):hover, .kml-btn:not(.kml-btn--pri):focus-visible {
	background: linear-gradient(90deg, #ff96d6, #52bece) !important; border-color: transparent !important; color: #111 !important; box-shadow: 0 0 20px rgba(255,150,214,.35) !important; transform: translateY(-1px); }
body.km-kunnskap .main-container .btn:not(.btn-link):hover *, .kph__btn:not(.kph__btn--pri):hover *, .kfb__btn:hover *, .kml-btn:not(.kml-btn--pri):hover * { color: #111 !important; }
body.km-kunnskap .main-container .btn:not(.btn-link), .kph__btn, .kfb__btn, .kml-btn { transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease !important; }
/* PROJECT: kulturella-match-engine — Kunnskapsportalen: mer luft rundt knappen i «Din organisasjon her?» */
body.km-kunnskap .main-container .style-color-210407-bg .btn-container { margin-top: 26px !important; margin-bottom: 10px !important; }
body.km-kunnskap .main-container .style-color-210407-bg .btn:not(.btn-link) { padding: 14px 28px !important; }

/* PROJECT: kulturella-match-engine — ELLA-siden (body.km-ella): chat (2/3) + sidepanel (1/3) med modell, «Kom i gang» og tips. Innholdet redigeres i WPBakery. */
body.km-ella .km-ella-row > .row { max-width: 1240px; margin: 0 auto; }
body.km-ella .km-ella-chat .mwai-chatbot, body.km-ella .km-ella-chat .mwai-window { width: 100% !important; max-width: none !important; }
body.km-ella .km-ella-chat .mwai-conversation, body.km-ella .km-ella-chat .mwai-body .mwai-conversation { min-height: calc(100vh - 360px); max-height: calc(100vh - 260px) !important; }
@media (min-width: 960px) {
	body.km-ella .km-ella-side > .uncol { position: sticky; top: 96px; }
}
/* Sidepanel: overskrifter som på profilen */
body.km-ella .km-ella-h, body.km-ella .km-ella-h * { margin: 22px 0 12px !important; font-size: .78rem !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #ff96d6 !important; font-weight: 800 !important; }
body.km-ella .km-ella-h h3::after, body.km-ella h3.km-ella-h::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, #ff96d6, #52bece); }
/* Modellinfo som et lite kort */
body.km-ella .km-ella-model { padding: 14px 16px !important; border-radius: 16px; background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	font-size: .9rem !important; line-height: 1.5 !important; color: rgba(255,255,255,.85) !important; }
body.km-ella .km-ella-model p, body.km-ella .km-ella-model li { font-size: .9rem !important; margin: 0 0 6px !important; color: rgba(255,255,255,.8) !important; }
body.km-ella .km-ella-model ul { margin: 6px 0 8px 18px !important; }
/* Klikkbare forslag */
body.km-ella .km-ella-prompts p { margin: 0 !important; }
.kella-prompt { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 8px; padding: 12px 14px; text-align: left; cursor: pointer; border-radius: 14px;
	background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.10); color: #fff; font-size: .92rem; line-height: 1.35; font-weight: 600;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s ease, background .2s ease, transform .15s ease; }
.kella-prompt:hover, .kella-prompt:focus-visible { border-color: rgba(255,150,214,.6); background: rgba(255,150,214,.10); transform: translateY(-1px); }
.kella-prompt.is-used { border-color: #52bece; background: rgba(82,190,206,.15); }
.kella-prompt__ic { flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px;
	background: linear-gradient(135deg, rgba(255,150,214,.22), rgba(82,190,206,.22)); color: #ff96d6; }
.kella-prompt:nth-child(2n) .kella-prompt__ic { color: #52bece; }
.kella-prompt__ic .km-ikon { width: 19px; height: 19px; }
/* Tips som sammenleggbare kort (Uncode vc_accordion) */
body.km-ella .km-ella-tips .panel { margin: 0 0 8px !important; border-radius: 14px !important; overflow: hidden; background: rgba(20,22,24,.72) !important; border: 1px solid rgba(255,255,255,.10) !important; }
body.km-ella .km-ella-tips .panel-heading, body.km-ella .km-ella-tips .panel-title, body.km-ella .km-ella-tips .panel-title > a { background: transparent !important; border: 0 !important; }
body.km-ella .km-ella-tips .panel-title > a, body.km-ella .km-ella-tips .panel-title > a span { display: block; padding: 12px 16px !important; color: #fff !important; font-size: .95rem !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }
body.km-ella .km-ella-tips .panel-body { padding: 0 16px 14px !important; border: 0 !important; }
body.km-ella .km-ella-tips .panel-body, body.km-ella .km-ella-tips .panel-body p { font-size: .9rem !important; line-height: 1.55 !important; color: rgba(255,255,255,.78) !important; }
@media (max-width: 959px) { body.km-ella .km-ella-side { margin-top: 18px; } body.km-ella .km-ella-chat .mwai-conversation { min-height: 55vh; } }

/* PROJECT: kulturella-match-engine — «Send inn lenke» (KME_Link_Submit): valg, lenkefelt, venting, forhåndsvisning, kvittering */
.kls { position: fixed; inset: 0; z-index: 100006; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.kls[hidden], .kls [hidden] { display: none !important; }
.kls__box { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 26px 24px; border-radius: 22px; background: #141618; border: 1px solid rgba(255,150,214,.35); box-shadow: 0 0 40px rgba(255,150,214,.18); color: #fff; }
.kls__box h3 { margin: 0 0 8px !important; color: #fff !important; font-size: 1.4rem !important; line-height: 1.25 !important; padding-right: 70px; }
.kls__lead { margin: 0 0 18px !important; color: rgba(255,255,255,.72) !important; font-size: .98rem !important; line-height: 1.5 !important; }
.kls__x { position: absolute; top: 16px; right: 16px; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: .85rem; cursor: pointer; color: #ff96d6; background: rgba(255,150,214,.12); border: 1px solid rgba(255,150,214,.45); }
.kls__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kls__choice { display: flex; flex-direction: column; gap: 4px; padding: 18px; text-align: left; cursor: pointer; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff !important; text-decoration: none !important; transition: border-color .2s ease, background .2s ease, transform .15s ease; font: inherit; }
.kls__choice strong { font-size: 1.05rem; color: #fff; }
.kls__choice span { font-size: .88rem; color: rgba(255,255,255,.65); line-height: 1.4; }
.kls__choice:hover, .kls__choice:focus-visible { border-color: rgba(255,150,214,.6); background: rgba(255,150,214,.10); transform: translateY(-1px); }
.kls label { display: block; margin: 0 0 14px; font-weight: 700; font-size: .9rem; color: #fff; }
.kls label span { font-weight: 400; color: rgba(255,255,255,.55); }
.kls input[type="url"], .kls textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px !important; border-radius: 14px !important; background: #0e0f10 !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; font-size: 1rem !important; }
.kls input[type="url"]:focus, .kls textarea:focus { border-color: #52bece !important; outline: none; }
.kls__msg { min-height: 1.2em; margin: 0 0 10px !important; color: #ff9b9b !important; font-size: .9rem !important; }
.kls__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.kls__btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 800; font-size: .95rem; line-height: 1.1;
	background: linear-gradient(90deg, #ff96d6, #52bece); color: #111 !important; text-decoration: none !important; transition: box-shadow .2s ease, transform .15s ease; }
.kls__btn:hover { box-shadow: 0 0 20px rgba(255,150,214,.35); transform: translateY(-1px); }
.kls__btn[disabled] { opacity: .6; cursor: wait; }
.kls__btn--ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: #fff !important; }
.kls__btn--ghost:hover { background: linear-gradient(90deg, #ff96d6, #52bece); color: #111 !important; border-color: transparent; }
.kls__spin { width: 44px; height: 44px; margin: 6px 0 16px; border-radius: 50%; border: 4px solid rgba(255,255,255,.12); border-top-color: #ff96d6; border-right-color: #52bece; animation: kls-spin .9s linear infinite; }
@keyframes kls-spin { to { transform: rotate(360deg); } }
.kls__prev { margin: 0 0 14px; }
.kls-prev { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); }
.kls-prev__img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.kls-prev__title { margin: 16px 18px 8px !important; font-size: 1.2rem !important; padding: 0 !important; }
.kls-prev__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0 18px 12px; }
.kls-prev__facts dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #ff96d6; font-weight: 800; }
.kls-prev__facts dd { margin: 0; font-size: .92rem; color: #fff; }
.kls-prev__facts a { color: #52bece !important; }
.kls-prev__body { margin: 0 18px 16px; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.8); max-height: 260px; overflow-y: auto; }
.kls-prev__body p { margin: 0 0 10px; color: rgba(255,255,255,.8) !important; }
.kls-prev__body ul { margin: 0 0 6px 18px; }
@media (max-width: 560px) { .kls__choices { grid-template-columns: 1fr; } .kls-prev__facts { grid-template-columns: 1fr; } .kls__btn { flex: 1 1 auto; } }
/* PROJECT: kulturella-match-engine — ELLA v1.1: hele bredden, ELLA mini/Pro i toppen, luftigere tips */
body.km-ella .kph { max-width: none; padding-left: 32px; padding-right: 32px; }
body.km-ella .km-ella-row > .row, body.km-ella .km-ella-row .row.limit-width, body.km-ella .km-ella-row .row-parent { max-width: none !important; padding-left: 32px !important; padding-right: 32px !important; }
body.km-ella .km-ella-row .row-inner { gap: 0; }
@media (max-width: 700px) { body.km-ella .kph, body.km-ella .km-ella-row > .row, body.km-ella .km-ella-row .row-parent { padding-left: 16px !important; padding-right: 16px !important; } }
/* ELLA mini: reklame for Pro */
.kph__upsell { display: flex; flex-direction: column; gap: 4px; max-width: 720px; margin: 16px 0 4px; padding: 14px 18px; border-radius: 16px;
	background: linear-gradient(110deg, rgba(255,150,214,.14), rgba(82,190,206,.12)); border: 1px solid rgba(255,150,214,.35); }
.kph__upsell strong { color: #fff; font-size: 1rem; }
.kph__upsell span { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.45; }
/* Tips: mer luft, ingen strek mellom overskrift og tekst */
body.km-ella .km-ella-tips .panel { margin: 0 0 12px !important; }
body.km-ella .km-ella-tips .panel-heading, body.km-ella .km-ella-tips .panel-title, body.km-ella .km-ella-tips .panel-title > a,
body.km-ella .km-ella-tips .panel-collapse, body.km-ella .km-ella-tips .panel-body { border: 0 !important; box-shadow: none !important; }
body.km-ella .km-ella-tips .panel-heading::after, body.km-ella .km-ella-tips .panel-title::after, body.km-ella .km-ella-tips .panel-collapse::before { display: none !important; }
body.km-ella .km-ella-tips .panel-title > a, body.km-ella .km-ella-tips .panel-title > a span { padding: 18px 22px !important; line-height: 1.35 !important; }
body.km-ella .km-ella-tips .panel-body { padding: 0 22px 20px !important; }
body.km-ella .km-ella-tips .panel-body p { margin: 0 0 10px !important; line-height: 1.65 !important; }
/* PROJECT: kulturella-match-engine — «Send inn lenke»: Uncode stiler skjemaknapper (mørk bakgrunn, store bokstaver) – overstyr */
.kls .kls__btn, .kls button.kls__btn, .kls form button[type="submit"].kls__btn {
	display: inline-flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 0 !important;
	padding: 13px 24px !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important;
	background: linear-gradient(90deg, #ff96d6, #52bece) !important; color: #111 !important; opacity: 1 !important;
	font-weight: 800 !important; font-size: .95rem !important; letter-spacing: .01em !important; text-transform: none !important; line-height: 1.1 !important; }
.kls .kls__btn:hover { background: linear-gradient(90deg, #ffb0e0, #7dd3de) !important; box-shadow: 0 0 20px rgba(255,150,214,.35) !important; }
.kls .kls__btn[disabled] { opacity: .6 !important; }
.kls .kls__btn.kls__btn--ghost { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; }
.kls .kls__btn.kls__btn--ghost:hover { background: linear-gradient(90deg, #ff96d6, #52bece) !important; color: #111 !important; }
.kls .kls__choice { text-transform: none !important; letter-spacing: 0 !important; height: auto !important; }
/* ELLA: toppen i full bredde, samme venstrekant som chatten */
body.km-ella .row-container:has(.kph) .row, body.km-ella .row-container:has(.kph) .row-parent { max-width: none !important; padding-left: 32px !important; padding-right: 32px !important; }
body.km-ella .kph { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; }
@media (max-width: 700px) { body.km-ella .row-container:has(.kph) .row-parent { padding-left: 16px !important; padding-right: 16px !important; } }
/* PROJECT: kulturella-match-engine — forhåndsvisning: luft rundt tittelen (overskriftsregelen i vinduet overstyrte den) + mørkt rullefelt */
.kls .kls-prev h3.kls-prev__title { margin: 20px 20px 14px !important; padding: 0 !important; font-size: 1.3rem !important; line-height: 1.3 !important; }
.kls .kls-prev__facts { margin: 0 20px 16px; }
.kls .kls-prev__body { margin: 0 20px 18px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.kls .kls-prev__body::-webkit-scrollbar { width: 6px; }
.kls .kls-prev__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 6px; }
.kls .kls-prev__body::-webkit-scrollbar-track { background: transparent; }
/* PROJECT: kulturella-match-engine — forhåndsvisningens tittel er et eget element (ikke h3), så temaets overskriftsregler ikke spiser luften */
.kls .kls-prev .kls-prev__title { display: block; padding: 22px 22px 14px !important; margin: 0 !important; font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: #fff; }
.kls .kls-prev__facts { margin: 0 22px 16px !important; }
.kls .kls-prev__body { margin: 0 22px 20px !important; }
/* PROJECT: kulturella-match-engine — «Send inn lenke»: redigeringssteget */
.kls input[type="text"], .kls input[type="date"] { display: block; width: 100%; margin-top: 6px; padding: 12px 14px !important; border-radius: 14px !important; background: #0e0f10 !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; font-size: 1rem !important; color-scheme: dark; }
.kls input[type="text"]:focus, .kls input[type="date"]:focus { border-color: #52bece !important; outline: none; }
.kls__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.kls textarea[name="tekst"] { min-height: 200px; line-height: 1.5; }
@media (max-width: 560px) { .kls__grid { grid-template-columns: 1fr; } }
/* PROJECT: kulturella-match-engine — startsiden: rating og aktivitetspoeng med forklaring */
.kms-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0 6px; }
.kms-stat { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; text-decoration: none !important; color: #fff !important;
	background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s ease, transform .15s ease; }
.kms-stat:hover { border-color: rgba(255,150,214,.45); transform: translateY(-1px); z-index: 5; }
.kms-stat:focus-within { z-index: 5; }
.kms-stat__label { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ff96d6; }
.kms-stat__val { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: #fff; }
.kms-stat__val--empty { color: rgba(255,255,255,.4); }
.kms-stat__star { color: #ffcc4d; }
.kms-stat__sub { font-size: .9rem; color: rgba(255,255,255,.65); }
.kms-stat__sub b { color: #ff96d6; }
.kms-tip { position: relative; display: inline-flex; align-items: center; color: rgba(255,255,255,.55); cursor: help; outline: none; }
.kms-tip:hover, .kms-tip:focus { color: #52bece; }
.kms-tip__box { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: 280px; padding: 10px 12px; border-radius: 12px;
	background: #0e0f10; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.5); color: rgba(255,255,255,.9); font-size: .85rem; font-weight: 500; line-height: 1.45;
	letter-spacing: 0; text-transform: none; text-align: left; opacity: 0; visibility: hidden; transition: opacity .15s ease; pointer-events: none; z-index: 20; }
.kms-tip:hover .kms-tip__box, .kms-tip:focus .kms-tip__box { opacity: 1; visibility: visible; }
@media (max-width: 560px) { .kms-stats { gap: 10px; } .kms-stat { padding: 14px; } .kms-stat__val { font-size: 1.5rem; } .kms-tip__box { left: 0; transform: none; max-width: 220px; } }
div.kms-stat:hover { border-color: rgba(255,255,255,.08); transform: none; }

/* PROJECT: kulturella-match-engine — organisasjonsprofiler (KME_Orgs): organisasjonssiden, profil-piller, opprett/rediger */
.kmo-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px 64px; }
.kmo-meta { display: flex; align-items: center; gap: 16px; margin: 16px 0 6px; }
.kmo-logo { width: 84px; height: 84px; border-radius: 20px; object-fit: contain; background: #fff; padding: 8px; box-shadow: 0 0 0 3px #141618, 0 0 0 5px #ff96d6, 0 0 22px rgba(255,150,214,.3); }
.kmo-logo--empty { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 2rem; font-weight: 800; color: #111; background: linear-gradient(135deg, #ff96d6, #52bece); }
.kmo-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.kmo-pill { padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; background: rgba(255,150,214,.18); border: 1px solid rgba(255,150,214,.5); color: #ff96d6; }
.kmo-pill--ghost { background: rgba(20,22,24,.55); border-color: rgba(255,255,255,.18); color: #fff; }
.kmo-pill--ok { background: rgba(82,190,206,.18); border-color: rgba(82,190,206,.5); color: #52bece; }
.kmo-admin { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.kmo-card { margin: 0 0 16px; padding: 22px 26px; border-radius: 22px; background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; }
.kmo-h { margin: 0 0 14px !important; font-size: .78rem !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #ff96d6 !important; font-weight: 800 !important; }
.kmo-h::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, #ff96d6, #52bece); }
.kmo-about p { color: rgba(255,255,255,.82) !important; line-height: 1.65; }
.kmo-empty { margin: 0 !important; color: rgba(255,255,255,.55) !important; }
.kmo-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.kmo-person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #fff !important; text-decoration: none !important; }
.kmo-person:hover { border-color: rgba(255,150,214,.45); }
.kmo-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.kmo-person span { display: flex; flex-direction: column; }
.kmo-person small { color: rgba(255,255,255,.6); font-size: .82rem; }
.kmo-select { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: #0e0f10 !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; font-size: 1rem; }
.kmo-found { margin: -4px 0 12px !important; padding: 10px 12px; border-radius: 12px; background: rgba(82,190,206,.10); border: 1px solid rgba(82,190,206,.35); color: #fff !important; font-size: .9rem !important; }
.kmo-found a { color: #52bece !important; }
.kls input[type="file"] { margin-top: 6px; color: rgba(255,255,255,.8); }
/* Profilen: organisasjoner som piller + «Legg til» */
.kmo-profile-orgs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.kmo-profile-org { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: rgba(82,190,206,.14); border: 1px solid rgba(82,190,206,.45); color: #fff !important; font-size: .85rem; font-weight: 700; text-decoration: none !important; }
.kmo-profile-org img { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; background: #fff; }
.kmo-profile-org small { color: rgba(255,255,255,.65); font-weight: 500; }
.kmo-profile-org:hover { border-color: #52bece; }
.kmo-add { display: inline-block; margin-top: 8px; font-size: .85rem; font-weight: 700; color: #52bece !important; text-decoration: none !important; }
.kmo-add:hover { color: #ff96d6 !important; }
@media (max-width: 600px) { .kmo-card { padding: 18px; } .kmo-logo { width: 64px; height: 64px; border-radius: 16px; } }
/* PROJECT: kulturella-match-engine — organisasjoner fase 2: medlemskap og «Administrer folk» */
.kmo-join { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.kmo-join p { margin: 0 !important; color: rgba(255,255,255,.85) !important; }
.kmo-join--invite { border-color: rgba(255,150,214,.5); box-shadow: 0 0 22px rgba(255,150,214,.15); }
.kmo-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kmo-me { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kmo-me label { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: rgba(255,255,255,.8); margin: 0; }
.kmo-input { padding: 9px 12px !important; border-radius: 12px !important; background: #0e0f10 !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; font-size: .95rem !important; min-width: 220px; }
.kmo-check { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: rgba(255,255,255,.8); cursor: pointer; }
.kmo-link { background: none !important; border: 0 !important; padding: 4px 6px !important; color: #ff9b9b !important; font-weight: 700; font-size: .85rem; cursor: pointer; text-decoration: underline; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.kmo-sub { margin: 18px 0 8px !important; font-size: .85rem !important; color: rgba(255,255,255,.65) !important; font-weight: 800 !important; }
.kmo-mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.kmo-mrow img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.kmo-mrow__name { flex: 1 1 160px; color: #fff; font-weight: 700; }
.kmo-mrow__name small { display: block; font-weight: 500; color: rgba(255,255,255,.55); }
.kmo-perms { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-left: 50px; }
.kmo-select--sm { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 7px 10px !important; font-size: .88rem !important; }
.kmo-muted { color: rgba(255,255,255,.5) !important; font-size: .85rem; }
.kmo-hint { margin: 14px 0 0 !important; }
.kmo-search { position: relative; }
.kmo-search .kmo-input { width: 100%; }
.kmo-results .kmo-mrow:first-child { border-top: 0; }
@media (max-width: 600px) { .kmo-perms { padding-left: 0; } .kmo-input { min-width: 0; width: 100%; } }
/* PROJECT: kulturella-match-engine — organisasjoner: Brreg-navnesøk + mørke valg i nedtrekkslister */
.kmo-suggest { margin: -6px 0 14px; border-radius: 14px; overflow: hidden; background: #0e0f10; border: 1px solid rgba(255,255,255,.14); max-height: 300px; overflow-y: auto; }
.kmo-suggest__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 14px; text-align: left; cursor: pointer; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); color: #fff; font: inherit; text-transform: none; letter-spacing: 0; }
.kmo-suggest__item:hover, .kmo-suggest__item:focus-visible { background: rgba(255,150,214,.10); }
.kmo-suggest__item strong { font-size: .95rem; }
.kmo-suggest__item small { font-size: .8rem; color: rgba(255,255,255,.6); }
.kmo-suggest__none { padding: 9px 14px; font-size: .82rem; color: rgba(255,255,255,.5); }
.kmo-select option { background: #141618; color: #fff; }
/* PROJECT: kulturella-match-engine — nedtrekkslister i vinduene: temaet setter mørk tekst på <option> – tving lys tekst på mørk bunn */
.kls select option, .kls select optgroup, .kmo-select option, select.kmo-select option { background: #141618 !important; background-color: #141618 !important; color: #fff !important; }
.kls select option:checked, .kmo-select option:checked { background: #2a2c30 !important; color: #fff !important; }
.kls select, .kmo-select { color-scheme: dark; }
/* PROJECT: kulturella-match-engine — avkrysningsbokser i org-/vindusskjemaene: temaets egne bokser viste ikke haken → vanlig nettleserboks */
.kmo-check input[type="checkbox"], .kls input[type="checkbox"] { -webkit-appearance: checkbox !important; appearance: auto !important; width: 18px !important; height: 18px !important; margin: 0 !important;
	accent-color: #ff96d6; opacity: 1 !important; position: static !important; visibility: visible !important; cursor: pointer; }
.kmo-check input[type="checkbox"]::before, .kmo-check input[type="checkbox"]::after { display: none !important; content: none !important; }
.kmo-suggest-old { display: block; margin-top: 10px; padding: 9px 12px; border-radius: 12px; font-size: .85rem; color: rgba(255,255,255,.85) !important; text-decoration: none !important;
	background: rgba(255,150,214,.10); border: 1px dashed rgba(255,150,214,.45); }
.kmo-suggest-old strong { color: #ff96d6; }
.kmo-suggest-old:hover { background: rgba(255,150,214,.18); }
/* PROJECT: kulturella-match-engine — kartene (Leaflet): hvite ruter = lys containerbakgrunn som skinner gjennom sprekker mellom kartflisene.
   Mørk bakgrunn som CARTO dark_all + nøytraliser temaets generelle img-regler på flisene, og overlapp flisene en halv piksel. */
.leaflet-container { background: #0b0b0c !important; }
.leaflet-container img.leaflet-tile { max-width: none !important; max-height: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
	box-shadow: none !important; border-radius: 0 !important; outline: 1px solid transparent; mix-blend-mode: normal; }
.leaflet-container .leaflet-tile-container img.leaflet-tile { width: 256.5px !important; height: 256.5px !important; }
.leaflet-container .leaflet-tile-container img.leaflet-tile[src*="@2x"] { width: 256.5px !important; height: 256.5px !important; }
/* PROJECT: kulturella-match-engine — startsidens tallkort: overskrift + i-ikon innenfor kortet på mobil, tooltip innover på skjermen */
.kms-stat { min-width: 0; overflow: visible; }
.kms-stat__label { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.kms-stats .kms-stat:nth-child(2n) .kms-tip__box { left: auto; right: -8px; transform: none; }
.kms-stats .kms-stat:nth-child(2n+1) .kms-tip__box { left: -8px; transform: none; }
@media (max-width: 560px) {
	.kms-stat__label { font-size: .66rem; letter-spacing: .06em; gap: 5px; }
	.kms-tip__box { max-width: min(240px, calc(100vw - 48px)); }
}
/* PROJECT: kulturella-match-engine — organisasjonssiden: mer luft i toppen (også i appen) og mellom tittel, knapp og logo */
body.km-org-page .kph { padding-top: clamp(56px, 8vw, 88px) !important; }
body.km-org-page .kph--img { padding-top: clamp(84px, 11vw, 120px) !important; }
body.km-org-page .kph__title { margin-bottom: 16px !important; }
body.km-org-page .kph__btns { margin-bottom: 18px !important; }
body.km-org-page .kmo-meta { margin-top: 6px; }
@media (max-width: 600px) { body.km-org-page .kph { padding-top: calc(env(safe-area-inset-top, 0px) + 56px) !important; } }
/* PROJECT: kulturella-match-engine — Kunnskapsportalen v1.1: luft inni kortene (også mobil) og mørk overlegg over bakgrunnsbilder */
body.km-kunnskap .main-container .column_child > .uncol > .uncoltable > .uncell:not(.style-color-210407-bg) { padding: 26px 24px !important; }
body.km-kunnskap .main-container .column_child > .uncol > .uncoltable > .uncell > .uncont { padding: 0 !important; }
body.km-kunnskap .main-container .column_child .uncode_text_column, body.km-kunnskap .main-container .column_child .heading-text { padding-left: 0 !important; padding-right: 0 !important; }
body.km-kunnskap .main-container .uncode-single-media.km-logo-lys { margin-left: 0 !important; margin-right: 0 !important; }
/* Bakgrunnsbilder i kort/rader: mørk overlegg så tekst er lesbar */
body.km-kunnskap .main-container .column-background, body.km-kunnskap .main-container .row-background { border-radius: inherit; overflow: hidden; }
body.km-kunnskap .main-container .column-background::after, body.km-kunnskap .main-container .row-background::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(14,15,17,.72) 0%, rgba(14,15,17,.82) 60%, rgba(14,15,17,.9) 100%); }
body.km-kunnskap .main-container .column-background .background-overlay, body.km-kunnskap .main-container .row-background .background-overlay { z-index: 2; }
body.km-kunnskap .main-container .uncell { position: relative; }
body.km-kunnskap .main-container .uncell > .uncont { position: relative; z-index: 3; }
@media (max-width: 600px) { body.km-kunnskap .main-container .column_child > .uncol > .uncoltable > .uncell:not(.style-color-210407-bg) { padding: 22px 18px !important; } }
/* PROJECT: kulturella-match-engine — verifiseringspanelet: overskrift som de andre sidene */
.kme-vp__head { padding-top: 28px; }
.kme-vp__head .kph__title { margin: 0 0 12px !important; }
.kme-vp__head .kph__back { margin-bottom: 8px; }
/* PROJECT: kulturella-match-engine — organisasjoner fase 3–4: «Publiser som», aktiviteter/tjenester på org-siden, oversikten */
.kmo-as { max-width: 1080px; margin: 18px auto 18px; padding: 16px 20px; border-radius: 18px; background: rgba(82,190,206,.10); border: 1px solid rgba(82,190,206,.4); color: #fff; }
.kmo-as label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; font-weight: 800; }
.kmo-as label span { color: #fff; }
.kmo-as .kmo-select { width: auto !important; min-width: 220px; margin: 0 !important; }
.kmo-as small { display: block; margin-top: 8px; color: rgba(255,255,255,.7); font-size: .85rem; }
.kmo-joblink { margin: 18px 0 0 !important; font-weight: 700; }
.kmo-joblink a { color: #52bece !important; }
.kmo-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kmo-item { display: flex; flex-direction: column; gap: 8px; color: #fff !important; text-decoration: none !important; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); padding-bottom: 12px; }
.kmo-item:hover { border-color: rgba(255,150,214,.45); }
.kmo-item img, .kmo-item__ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: linear-gradient(135deg, rgba(255,150,214,.25), rgba(82,190,206,.25)); display: block; }
.kmo-item strong { padding: 0 12px; font-size: .95rem; line-height: 1.3; }
.kmo-dir { max-width: 1080px; margin: 0 auto; padding: 0 16px 48px; }
.kmo-dir__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.kmo-dir__bar .kmo-input { flex: 1 1 260px; }
.kmo-dir__bar .kmo-select { width: auto !important; margin: 0 !important; }
.kmo-dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kmo-dcard { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.08); color: #fff !important; text-decoration: none !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kmo-dcard[hidden] { display: none !important; }
.kmo-dcard:hover { border-color: rgba(255,150,214,.45); }
.kmo-dcard__logo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: #fff; padding: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; }
.kmo-dcard__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kmo-dcard__txt strong { font-size: 1rem; }
.kmo-dcard__txt small { color: rgba(255,255,255,.6); font-size: .82rem; }
.kmo-invmail { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.kmo-invmail .kmo-input { flex: 1 1 260px; }
/* PROJECT: kulturella-match-engine — «Administrer folk»: ryddig inviter-del (to kolonner, felt i full bredde) */
.kmo-invite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 4px 0 8px; }
.kmo-invite__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kmo-label { display: block; margin: 0 !important; font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.8); }
.kmo-invite .kmo-input, .kmo-search .kmo-input { display: block; width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
.kmo-invmail { display: flex !important; flex-wrap: nowrap; gap: 8px; margin: 0 !important; }
.kmo-invmail .kmo-input { flex: 1 1 auto !important; width: auto !important; }
.kmo-invmail .kph__btn { flex: 0 0 auto; white-space: nowrap; }
.kmo-invite small { font-size: .8rem; line-height: 1.4; }
@media (max-width: 760px) { .kmo-invite { grid-template-columns: 1fr; } .kmo-invmail { flex-wrap: wrap; } .kmo-invmail .kph__btn { width: 100%; } }

/* PROJECT: kulturella-match-engine — organisasjonsmedlemskap: nivåkort (2026-10-01) */
.kmo-plan .kmo-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 12px; }
.kmo-plan .kmo-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); }
.kmo-plan .kmo-tier.is-current { border-color: #52bece; box-shadow: 0 0 0 1px #52bece inset; }
.kmo-plan .kmo-tier__seats { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #ff96d6; }
.kmo-plan .kmo-tier__price { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.kmo-plan .kmo-tier__cur { font-size: 13px; color: rgba(255,255,255,.6); margin-top: auto; }
.kmo-plan .kmo-tier .kph__btn { margin-top: auto; }
.kmo-plan .kmo-plan__sub { font-size: 15px; margin: 18px 0 0; color: #fff; }
.kmo-plan .kmo-plan__note { padding: 10px 14px; border-radius: 12px; background: rgba(82,190,206,.14); color: #fff; }
.kmo-plan .kmo-plan__note--warn { background: rgba(255,150,214,.14); }
.kmo-plan .kmo-plan__msg:empty { display: none; }
@media (max-width: 700px) { .kmo-plan .kmo-tiers { grid-template-columns: 1fr; } }

/* PROJECT: kulturella-match-engine — Innstillinger/kontosiden (/account/, UM-konto) i samme design som Min side (2026-10-01) */
body.um-page-account .um-account { max-width: 1080px !important; margin: 0 auto 40px !important; padding: 0 !important; color: #fff; }
body.um-page-account .um-account .um-form > form { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
body.um-page-account .um-account .um-form > form > input, body.um-page-account .um-account .um_request_name, body.um-page-account .um-account .um-form > form > .um-clear { display: none; }
body.um-page-account .um-account-side, body.um-page-account .um-account-main { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
/* Venstre kolonne: profilkort + meny */
body.um-page-account .um-account-side { position: sticky; top: 110px; padding: 18px !important; border-radius: 22px; background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.um-page-account .um-account-side .um-account-meta, body.um-page-account div.uimob500 > .um-form > form > .um-account-meta, body.um-page-account div.uimob340 > .um-form > form > .um-account-meta { display: flex !important; align-items: center; gap: 14px; padding: 4px 4px 16px !important; margin: 0 0 12px !important; background: none !important; border-bottom: 1px solid rgba(255,255,255,.08); }
body.um-page-account .um-account-meta-img img { width: 56px !important; height: 56px !important; border-radius: 50% !important; object-fit: cover; border: 2px solid rgba(255,150,214,.5); }
body.um-page-account .um-account-meta-img { margin: 0 !important; float: none !important; }
body.um-page-account .um-account-name { float: none !important; padding: 0 !important; margin: 0 !important; text-align: left; }
body.um-page-account .um-account-name > a { color: #fff !important; font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
body.um-page-account .um-account-profile-link a { color: #52bece !important; font-size: .85rem; font-weight: 700; }
body.um-page-account .um-account-side ul { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-direction: column; gap: 4px; }
body.um-page-account .um-account-side li { margin: 0 !important; }
body.um-page-account .um-account-side li a { display: flex !important; align-items: center; gap: 12px; height: auto !important; padding: 11px 14px !important; border-radius: 14px; background: transparent !important; color: rgba(255,255,255,.78) !important; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none !important; transition: background .2s ease, color .2s ease; }
body.um-page-account .um-account-side li a:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
body.um-page-account .um-account-side li a.current { background: linear-gradient(90deg, rgba(255,150,214,.22), rgba(82,190,206,.22)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
body.um-page-account .um-account-side li a .um-account-icon, body.um-page-account .um-account-side li a .um-account-title, body.um-page-account .um-account-side li a .um-account-arrow { position: static !important; float: none !important; width: auto !important; height: auto !important; line-height: 1 !important; padding: 0 !important; color: inherit !important; }
body.um-page-account .um-account-side li a .um-account-icon { width: 20px !important; text-align: center; color: #ff96d6 !important; font-size: 16px; }
body.um-page-account .um-account-side li a .um-account-arrow { margin-left: auto; opacity: .5; }
body.um-page-account .um-account-side li a .um-account-icontip { display: none !important; }
/* Høyre kolonne: innholdet i fanen som et mørkt kort */
body.um-page-account .um-account-main { padding: 26px 30px 30px !important; border-radius: 22px; background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 0; }
body.um-page-account .um-account-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 20px !important; padding: 0 0 14px !important; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff !important; font-size: 1.35rem !important; font-weight: 800 !important; line-height: 1.2 !important; }
body.um-page-account .um-account-heading i { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 !important; border-radius: 12px; background: rgba(255,150,214,.14); color: #ff96d6 !important; font-size: 17px !important; }
body.um-page-account .um-account-main p, body.um-page-account .um-account-main li { color: rgba(255,255,255,.75); line-height: 1.6; }
body.um-page-account .um-account-main a:not(.um-button):not(.km-billing__cta) { color: #52bece; }
body.um-page-account .um-account .um-field { padding: 0 0 18px !important; }
body.um-page-account .um-account .um-field-label { margin-bottom: 8px !important; }
body.um-page-account .um-account .um-field-label label, body.um-page-account .um-account .um-field-label strong { color: #fff !important; font-weight: 700 !important; font-size: .95rem !important; }
body.um-page-account .um-account .um-field-label .um-req { color: #ff96d6 !important; }
body.um-page-account .um-account input.um-form-field, body.um-page-account .um-account select, body.um-page-account .um-account textarea,
body.um-page-account .um-account .select2-container .select2-selection { min-height: 48px; padding: 12px 16px !important; border-radius: 14px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; font-size: 1rem !important; box-shadow: none !important; transition: border-color .2s ease, background .2s ease; }
body.um-page-account .um-account .select2-container .select2-selection__rendered { color: #fff !important; line-height: 22px !important; padding: 0 !important; }
body.um-page-account .um-account input.um-form-field:focus, body.um-page-account .um-account select:focus, body.um-page-account .um-account textarea:focus { border-color: #52bece !important; background: rgba(82,190,206,.08) !important; outline: none; }
body.um-page-account .um-account input.um-form-field[disabled] { opacity: .6; cursor: not-allowed; }
body.um-page-account .um-account .um-field-area-password { position: relative; }
body.um-page-account .um-account .um-toggle-password { color: rgba(255,255,255,.6) !important; }
/* Avkrysning/radio (UM tegner egne ikoner) */
body.um-page-account .um-account .um-field-checkbox, body.um-page-account .um-account .um-field-radio { display: flex !important; align-items: center; gap: 10px; padding: 8px 0 !important; color: rgba(255,255,255,.85) !important; }
body.um-page-account .um-account .um-field-checkbox-state, body.um-page-account .um-account .um-field-radio-state { position: static !important; color: rgba(255,255,255,.45) !important; font-size: 22px !important; line-height: 1 !important; }
body.um-page-account .um-account .um-field-checkbox.active .um-field-checkbox-state, body.um-page-account .um-account .um-field-radio.active .um-field-radio-state { color: #52bece !important; }
body.um-page-account .um-account .um-field-checkbox-option, body.um-page-account .um-account .um-field-radio-option { margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.85) !important; line-height: 1.4 !important; }
/* Lagre-knappen: rund pille i paletten; «Slett konto» som rosa omriss */
body.um-page-account .um-account .um-col-alt { margin-top: 10px !important; }
body.um-page-account .um-account .um-left, body.um-page-account .um-account .um-right { float: none !important; width: auto !important; }
body.um-page-account .um-account input.um-button, body.um-page-account .um-account a.um-button { width: auto !important; min-width: 180px; padding: 14px 28px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, #ff96d6, #52bece) !important; color: #111 !important; font-weight: 800 !important; font-size: 1rem !important; box-shadow: 0 0 18px rgba(255,150,214,.25); cursor: pointer; transition: transform .15s ease, background .2s ease; }
body.um-page-account .um-account input.um-button:hover { background: linear-gradient(90deg, #ffb0e0, #7dd3de) !important; transform: translateY(-1px); }
body.um-page-account .um-account .um-account-tab-delete input.um-button { background: transparent !important; color: #ff96d6 !important; box-shadow: inset 0 0 0 1.5px #ff96d6 !important; }
body.um-page-account .um-account .um-account-tab-delete input.um-button:hover { background: rgba(255,150,214,.14) !important; }
/* Medlemskap-fanen */
body.um-page-account .km-billing__plan { background: rgba(255,255,255,.04) !important; border-radius: 16px !important; padding: 16px 18px !important; }
body.um-page-account .km-billing__cta { align-self: flex-start; padding: 13px 24px !important; color: #111 !important; background: linear-gradient(90deg, #ff96d6, #52bece) !important; }
/* Mobil: UM bytter til trekkspill (.um-account-nav) – hver fane blir en egen rad/kort */
@media (max-width: 800px) {
	body.um-page-account .um-account .um-form > form { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	body.um-page-account .um-account-side { position: static; }
}
body.um-page-account .um-account > .um-form > form > .um-account-meta { grid-column: 1 / -1; padding: 16px 18px !important; border-radius: 22px; background: rgba(20,22,24,.72) !important; border: 1px solid rgba(255,255,255,.08); }
body.um-page-account .um-account-main .um-account-nav a { display: flex !important; align-items: center; gap: 10px; margin: 0 0 8px !important; padding: 14px 16px !important; border-radius: 14px; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08); color: #fff !important; font-weight: 700; text-decoration: none !important; }
body.um-page-account .um-account-main .um-account-nav a.current { background: linear-gradient(90deg, rgba(255,150,214,.22), rgba(82,190,206,.22)) !important; }
body.um-page-account .um-account-main .um-account-nav a .ico { order: -1; position: static !important; color: #ff96d6 !important; }
body.um-page-account .um-account-main .um-account-nav a .arr { position: static !important; margin-left: auto; opacity: .6; }
body.um-page-account .um-account-main .um-account-nav + .um-account-tab { padding: 4px 4px 14px; }
body.um-page-account div.uimob500 .um-form > form, body.um-page-account div.uimob340 .um-form > form { grid-template-columns: minmax(0, 1fr); }
/* Mellombredde (UM-klassen uimob800): behold navn og fanetitler i menyen i stedet for bare ikoner */
body.um-page-account .um-account-side .um-account-meta-img-b, body.um-page-account .um-account-side .um-account-icontip { display: none !important; }
body.um-page-account .um-account-side .um-account-meta-img, body.um-page-account .um-account-side .um-account-name { display: block !important; }
body.um-page-account .um-account-side .um-account-icon, body.um-page-account .um-account-side .um-account-title, body.um-page-account .um-account-side .um-account-arrow { display: inline-block !important; }

/* PROJECT: kulturella-match-engine — /medlemsskap/: lukkbar melding om organisasjonsmedlemskap (nederst, liten) */
.kmo-paynote { position: fixed; z-index: 100010; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); transform: translateX(-50%); width: min(520px, calc(100% - 24px));
	display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: rgba(20,22,24,.94); border: 1px solid rgba(82,190,206,.45); box-shadow: 0 8px 30px rgba(0,0,0,.45);
	color: rgba(255,255,255,.85); font-size: .88rem; line-height: 1.4; }
.kmo-paynote[hidden] { display: none !important; }
.kmo-paynote span { flex: 1; padding-top: 3px; }
.kmo-paynote a { color: #52bece !important; font-weight: 700; }
.kmo-paynote__x { flex: 0 0 32px; width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 20px !important; line-height: 32px !important; cursor: pointer; }
.kmo-paynote__x:hover { background: rgba(255,150,214,.22) !important; }

/* PROJECT: kulturella-match-engine — betalingsboks på booking: overskrift + punktliste (2026-10-01) */
.kme-bk-pay.kme-bk-pay--box { display: block; padding: 14px 16px; font-weight: 400; }
.kme-bk-pay--box .kme-bk-pay__t { display: block; margin: 0 0 8px; font-size: 14.5px; font-weight: 800; color: #fff; }
.kme-bk-pay--box.kme-bk-pay--paid .kme-bk-pay__t { color: #3ecf8e; }
.kme-bk-pay--box .kme-bk-pay__l { margin: 0 0 4px !important; padding: 0 0 0 18px !important; list-style: disc; }
.kme-bk-pay--box .kme-bk-pay__l li { margin: 0 0 4px !important; padding: 0 !important; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.8); list-style: disc; }
.kme-bk-pay--box .kme-bk-pay__l li::marker { color: #52bece; }
.kme-bk-pay--box .kme-bk-btn { margin-top: 10px; }
/* «Venter på betaling»: oransje merke */
.kme-bk-card .kme-bk-card__status.kme-bk-card__status--pay { background: #f5a623 !important; border-color: #f5a623 !important; color: #111 !important; font-weight: 800; }
.kme-bk-card:has(.kme-bk-card__status--pay) .kme-bk-pay--box:not(.kme-bk-pay--paid) { background: rgba(245,166,35,.10) !important; border-color: rgba(245,166,35,.45) !important; }
.kme-bk-card:has(.kme-bk-card__status--pay) .kme-bk-pay--box .kme-bk-pay__l li::marker { color: #f5a623; }
/* Endringsforslag på booking */
.kme-bk-pay--box.kme-bk-change { background: rgba(124,92,255,.10) !important; border-color: rgba(124,92,255,.45) !important; }
.kme-bk-pay--box.kme-bk-change .kme-bk-pay__l li::marker { color: #a78bfa; }
.kme-bk-card__hint { margin: 0 0 10px; font-size: 13px; color: rgba(255,255,255,.7); }

/* PROJECT: kulturella-match-engine — skjema for endring/motforslag på booking: felt innenfor boksen (iOS-datofelt har egen minstebredde) */
.kme-bk-card__form { gap: 14px; padding: 16px; }
.kme-bk-card__form .kme-book__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px; }
.kme-bk-card__form label { min-width: 0; gap: 6px; font-size: .85rem; font-weight: 700; }
.kme-bk-card__form input, .kme-bk-card__form textarea { display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; border-radius: 12px !important; font-size: 16px !important; }
.kme-bk-card__form input { height: 46px !important; padding: 0 12px !important; line-height: 46px; }
.kme-bk-card__form textarea { min-height: 90px; padding: 12px !important; }
.kme-bk-card__form input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
.kme-bk-card__form input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.kme-bk-card__form .kme-bk-card__hint { margin: 0; }
.kme-bk-card__form .kme-bk-card__actions { margin-top: 2px; }
.kme-bk-card__form .kme-bk-btn--ghost { border: 1px solid rgba(255,255,255,.22) !important; }
/* Utført-markering: grønn = venter på frist, rød = bestridt */
.kme-bk-pay--box.kme-bk-done { background: rgba(62,207,142,.08) !important; border-color: rgba(62,207,142,.4) !important; }
.kme-bk-pay--box.kme-bk-done--dispute { background: rgba(229,72,77,.10) !important; border-color: rgba(229,72,77,.5) !important; }
.kme-bk-btn--done_dispute { border-color: rgba(229,72,77,.6) !important; color: #ff8a8e !important; }
/* Enkle betalingsstatuser («Betalt 3 kr ✓», «Utbetalt», «Refundert»): ikon og tekst samlet til venstre */
.kme-bk-pay:not(.kme-bk-pay--box) { justify-content: flex-start !important; gap: 8px; text-align: left; }

/* PROJECT: kulturella-match-engine — ordrebekreftelse i popup (Mine bookinger) */
.kme-ord-modal { position: fixed; inset: 0; z-index: 100006; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.kme-ord-modal[hidden] { display: none !important; }
.kme-ord-modal__box { position: relative; width: min(820px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 22px; background: #141618; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
.kme-ord-modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 8px 16px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(20,22,24,.9) !important; color: #fff !important; font-weight: 800 !important; font-size: 14px !important; line-height: 1 !important; cursor: pointer; }
.kme-ord-modal__x:hover { border-color: #ff96d6 !important; }
.kme-ord-modal__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 0; }
.kme-ord-modal__body .kme-agr { padding: 12px 20px 24px !important; }
.kme-ord-modal__body .kme-agr__bar > a { display: none !important; } /* «Tilbake til bookinger» trengs ikke i popup */
.kme-ord-modal__body .kme-agr__bar { padding-right: 90px; }
.kme-ord-modal__load, .kme-ord-modal__body .kme-cands-msg { padding: 40px 24px; text-align: center; color: rgba(255,255,255,.75); }
/* Ordren i popup: ikke full skjermbredde (regelen over gjelder egen side) */
.kme-ord-modal__body .kme-agr { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 12px 16px 20px !important; }
.kme-ord-modal__body .kme-agr__doc { width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow-wrap: anywhere; }
.kme-ord-modal__body .kme-agr__parties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 600px) { .kme-ord-modal__body .kme-agr__parties { grid-template-columns: minmax(0, 1fr); } }
.kme-ord-modal__body { overflow-x: hidden; }
/* «Gi referanse» oppe ved navnet */
.kme-bk-card__who .kme-bk-ref--top { display: inline-flex; margin-left: 10px; vertical-align: middle; }
.kme-bk-card__who .kme-bk-ref--top > * { padding: 4px 12px !important; font-size: 12px !important; min-height: 0 !important; line-height: 1.3 !important; }

/* PROJECT: kulturella-match-engine — tjenesteskjemaet (body.km-tjform: /ny-kulturtjeneste/ og Rediger tjeneste) i sidens design (2026-10-01) */
body.km-tjform .km-tjform-wrap, body.km-tjform .fpsm-front-form { max-width: 1080px; margin: 0 auto; }
body.km-tjform .km-tj-note { max-width: 1080px; margin: 0 auto 14px; padding: 12px 16px; border-radius: 14px; background: rgba(245,166,35,.10); border: 1px solid rgba(245,166,35,.4); color: rgba(255,255,255,.9); font-size: .95rem; }
body.km-tjform .km-tj-note a { color: #f5a623 !important; font-weight: 800; }
body.km-tjform .km-tj-note--ok { background: rgba(62,207,142,.10); border-color: rgba(62,207,142,.4); }
body.km-tjform .km-tj-note--ok strong { color: #3ecf8e; }
body.km-tjform .fpsm-front-form { padding: 26px 30px 30px !important; border-radius: 22px; background: rgba(20,22,24,.72) !important; border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; box-sizing: border-box; }
body.km-tjform .fpsm-field-wrap { margin: 0 0 22px !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.km-tjform .fpsm-field-wrap > label { display: block; margin: 0 0 8px !important; color: #fff !important; font-weight: 800 !important; font-size: 1rem !important; line-height: 1.35; }
body.km-tjform .fpsm-field { width: 100% !important; }
body.km-tjform .fpsm-field-note { margin-top: 6px !important; color: rgba(255,255,255,.6) !important; font-size: .85rem !important; font-style: normal !important; }
body.km-tjform .fpsm-error { color: #ff8a8e !important; font-size: .85rem; }
body.km-tjform .fpsm-field input[type="text"], body.km-tjform .fpsm-field input[type="url"], body.km-tjform .fpsm-field input[type="number"], body.km-tjform .fpsm-field input[type="email"],
body.km-tjform .fpsm-field select, body.km-tjform .fpsm-field textarea, body.km-tjform .kmo-sup__sel {
	width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-height: 48px; padding: 12px 16px !important; border-radius: 14px !important;
	background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; font-size: 16px !important; box-shadow: none !important; }
body.km-tjform .fpsm-field textarea { min-height: 120px; line-height: 1.5; }
body.km-tjform .fpsm-field select option, body.km-tjform .kmo-sup__sel option { background: #141618; color: #fff; }
body.km-tjform .fpsm-field input:focus, body.km-tjform .fpsm-field select:focus, body.km-tjform .fpsm-field textarea:focus, body.km-tjform .kmo-sup__sel:focus { border-color: #52bece !important; background: rgba(82,190,206,.08) !important; outline: none; }
body.km-tjform .fpsm-field input::placeholder, body.km-tjform .fpsm-field textarea::placeholder { color: rgba(255,255,255,.4); }
/* Beskrivelse (WordPress-editor) */
body.km-tjform .wp-editor-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
body.km-tjform .wp-editor-container { border: 0 !important; }
body.km-tjform .mce-top-part::before { box-shadow: none !important; }
body.km-tjform .mce-panel, body.km-tjform .mce-toolbar-grp, body.km-tjform .quicktags-toolbar { background: #1c1e21 !important; border-color: rgba(255,255,255,.1) !important; }
body.km-tjform .mce-btn button, body.km-tjform .mce-ico { color: #fff !important; }
body.km-tjform .mce-btn:hover, body.km-tjform .mce-btn.mce-active { background: rgba(255,255,255,.1) !important; border-color: transparent !important; }
body.km-tjform .wp-editor-area { background: #0e0f10 !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; }
body.km-tjform .wp-switch-editor { background: #1c1e21 !important; color: rgba(255,255,255,.75) !important; border-color: rgba(255,255,255,.1) !important; }
/* Kulturfelt / tjenestetype / kompetanse: klikkbare piller (hele pillen krysser av – etikettene i skjemaet peker ikke på boksene) */
body.km-tjform .fpsm-field > .fpsm-each-term-checkbox, body.km-tjform .fpsm-checkbox-list-wrap { display: inline-flex; }
body.km-tjform .fpsm-field:has(> .fpsm-each-term-checkbox) { display: flex !important; flex-wrap: wrap; gap: 8px; }
body.km-tjform .fpsm-checkbox-list-wrap { display: flex !important; flex-wrap: wrap; gap: 8px; }
body.km-tjform .fpsm-checkbox, body.km-tjform .fpsm-radio { position: relative; display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 !important; }
body.km-tjform .fpsm-checkbox input, body.km-tjform .fpsm-radio input { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; cursor: pointer; z-index: 2; }
body.km-tjform .fpsm-checkbox label, body.km-tjform .fpsm-radio label { display: inline-block !important; margin: 0 !important; padding: 9px 16px !important; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85) !important; font-weight: 700 !important; font-size: .9rem !important; line-height: 1.2; transition: background .15s ease, border-color .15s ease; }
body.km-tjform .fpsm-checkbox label::before, body.km-tjform .fpsm-radio label::before, body.km-tjform .fpsm-checkbox label::after, body.km-tjform .fpsm-radio label::after { display: none !important; }
body.km-tjform .fpsm-checkbox:hover label, body.km-tjform .fpsm-radio:hover label { border-color: #52bece; }
body.km-tjform .fpsm-checkbox:has(input:checked) label, body.km-tjform .fpsm-radio:has(input:checked) label { background: linear-gradient(90deg, #ff96d6, #52bece); border-color: transparent; color: #111 !important; }
body.km-tjform .fpsm-checkbox:has(input:focus-visible) label, body.km-tjform .fpsm-radio:has(input:focus-visible) label { outline: 2px solid #52bece; outline-offset: 2px; }
/* Bildeopplasting */
body.km-tjform .fpsm-file-uploader .qq-uploader, body.km-tjform .fpsm-file-uploader .qq-upload-drop-area, body.km-tjform .fpsm-file-uploader .qq-upload-button { border-radius: 14px !important; }
body.km-tjform .fpsm-file-uploader .qq-upload-drop-area { align-items: center; justify-content: center; background: rgba(82,190,206,.12) !important; border: 2px dashed #52bece !important; border-radius: 14px !important; color: #fff !important; }
body.km-tjform .fpsm-file-uploader .qq-upload-button { display: flex !important; align-items: center; justify-content: center; min-height: 90px; padding: 16px !important; width: 100% !important; box-sizing: border-box;
	background: rgba(255,255,255,.03) !important; border: 2px dashed rgba(255,255,255,.22) !important; color: rgba(255,255,255,.85) !important; font-weight: 700; box-shadow: none !important; }
body.km-tjform .fpsm-file-uploader .qq-upload-button:hover { border-color: #52bece !important; }
body.km-tjform .fpsm-file-preview-wrap img { border-radius: 12px; }
/* Leverandør-velgeren */
body.km-tjform .kmo-sup { margin: 0 0 10px; }
body.km-tjform .kmo-sup small, body.km-tjform .kmo-sup__hint { display: block; margin-top: 6px; color: rgba(255,255,255,.6); font-size: .85rem; }
body.km-tjform .kmo-sup a { color: #52bece !important; font-weight: 700; }
body.km-tjform input.kmo-sup__locked { opacity: .65; cursor: not-allowed; }
/* Send-knappen */
body.km-tjform .fpsm-has-submit-btn { margin-top: 8px !important; }
body.km-tjform input[type="submit"].fpsm-submit-draft, body.km-tjform .fpsm-front-form input[type="submit"] { width: auto !important; min-width: 220px; padding: 15px 30px !important; border: 0 !important; border-radius: 999px !important;
	background: linear-gradient(90deg, #ff96d6, #52bece) !important; color: #111 !important; font-weight: 800 !important; font-size: 1rem !important; box-shadow: 0 0 18px rgba(255,150,214,.25); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
body.km-tjform .fpsm-front-form input[type="submit"]:hover { background: linear-gradient(90deg, #ffb0e0, #7dd3de) !important; }
body.km-tjform .fpsm-form-message { border-radius: 14px; }
@media (max-width: 600px) { body.km-tjform .fpsm-front-form { padding: 18px !important; } }
/* Nedtrekkslister: malen (fpsm-template-6) gir boksen rundt en lys bakgrunn → mørk boks, lys tekst, lesbare valg */
body.km-tjform .fpsm-front-form .fpsm-field .fpsm-select-field { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; position: relative; }
body.km-tjform .fpsm-front-form .fpsm-field .fpsm-select-field select, body.km-tjform .fpsm-front-form .kmo-sup__sel {
	-webkit-appearance: none; appearance: none; background-color: #1b1d20 !important; color: #fff !important; padding-right: 42px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2352bece' stroke-width='2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 16px center !important; }
body.km-tjform .fpsm-front-form .fpsm-select-field::before, body.km-tjform .fpsm-front-form .fpsm-select-field::after { display: none !important; }
body.km-tjform select option, body.km-tjform select optgroup { background: #1b1d20 !important; color: #fff !important; }
/* WordPress-editoren: formatvelger («Avsnitt»), menyer og «Legg til media» */
body.km-tjform .mce-listbox, body.km-tjform .mce-listbox button { background: #2a2d31 !important; border-color: rgba(255,255,255,.15) !important; }
body.km-tjform .mce-listbox .mce-txt, body.km-tjform .mce-listbox i.mce-caret { color: #fff !important; border-top-color: #fff !important; }
body.km-tjform .mce-menu, body.km-tjform .mce-floatpanel { background: #1b1d20 !important; border-color: rgba(255,255,255,.15) !important; }
body.km-tjform .mce-menu .mce-menu-item, body.km-tjform .mce-menu .mce-text, body.km-tjform .mce-menu .mce-menu-shortcut, body.km-tjform .mce-menu-item * { color: #fff !important; }
body.km-tjform .mce-menu .mce-menu-item:hover, body.km-tjform .mce-menu .mce-menu-item.mce-active, body.km-tjform .mce-menu .mce-menu-item:focus { background: rgba(82,190,206,.25) !important; }
body.km-tjform .wp-media-buttons .button, body.km-tjform .wp-media-buttons .insert-media { background: #2a2d31 !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 999px !important; box-shadow: none !important; }
body.km-tjform .wp-media-buttons .button .wp-media-buttons-icon::before { color: #52bece !important; }
/* Nedtrekkslister som piller (tjenesteskjemaet) */
body.km-tjform select.km-pills-src { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none; }
body.km-tjform .km-pills { display: flex; flex-wrap: wrap; gap: 8px; }
body.km-tjform .km-pills .km-pill { display: inline-flex; align-items: center; margin: 0 !important; padding: 9px 16px !important; min-height: 0 !important; height: auto !important; border-radius: 999px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.18) !important;
	color: rgba(255,255,255,.85) !important; font-weight: 700 !important; font-size: .9rem !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
body.km-tjform .km-pills .km-pill:hover { border-color: #52bece !important; }
body.km-tjform .km-pills .km-pill.is-on { background: linear-gradient(90deg, #ff96d6, #52bece) !important; border-color: transparent !important; color: #111 !important; }
body.km-tjform .km-pills .km-pill:focus-visible { outline: 2px solid #52bece; outline-offset: 2px; }

/* PROJECT: kulturella-match-engine — «Publiser en ny aktivitet» (/job-post/, JobBoardWP) i sidens design (2026-10-01) */
body.km-tjform .km-jbform-wrap { max-width: 1080px; margin: 0 auto; }
body.km-tjform #jb-job-submission { padding: 26px 30px 30px !important; border-radius: 22px; background: rgba(20,22,24,.72) !important; border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; box-sizing: border-box; }
body.km-tjform #jb-job-submission .jb-form-section-title { margin: 6px 0 18px !important; padding: 0 0 12px !important; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff !important; font-size: 1.3rem !important; font-weight: 800 !important; }
body.km-tjform #jb-job-submission .jb-form-section-title:not(:first-child) { margin-top: 30px !important; }
body.km-tjform #jb-job-submission .jb-form-row { display: block !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.km-tjform #jb-job-submission .jb-form-row-label { display: block !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; color: #fff !important; font-weight: 800 !important; font-size: 1rem !important; line-height: 1.35; }
body.km-tjform #jb-job-submission .jb-req { color: #ff96d6 !important; margin-left: 2px; }
body.km-tjform #jb-job-submission .jb-form-field-content { display: block !important; width: 100% !important; }
body.km-tjform #jb-job-submission input[type="text"], body.km-tjform #jb-job-submission input[type="number"], body.km-tjform #jb-job-submission input[type="url"], body.km-tjform #jb-job-submission input[type="email"], body.km-tjform #jb-job-submission textarea, body.km-tjform #jb-job-submission select {
	width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-height: 48px; padding: 12px 16px !important; border-radius: 14px !important;
	background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; font-size: 16px !important; box-shadow: none !important; }
body.km-tjform #jb-job-submission input:focus, body.km-tjform #jb-job-submission textarea:focus { border-color: #52bece !important; background: rgba(82,190,206,.08) !important; outline: none; }
body.km-tjform #jb-job-submission input::placeholder { color: rgba(255,255,255,.4); }
body.km-tjform #jb-job-submission .jb-form-field-content:has(.km-pills) .select2-container { display: none !important; }
/* Sted: valgknappene som piller, tekstfeltet under */
body.km-tjform #jb-job-submission .jb-field-conditional_radio-type .jb-form-field-content { display: flex !important; flex-wrap: wrap; gap: 8px; }
body.km-tjform #jb-job-submission .jb-field-conditional_radio-type .jb-form-field-content > label { order: 0; position: relative; display: inline-flex !important; align-items: center; margin: 0 !important; padding: 9px 16px !important; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85) !important; font-weight: 700; font-size: .9rem; cursor: pointer; }
body.km-tjform #jb-job-submission .jb-field-conditional_radio-type .jb-form-field-content > label input { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; cursor: pointer; }
body.km-tjform #jb-job-submission .jb-field-conditional_radio-type .jb-form-field-content > label:has(input:checked) { background: linear-gradient(90deg, #ff96d6, #52bece); border-color: transparent; color: #111 !important; }
body.km-tjform #jb-job-submission .jb-field-conditional_radio-type .jb-form-field-content > span { order: 1; flex: 0 0 100%; }
/* Logo/bilde-opplasting */
body.km-tjform #jb-job-submission .jb-uploader-dropzone { border-radius: 14px !important; border: 2px dashed rgba(255,255,255,.22) !important; background: rgba(255,255,255,.03) !important; color: rgba(255,255,255,.8) !important; padding: 18px !important; }
body.km-tjform #jb-job-submission .jb-select-media, body.km-tjform #jb-job-submission .jb-change-media, body.km-tjform #jb-job-submission .jb-clear-media, body.km-tjform #jb-job-submission .jb-cancel-change-media {
	display: inline-flex; padding: 10px 18px !important; border-radius: 999px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: none !important; }
body.km-tjform #jb-job-submission .jb-uploaded img { border-radius: 12px; }
/* Knapper */
body.km-tjform #jb-job-submission .jb-form-buttons-section { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
body.km-tjform #jb-job-submission .jb-form-button { width: auto !important; min-width: 180px; padding: 15px 28px !important; border-radius: 999px !important; font-weight: 800 !important; font-size: 1rem !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important; }
body.km-tjform #jb-job-submission #jb-job-preview { background: linear-gradient(90deg, #ff96d6, #52bece) !important; border: 0 !important; color: #111 !important; box-shadow: 0 0 18px rgba(255,150,214,.25) !important; }
body.km-tjform #jb-job-submission #jb-job-draft { background: transparent !important; border: 1.5px solid rgba(255,255,255,.35) !important; color: #fff !important; }
body.km-tjform #jb-job-submission #jb-job-draft:hover { border-color: #ff96d6 !important; }
body.km-tjform #jb-job-submission .kmo-sup { margin: 0 0 10px; }
@media (max-width: 600px) { body.km-tjform #jb-job-submission { padding: 18px !important; } body.km-tjform #jb-job-submission .jb-form-button { flex: 1 1 100%; } }
/* Fanene på Mine bookinger: «Mottatt 5 (2 nye)» – nye som uthevet tekst i parentes, ikke merke */
.kme-bk__tabs .kme-bk__tab b { background: none !important; padding: 0 !important; margin-left: 4px; border-radius: 0; font-size: inherit !important; font-weight: 800; color: #ff96d6 !important; }
.kme-bk__tabs .kme-bk__tab.is-on b { color: #111 !important; }
/* Totalt antall i en sirkel på fanene */
.kme-bk__tabs .kme-bk__tab { display: inline-flex !important; align-items: center; }
.kme-bk__tabs .kme-bk__n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.kme-bk__tabs .kme-bk__tab.is-on .kme-bk__n { background: rgba(17,17,17,.85); color: #fff; }

/* PROJECT: kulturella-match-engine — profil i popup fra medlemskartet */
.kmm-pp { position: fixed; inset: 0; z-index: 100008; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.kmm-pp[hidden] { display: none !important; }
.kmm-pp__box { position: relative; width: min(1000px, 100%); height: min(88vh, 100%); height: min(88dvh, 100%); border-radius: 22px; overflow: hidden; background: #141618; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.kmm-pp__frame { width: 100%; height: 100%; border: 0; display: block; background: #141618; }
.kmm-pp__x { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 8px 16px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.25) !important; background: rgba(20,22,24,.92) !important; color: #fff !important; font-weight: 800 !important; font-size: 14px !important; line-height: 1 !important; cursor: pointer; }
.kmm-pp__x:hover { border-color: #ff96d6 !important; }
.kmm-pp__load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); z-index: 1; pointer-events: none; }
.kmm-pp__load[hidden] { display: none; }
.kmk-pop .kmk-pop__av, .kmk-pop .kmk-pop__id strong { cursor: pointer; }
@media (max-width: 600px) { .kmm-pp { padding: 0; } .kmm-pp__box { width: 100%; height: 100%; border-radius: 0; border: 0; } }
/* Leaflet/OpenStreetMap-merket helt nederst i hjørnet (ikke over bunnpanelet) */
.kmk-fs .leaflet-control-attribution { position: fixed !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; z-index: 1200; font-size: 10px !important; line-height: 1.4 !important; padding: 1px 6px !important; border-radius: 6px 0 0 0; background: rgba(0,0,0,.55) !important; color: rgba(255,255,255,.6) !important; }
.kmk-fs .leaflet-control-attribution a { color: rgba(255,255,255,.75) !important; }
/* Profil-popupen må ligge OVER fullskjermskartet (.kmk-fs = 100050) */
.kmm-pp { z-index: 100200 !important; }
html.kmk-app .kmm-pp { padding-top: calc(env(safe-area-inset-top, 0px) + 84px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
@media (max-width: 600px) { html.kmk-app .kmm-pp__box { border-radius: 18px; } }

/* PROJECT: kulturella-match-engine — kartboblens knapper i sidens stil (2026-10-01): gradientpille for hovedvalget,
   omriss-piller for resten, runde ikonknapper med samme omriss; lyser rosa/blått ved hover. */
.kmk-pop .kmk-pop__btns .kmk-pop__btn { min-height: 40px; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.06) !important; color: #fff !important; font-weight: 800 !important; font-size: 13px; box-shadow: none !important; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.kmk-pop .kmk-pop__btns .kmk-pop__btn:hover { border-color: #52bece !important; background: rgba(82,190,206,.12) !important; transform: translateY(-1px); }
.kmk-pop .kmk-pop__btns .kmk-pop__btn.kmk-pop__btn--profile { background: linear-gradient(90deg, #ff96d6, #52bece) !important; border-color: transparent !important; color: #111 !important; box-shadow: 0 0 14px rgba(255,150,214,.25) !important; }
.kmk-pop .kmk-pop__btns .kmk-pop__btn.kmk-pop__btn--profile:hover { background: linear-gradient(90deg, #ffb0e0, #7dd3de) !important; }
.kmk-pop .kmk-pop__btns .kmk-pop__btn.kmk-pop__btn--follow { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; }
.kmk-pop .kmk-pop__btns .kmk-pop__btn.kmk-pop__btn--follow:hover { border-color: #ff96d6 !important; background: rgba(255,150,214,.12) !important; }
.kmk-pop .kmk-pop__btns .kmk-pop__btn.kmk-pop__btn--follow.is-following { border-color: rgba(62,207,142,.6) !important; background: rgba(62,207,142,.12) !important; color: #3ecf8e !important; }
.kmk-pop .kmk-pop__btns .kmk-pop__btn.kmk-pop__btn--icon, .kmk-pop .kmk-pop__btns .kmk-pop__btn.kmk-pop__save { flex: 0 0 40px !important; width: 40px; min-width: 40px; padding: 0 !important; }
.kmk-pop .kmk-pop__btns .kmk-pop__btn.kmk-pop__save.is-saved { background: rgba(255,150,214,.2) !important; border-color: #ff96d6 !important; color: #ff96d6 !important; }
/* Organisasjonspriser per antall medlemmer på landingssidene */
.kml-plan .kml-tiers { list-style: none !important; margin: 14px 0 6px !important; padding: 0 !important; display: grid; gap: 8px; }
.kml-plan .kml-tiers li { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 !important; padding: 10px 14px !important; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); list-style: none !important; }
.kml-plan .kml-tiers li::before { display: none !important; }
.kml-plan .kml-tiers li span { color: rgba(255,255,255,.8); }
.kml-plan .kml-tiers li strong { color: #52bece; font-weight: 800; white-space: nowrap; }
.kml-plan .kml-tiers__note { margin: 0 0 12px !important; font-size: .9rem; color: rgba(255,255,255,.65); }
/* Antall referanser rett bak snittet: «★ 5,0 (1)» på én linje */
.kmk-pop .kmk-pop__chips .kmk-pop__chip--stars { display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; gap: 4px; white-space: nowrap; }
.kmk-pop .kmk-pop__chips .kmk-pop__chip--stars small { display: inline !important; position: static !important; margin: 0 !important; font-size: .85em; line-height: inherit; vertical-align: baseline; opacity: .75; }
/* Landvelger øverst i kartpanelet */
.kmk-rad .kmk-rad__land { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.kmk-rad .kmk-rad__land[hidden] { display: none !important; }
.kmk-rad .kmk-rad__land span { color: rgba(255,255,255,.85); font-weight: 700; font-size: 13px; white-space: nowrap; }
.kmk-rad .kmk-rad__country { flex: 1 1 auto; max-width: 240px; min-height: 38px; padding: 6px 34px 6px 14px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.2) !important; color: #fff !important; font-weight: 700; font-size: 14px !important;
	-webkit-appearance: none; appearance: none; background: #1b1d20 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2352bece' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center !important; }
.kmk-rad .kmk-rad__country option { background: #1b1d20; color: #fff; }
/* PROJECT: kulturella-match-engine — område-knappen som nedtrekksmeny (Hele verden / land) */
.kmk-fs__body:has(.kmk-rad) { overflow: visible !important; max-height: none !important; }
.kmk-rad .kmk-rad__area { position: relative; display: inline-flex; }
.kmk-rad .kmk-rad__all { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 16px !important; border-radius: 999px !important; font-weight: 800 !important; font-size: 13px !important; cursor: pointer; white-space: nowrap;
	background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; }
.kmk-rad .kmk-rad__all.is-active { background: linear-gradient(90deg, #ff96d6, #52bece) !important; border-color: transparent !important; color: #111 !important; }
.kmk-rad .kmk-rad__all:hover { border-color: #52bece !important; }
.kmk-rad .kmk-rad__menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 1100; min-width: 210px; max-height: 280px; overflow-y: auto; margin: 0 !important; padding: 6px !important; list-style: none !important;
	border-radius: 16px; background: #1b1d20; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.kmk-rad .kmk-rad__menu[hidden] { display: none !important; }
.kmk-rad .kmk-rad__menu li { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 !important; padding: 9px 12px !important; border-radius: 10px; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none !important; }
.kmk-rad .kmk-rad__menu li::before { display: none !important; }
.kmk-rad .kmk-rad__menu li small { color: rgba(255,255,255,.55); font-weight: 700; font-size: 12px; }
.kmk-rad .kmk-rad__menu li:hover { background: rgba(82,190,206,.16); }
.kmk-rad .kmk-rad__menu li.is-on { background: linear-gradient(90deg, rgba(255,150,214,.25), rgba(82,190,206,.25)); }
/* Meldingsvinduet (UM Messaging) over fullskjermskartet */
html.kmk-fs-open .um-popup-overlay, html.kmk-fs-open .um-modal-overlay { z-index: 100300 !important; }
html.kmk-fs-open .um-popup, html.kmk-fs-open .um-modal, html.kmk-fs-open #km-inbox-popup { z-index: 100310 !important; }
/* Neste steg på startsiden (etter komplett profil) */
.km-start-next .km-start-next__lead { margin: 4px 0 12px !important; color: rgba(255,255,255,.75); }
.km-start-next ul li a { color: #fff !important; text-decoration: none !important; font-weight: 700; }
.km-start-next ul li a:hover { color: #52bece !important; }
.km-start-next ul li.is-done a { color: rgba(255,255,255,.55) !important; text-decoration: line-through !important; font-weight: 500; }
.km-start-next .km-start-next__edit { display: inline-block; margin-top: 10px; color: #52bece !important; font-weight: 700; font-size: .9rem; text-decoration: none !important; }
.km-start-next .km-start-next__edit:hover { color: #ff96d6 !important; }
/* To utmerkelser når profil + første steg er gjort (startsiden) */
.km-medals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.km-medal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(20,22,24,.72); border: 1px solid rgba(255,255,255,.08); }
.km-medal__disc { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: #111;
	background: linear-gradient(135deg, #ff96d6, #52bece); box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 0 16px rgba(255,150,214,.35); }
.km-medal:nth-child(2) .km-medal__disc { background: linear-gradient(135deg, #f5c451, #ff96d6); }
.km-medal__txt { display: flex; flex-direction: column; min-width: 0; }
.km-medal__txt strong { color: #fff; font-size: .95rem; line-height: 1.2; }
.km-medal__txt small { color: rgba(255,255,255,.6); font-size: .78rem; line-height: 1.3; }
@media (max-width: 420px) { .km-medal { padding: 10px; gap: 10px; } .km-medal__disc { flex-basis: 38px; width: 38px; height: 38px; font-size: 17px; } }
/* Tom logo-forhåndsvisning i aktivitetsskjemaet (img src="") viste et ødelagt bilde */
#jb-job-submission img[src=""], #jb-job-submission img:not([src]) { display: none !important; }
/* Skjemamalen gir tekstfeltene line-height 40px → 66px høye felt. Normaliser til 48px. */
body.km-tjform .fpsm-field input[type="text"], body.km-tjform .fpsm-field input[type="url"], body.km-tjform .fpsm-field input[type="number"], body.km-tjform .fpsm-field input[type="email"],
body.km-tjform #jb-job-submission input[type="text"], body.km-tjform #jb-job-submission input[type="number"], body.km-tjform #jb-job-submission input[type="url"] { line-height: 1.4 !important; height: 48px !important; }