/* =============================================================================
   Vores Kalundborg — Medlemsportal design system
   Placering:  /css/portal.css
   Enqueues på get_query_var('vk_portal_screen') via inc/enqueue.php
   Bygger på tokens.css + matcher page-medlemmer.css / forside.css
   Class-prefix: .vk-portal-*
   ============================================================================= */

/* ─── Page-canvas ─── */
.vk-portal-page {
    background: var(--vk-cream-muted, #F5EFE0);
    min-height: 70vh;
    padding: 0 0 96px;
    color: var(--vk-body, #3A3A3A);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.vk-portal-page *,
.vk-portal-page *::before,
.vk-portal-page *::after { box-sizing: border-box; }

.vk-portal-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Top-bar (member-name + sign-out) ─── */
.vk-portal-topbar {
    background: var(--vk-dark-green, #223428);
    color: #fff;
    padding: 14px 0;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
}
.vk-portal-topbar::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 50% 70% at 12% 50%, rgba(106,142,92,.20) 0%, rgba(106,142,92,0) 60%),
      radial-gradient(ellipse 40% 60% at 92% 50%, rgba(168,50,50,.18) 0%, rgba(168,50,50,0) 65%);
    pointer-events: none;
}
.vk-portal-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    position: relative; z-index: 1;
}
.vk-portal-brand,
.vk-portal-brand:hover,
.vk-portal-brand:focus,
.vk-portal-brand:visited {
    display: inline-flex; align-items: center; gap: 12px;
    color: #fff; text-decoration: none;
    font-family: var(--vk-font);
}
.vk-portal-brand:hover .lockup b,
.vk-portal-brand:focus .lockup b { color: #fff; }
.vk-portal-brand:hover .lockup em,
.vk-portal-brand:focus .lockup em { color: rgba(255,255,255,.75); }
.vk-portal-brand .mark {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; color: var(--vk-dark-green, #223428);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; letter-spacing: -.01em;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.vk-portal-brand:hover .mark { transform: rotate(360deg); }
.vk-portal-brand .lockup {
    display: flex; flex-direction: column; line-height: 1.1;
}
.vk-portal-brand .lockup b { font-weight: 700; font-size: 15px; letter-spacing: -.005em; }
.vk-portal-brand .lockup em {
    font-style: normal; font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,.55); letter-spacing: .14em; text-transform: uppercase;
    margin-top: 2px;
}
.vk-portal-topbar-right {
    display: inline-flex; align-items: center; gap: 12px;
}
.vk-portal-user {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 6px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9999px;
    font-size: 13px; color: rgba(255,255,255,.85); font-weight: 500;
}
.vk-portal-user .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vk-sage, #6A8E5C) 0%, var(--vk-teal, #468F9E) 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
}
.vk-portal-signout {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    background: transparent; color: #fff;
    border: 1.5px solid rgba(255,255,255,.32);
    border-radius: 9999px;
    font: 600 13px var(--vk-font);
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.vk-portal-signout:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.55);
    transform: translateY(-1px);
    color: #fff;
}

/* Mobile hamburger (currently decorative — drawer not required) */
.vk-portal-burger { display: none; }

/* ─── Layout: sidebar + main ─── */
.vk-portal-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: flex-start;
}

/* ─── Sidebar nav ─── */
.vk-portal-nav {
    position: sticky; top: 24px;
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(31,42,36,.04);
}
.vk-portal-nav-title {
    display: block;
    font: 700 11px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 12px 12px;
}
.vk-portal-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.vk-portal-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--vk-dark, #2C2C2C);
    text-decoration: none;
    font: 600 14px var(--vk-font);
    transition: background .15s, color .15s;
}
.vk-portal-nav a:hover { background: var(--vk-cream-muted, #F5EFE0); color: var(--vk-dark); }
.vk-portal-nav a[aria-current="page"] {
    background: var(--vk-sage-bg, #EEF1E5);
    color: var(--vk-sage-text, #4A6A3E);
}
.vk-portal-nav a[aria-current="page"]::before {
    content: "";
    width: 3px; height: 18px;
    background: var(--vk-sage, #6A8E5C);
    border-radius: 2px;
    margin-right: -3px;
}
.vk-portal-nav-icon {
    width: 18px; height: 18px;
    color: var(--vk-muted, #5E5E5E);
    flex-shrink: 0;
}
.vk-portal-nav a[aria-current="page"] .vk-portal-nav-icon { color: var(--vk-sage, #6A8E5C); }
.vk-portal-nav-divider {
    height: 1px; background: var(--vk-border, #D4D0C4);
    margin: 10px 6px;
}

/* ─── Page-head (in main column) ─── */
.vk-portal-pagehead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-bottom: 28px;
}
.vk-portal-pagehead-text { min-width: 0; }
.vk-portal-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    background: rgba(106,142,92,.14);
    color: var(--vk-sage-text, #4A6A3E);
    border-radius: 9999px;
    font: 700 11px var(--vk-font);
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: 12px;
}
.vk-portal-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--vk-sage, #6A8E5C);
}
.vk-portal-h1 {
    margin: 0;
    font-family: var(--vk-font);
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 40px);
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--vk-dark, #2C2C2C);
}
.vk-portal-sub {
    margin: 10px 0 0;
    font-size: 16px; line-height: 1.55;
    color: var(--vk-body, #3A3A3A);
    max-width: 640px;
}
.vk-portal-sub strong { color: var(--vk-dark); font-weight: 700; }
.vk-portal-pagehead-actions {
    display: inline-flex; gap: 10px; flex-wrap: wrap;
}

/* ─── Reusable card ─── */
.vk-portal-card {
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 16px;
    padding: 28px 30px;
    box-shadow: 0 4px 16px rgba(31,42,36,.04);
    position: relative;
}
.vk-portal-card + .vk-portal-card { margin-top: 18px; }
.vk-portal-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vk-border, #D4D0C4);
}
.vk-portal-card-title {
    margin: 0;
    font: 700 18px var(--vk-font);
    color: var(--vk-dark);
    letter-spacing: -.005em;
    display: inline-flex; align-items: center; gap: 10px;
}
.vk-portal-card-title svg { color: var(--vk-sage, #6A8E5C); flex-shrink: 0; }
.vk-portal-card-meta {
    font: 500 13px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
}

/* ─── Buttons (portal-prefixed; mirror handoff style) ─── */
.vk-portal-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--vk-red, #A83232);
    color: #fff;
    border: 0;
    border-radius: 9999px;
    font: 700 14px var(--vk-font);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 8px 20px rgba(168,50,50,.22);
}
.vk-portal-btn:hover {
    background: var(--vk-red-hover, #8F2828);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(168,50,50,.32);
    color: #fff;
}
.vk-portal-btn--sage {
    background: var(--vk-sage, #6A8E5C);
    box-shadow: 0 8px 20px rgba(106,142,92,.22);
}
.vk-portal-btn--sage:hover {
    background: var(--vk-sage-hover, #587A4B);
    box-shadow: 0 12px 26px rgba(106,142,92,.32);
}
.vk-portal-btn--ghost {
    background: transparent;
    color: var(--vk-dark, #2C2C2C);
    border: 1.5px solid var(--vk-border-strong, #C9C2A8);
    box-shadow: none;
}
.vk-portal-btn--ghost:hover {
    background: var(--vk-dark);
    color: #fff;
    border-color: var(--vk-dark);
    box-shadow: none;
}
.vk-portal-btn--small {
    padding: 9px 16px;
    font-size: 13px;
    box-shadow: none;
}
.vk-portal-btn--small:hover { box-shadow: none; }

/* ─── Status pills ─── */
.vk-portal-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: 9999px;
    font: 700 11.5px var(--vk-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.6;
    background: var(--vk-cream, #EBE4D1);
    color: var(--vk-dark);
    border: 1px solid var(--vk-border, #D4D0C4);
}
.vk-portal-pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .7;
}
.vk-portal-pill--live {
    background: rgba(106,142,92,.14);
    color: var(--vk-sage-text, #4A6A3E);
    border-color: rgba(106,142,92,.32);
}
.vk-portal-pill--pending {
    background: rgba(217,130,68,.14);
    color: #B26A28;
    border-color: rgba(217,130,68,.34);
}
.vk-portal-pill--cancel {
    background: rgba(168,50,50,.10);
    color: var(--vk-red, #A83232);
    border-color: rgba(168,50,50,.30);
}
.vk-portal-pill--past {
    background: var(--vk-cream-muted, #F5EFE0);
    color: var(--vk-muted, #5E5E5E);
    border-color: var(--vk-border, #D4D0C4);
}
.vk-portal-pill--shared {
    background: rgba(91,118,143,.14);
    color: #3E5B7A;
    border-color: rgba(91,118,143,.32);
}

/* =============================================================================
   LOG-IND — full-bleed Kordilgade hero with centered card
   ============================================================================= */
/* Lock scroll on login screen — page fills exactly one viewport. */
html:has(body.vk-login-page),
body.vk-login-page {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
}
.vk-login {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}
.vk-login-bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.vk-login-bg picture,
.vk-login-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.vk-login-bg-scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(34,52,40,.72) 0%, rgba(34,52,40,.55) 30%, rgba(34,52,40,.65) 70%, rgba(34,52,40,.85) 100%),
      radial-gradient(ellipse 80% 60% at 30% 35%, rgba(217,199,156,.18) 0%, rgba(217,199,156,0) 70%);
}
.vk-login-stage {
    position: relative; z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    padding: 28px 24px 24px;
    overflow-y: auto;
}

/* Brand pill at top-left */
.vk-login-brand {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: #fff;
    font-family: var(--vk-font);
    align-self: start; justify-self: start;
    padding: 8px 16px 8px 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    transition: background-color .2s ease, border-color .2s ease;
}
.vk-login-brand:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.26);
}
.vk-login-brand-mark {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    display: inline-flex; align-items: center; justify-content: center;
    color: #D9C79C;
}
.vk-login-brand-text {
    display: flex; flex-direction: column; line-height: 1.05; gap: 2px;
}
.vk-login-brand-text b {
    font: 700 14px var(--vk-font);
    color: #fff;
    letter-spacing: -.005em;
}
.vk-login-brand-text small {
    font: 600 10px var(--vk-font);
    color: rgba(217,199,156,.85);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Centered card */
.vk-login-card {
    align-self: center; justify-self: center;
    background: #fff;
    border-radius: 24px;
    padding: 56px 56px 48px;
    width: 100%;
    max-width: 460px;
    box-shadow:
      0 1px 2px rgba(0,0,0,.04),
      0 16px 40px rgba(0,0,0,.18),
      0 32px 80px rgba(0,0,0,.22);
}
.vk-login-card h1 {
    margin: 0 0 12px;
    font: 600 clamp(30px, 3vw, 38px) var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    letter-spacing: -.022em;
    line-height: 1.05;
}
.vk-login-lead {
    margin: 0 0 32px;
    font: 400 15px var(--vk-font);
    line-height: 1.55;
    color: var(--vk-body, #3A3A3A);
}
.vk-login-card form {
    display: flex; flex-direction: column; gap: 14px;
}
.vk-login-card .vk-portal-input {
    position: relative;
}
.vk-login-card .vk-portal-input input {
    width: 100%;
    padding: 22px 16px 10px;
    background: #FAFAF7;
    border: 1.5px solid var(--vk-border, #D4D0C4);
    border-radius: 12px;
    font: 500 15px var(--vk-font);
    color: var(--vk-dark);
    outline: 0;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.vk-login-card .vk-portal-input input:hover { border-color: #C9C2A8; }
.vk-login-card .vk-portal-input input:focus {
    background: #fff;
    border-color: var(--vk-sage, #6A8E5C);
    box-shadow: 0 0 0 4px rgba(106,142,92,.14);
}
.vk-login-card .vk-portal-input label {
    position: absolute; left: 16px;
    font: 500 14px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    transition: top .15s ease, font-size .15s ease, color .15s ease, font-weight .15s ease, letter-spacing .15s ease;
}
.vk-login-card .vk-portal-input input:focus + label,
.vk-login-card .vk-portal-input input:not(:placeholder-shown) + label {
    top: 14px;
    transform: none;
    font: 600 11px var(--vk-font);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vk-sage-text, #4A6A3E);
}
.vk-login-card button[type="submit"] {
    margin-top: 4px;
    width: 100%;
    padding: 16px 22px;
    background: var(--vk-sage, #6A8E5C);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font: 700 15px var(--vk-font);
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
    box-shadow: 0 6px 16px rgba(106,142,92,.22);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    letter-spacing: -.005em;
}
.vk-login-card button[type="submit"]:hover {
    background: var(--vk-sage-hover, #5A7E4F);
    box-shadow: 0 10px 22px rgba(106,142,92,.32);
    transform: translateY(-1px);
}
.vk-login-card button[type="submit"]:disabled {
    opacity: .55; cursor: progress; transform: none;
}
.vk-login-card .vk-portal-login-response {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--vk-sage-bg, #EEF1E5);
    border: 1px solid rgba(106,142,92,.32);
    color: var(--vk-sage-text, #4A6A3E);
    font: 500 14px var(--vk-font);
    line-height: 1.5;
}
.vk-login-card .vk-portal-login-response--fejl {
    background: rgba(168,50,50,.08);
    border-color: rgba(168,50,50,.32);
    color: var(--vk-red, #A83232);
}

/* Join-CTA: feature-card med ikon + tagline + bold CTA → /medlemmer */
.vk-login-join {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 14px 18px 14px 14px;
    background: linear-gradient(135deg, var(--vk-cream-muted, #F5EFE0) 0%, #F0E9D6 100%);
    border: 1.5px solid rgba(168, 50, 50, .22);
    border-radius: 14px;
    text-decoration: none;
    color: var(--vk-dark, #2C2C2C);
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 2px 6px rgba(168, 50, 50, .08);
}
.vk-login-join::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--vk-red, #A83232);
    border-radius: 14px 0 0 14px;
}
.vk-login-join:hover {
    border-color: var(--vk-red, #A83232);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(168, 50, 50, .18);
}
.vk-login-join-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(168, 50, 50, .10);
    color: var(--vk-red, #A83232);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background-color .2s ease, color .2s ease;
}
.vk-login-join:hover .vk-login-join-icon {
    background: var(--vk-red, #A83232);
    color: #fff;
}
.vk-login-join-text {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.vk-login-join-text small {
    font: 600 10.5px var(--vk-font);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--vk-red, #A83232);
}
.vk-login-join-text b {
    font: 700 14.5px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    letter-spacing: -.005em;
    line-height: 1.2;
}
.vk-login-join-chev {
    color: var(--vk-red, #A83232);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.vk-login-join:hover .vk-login-join-chev {
    transform: translateX(4px);
}

/* Footer stamp */
.vk-login-foot {
    align-self: end; justify-self: center;
    margin: 0;
    padding-top: 12px;
    color: rgba(217,199,156,.92);
    font: 700 11px var(--vk-font);
    letter-spacing: .22em; text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* =============================================================================
   DASHBOARD
   ============================================================================= */
.vk-portal-greet {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 36px 36px;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(31,42,36,.05);
}
.vk-portal-greet::before {
    content: "";
    position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106,142,92,.14) 0%, rgba(106,142,92,0) 70%);
    pointer-events: none;
}
.vk-portal-greet-text { position: relative; z-index: 1; min-width: 0; }
.vk-portal-greet h1 {
    margin: 0;
    font: 600 clamp(26px, 3vw, 34px) var(--vk-font);
    color: var(--vk-dark);
    letter-spacing: -.018em;
    line-height: 1.1;
}
.vk-portal-greet h1 strong {
    color: var(--vk-red, #A83232);
    font-weight: 700;
}
.vk-portal-greet p {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--vk-body);
    line-height: 1.55;
}
.vk-portal-greet-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(106,142,92,.14);
    border: 1px solid rgba(106,142,92,.32);
    border-radius: 9999px;
    color: var(--vk-sage-text, #4A6A3E);
    font: 700 12px var(--vk-font);
    letter-spacing: .08em; text-transform: uppercase;
    position: relative; z-index: 1;
    white-space: nowrap;
}
.vk-portal-greet-status .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--vk-sage, #6A8E5C);
    animation: vk-portal-pulse 1.8s infinite;
}
@keyframes vk-portal-pulse {
    0%,100% { opacity: .55; transform: scale(1); }
    50%     { opacity: 1;   transform: scale(1.35); }
}

/* Dashboard 3-card grid */
.vk-portal-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}
.vk-portal-tile {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 4px 16px rgba(31,42,36,.04);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.vk-portal-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(31,42,36,.08);
    border-color: #C9C2A8;
}
.vk-portal-tile-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    transition: transform .25s;
}
.vk-portal-tile:hover .vk-portal-tile-icon { transform: rotate(-6deg) scale(1.06); }
.vk-portal-tile--shop .vk-portal-tile-icon  { background: rgba(168,50,50,.10);  color: var(--vk-red, #A83232); }
.vk-portal-tile--event .vk-portal-tile-icon { background: rgba(217,130,68,.14); color: #B26A28; }
.vk-portal-tile--status .vk-portal-tile-icon{ background: rgba(106,142,92,.14); color: var(--vk-sage-text, #4A6A3E); }
.vk-portal-tile h3 {
    margin: 0 0 6px;
    font: 700 18px var(--vk-font);
    color: var(--vk-dark);
    letter-spacing: -.005em;
}
.vk-portal-tile p {
    margin: 0 0 16px;
    font-size: 14px; line-height: 1.5;
    color: var(--vk-body);
}
.vk-portal-tile-cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font: 700 13.5px var(--vk-font);
    color: var(--vk-sage-text, #4A6A3E);
    letter-spacing: .02em;
}
.vk-portal-tile-cta svg { transition: transform .2s; }
.vk-portal-tile:hover .vk-portal-tile-cta svg { transform: translateX(3px); }

/* Activity feed */
.vk-portal-activity { margin-top: 8px; }
.vk-portal-activity-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 16px;
    font: 700 12px var(--vk-font);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-activity-title::before,
.vk-portal-activity-title::after {
    content: ""; flex: 1; height: 1px; background: var(--vk-border, #D4D0C4);
}
.vk-portal-activity-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 8px;
}
.vk-portal-activity-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 12px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.vk-portal-activity-item:hover {
    border-color: #C9C2A8;
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(31,42,36,.04);
}
.vk-portal-activity-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vk-portal-activity-item[data-type="butik"] .vk-portal-activity-icon {
    background: rgba(168,50,50,.10); color: var(--vk-red);
}
.vk-portal-activity-item[data-type="begivenhed"] .vk-portal-activity-icon {
    background: rgba(217,130,68,.14); color: #B26A28;
}
.vk-portal-activity-text {
    min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.vk-portal-activity-text b {
    color: var(--vk-dark);
    font: 600 14.5px var(--vk-font);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vk-portal-activity-text small {
    color: var(--vk-muted, #5E5E5E);
    font: 500 12.5px var(--vk-font);
}
.vk-portal-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--vk-muted, #5E5E5E);
    background: #fff;
    border: 1px dashed var(--vk-border-strong, #C9C2A8);
    border-radius: 14px;
}
.vk-portal-empty svg { margin: 0 auto 12px; color: var(--vk-border-strong, #C9C2A8); }
.vk-portal-empty p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* Statistik: visninger af butik-siden og begivenhederne */
.vk-portal-stat { margin-bottom: 36px; }
.vk-portal-stat-tal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.vk-portal-stat-n {
    font: 700 40px/1 var(--vk-font);
    color: var(--vk-dark);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.vk-portal-stat-tal span { font: 500 15px var(--vk-font); color: var(--vk-body); }
.vk-portal-stat-aendring {
    margin: 8px 0 0;
    font: 600 13.5px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-stat-aendring.is-op { color: var(--vk-sage-text, #4A6A3E); }
.vk-portal-stat-dage {
    display: flex; align-items: flex-end; gap: 3px;
    height: 64px;
    margin-top: 20px;
    border-bottom: 1px solid var(--vk-border, #D4D0C4);
}
.vk-portal-stat-soejle {
    flex: 1; min-width: 0;
    background: var(--vk-sage, #6A8E5C);
    border-radius: 3px 3px 0 0;
}
.vk-portal-stat-akse {
    display: flex; justify-content: space-between;
    margin-top: 6px;
    font: 500 12px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-stat-h3 {
    margin: 26px 0 4px;
    font: 700 12px var(--vk-font);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-card-head + .vk-portal-stat-h3 { margin-top: 0; }
.vk-portal-stat-liste { list-style: none; margin: 0; padding: 0; }
.vk-portal-stat-liste li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--vk-border, #D4D0C4);
}
.vk-portal-stat-liste a {
    min-width: 0;
    font: 600 14.5px var(--vk-font);
    color: var(--vk-dark);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.vk-portal-stat-liste a:hover { color: var(--vk-sage-text, #4A6A3E); text-decoration: underline; }
.vk-portal-stat-liste span {
    flex-shrink: 0;
    font: 500 13px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vk-portal-stat-tom { margin: 8px 0 0; font-size: 14.5px; color: var(--vk-body); }
.vk-portal-stat-note {
    margin: 20px 0 0;
    font-size: 13px; line-height: 1.5;
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-stat-mere {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px;
    font: 700 13.5px var(--vk-font);
    color: var(--vk-sage-text, #4A6A3E);
    text-decoration: none;
}
.vk-portal-stat-mere:hover { text-decoration: underline; }

/* Statistik-siden */
.vk-portal-stat-perioder {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: -8px 0 22px;
}
.vk-portal-stat-perioder a {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 0 16px;
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 9999px;
    font: 600 14px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    text-decoration: none;
}
.vk-portal-stat-perioder a:hover { border-color: var(--vk-sage, #6A8E5C); }
.vk-portal-stat-perioder a[aria-current="page"] {
    background: var(--vk-sage, #6A8E5C);
    border-color: var(--vk-sage, #6A8E5C);
    color: #fff;
}
.vk-portal-stat-kort,
.vk-portal-stat-gitter { margin-bottom: 18px; }
.vk-portal-stat-kort .vk-portal-stat-dage { height: 96px; }
.vk-portal-stat-gitter {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.vk-portal-stat-gitter > .vk-portal-card { margin: 0; }
.vk-portal-stat-par {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.vk-portal-stat-raekker { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vk-portal-stat-raekker li {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px;
    font: 600 14.5px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
}
.vk-portal-stat-raekke-tal {
    font-weight: 500; color: var(--vk-muted, #5E5E5E);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vk-portal-stat-spor {
    flex-basis: 100%;
    height: 10px;
    background: var(--vk-cream-muted, #F5EFE0);
    border-radius: 9999px;
    overflow: hidden;
}
.vk-portal-stat-spor span {
    display: block; height: 100%;
    background: var(--vk-sage, #6A8E5C);
    border-radius: 9999px;
}
.vk-portal-stat-raekker .is-snit .vk-portal-stat-spor span { background: var(--vk-border-strong, #C9C2A8); }
.vk-portal-stat-tid {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px;
}
.vk-portal-stat-tid .vk-portal-stat-h3 { margin-top: 0; }
.vk-portal-stat-dage.is-timer { gap: 2px; }
.vk-portal-stat-dage.is-ugedage { gap: 8px; }
.vk-portal-stat-akse--timer { display: grid; grid-template-columns: repeat(4, 1fr); }
.vk-portal-stat-akse--ugedage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; }
.vk-portal-stat-klik {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    margin: 0;
}
.vk-portal-stat-klik dt { font: 600 13px var(--vk-font); color: var(--vk-muted, #5E5E5E); }
.vk-portal-stat-klik dd {
    margin: 4px 0 0;
    font: 700 28px/1.1 var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    font-variant-numeric: tabular-nums;
}
.vk-portal-stat-tom-knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px !important; }
.vk-portal-stat-forklaring { max-width: 720px; }
@media (max-width: 768px) {
    .vk-portal-stat-gitter,
    .vk-portal-stat-tid { grid-template-columns: minmax(0, 1fr); }
    .vk-portal-stat-perioder a { padding: 0 13px; }
    .vk-portal-stat-par .vk-portal-stat-n { font-size: 34px; }
}
@media (max-width: 480px) {
    .vk-portal-stat-perioder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .vk-portal-stat-perioder a { justify-content: center; padding: 4px; font-size: 13.5px; line-height: 1.15; text-align: center; }
}

/* =============================================================================
   BUTIK — section-based form
   ============================================================================= */
.vk-portal-form-stack {
    display: flex; flex-direction: column;
    gap: 18px;
}
.vk-portal-warning {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 20px;
    background: rgba(217,130,68,.10);
    border: 1px solid rgba(217,130,68,.34);
    border-radius: 14px;
    margin-bottom: 22px;
}
.vk-portal-warning[hidden],
.vk-login-card [hidden] { display: none; }
#vk-kode-form { margin-top: 18px; }
.vk-login-card.er-sendt #vk-magic-form,
.vk-login-card.er-sendt .vk-login-trin1,
.vk-login-card.er-sendt .vk-login-join { display: none; }
.vk-login-card.er-sendt .vk-portal-login-response { margin-top: 0; }
.vk-login-card.er-sendt .vk-login-lead { margin-bottom: 4px; }
.vk-login-skift {
    align-self: center;
    background: none; border: 0; padding: 6px 8px; cursor: pointer;
    font: 600 14px var(--vk-font); color: #4A6A3E;
    text-decoration: underline; text-underline-offset: 3px;
}
/* Lave skærme: kortet strammes, så alt ses uden at rulle. */
@media (max-height: 780px) {
    .vk-login-stage { padding-top: 16px; padding-bottom: 12px; }
    .vk-login-card { padding-top: 32px; padding-bottom: 28px; }
    .vk-login-card h1 { margin-bottom: 8px; font-size: 30px; }
    .vk-login-lead { margin-bottom: 18px; }
    .vk-login-card form { gap: 10px; }
    .vk-login-card .vk-portal-input input { padding-top: 19px; padding-bottom: 8px; }
    .vk-login-card button[type="submit"] { padding-top: 13px; padding-bottom: 13px; }
    .vk-login-join { margin-top: 16px; padding-top: 10px; padding-bottom: 10px; }
}
.vk-portal-warning svg { color: #B26A28; flex-shrink: 0; margin-top: 1px; }
.vk-portal-warning b { color: var(--vk-dark); display: block; margin-bottom: 2px; font-weight: 700; }
.vk-portal-warning span { font-size: 14px; line-height: 1.5; color: var(--vk-body); }

/* Form sections */
.vk-portal-section {
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 4px 16px rgba(31,42,36,.04);
}
.vk-portal-section + .vk-portal-section { margin-top: 16px; }
.vk-portal-section-head {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
}
.vk-portal-section-num {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--vk-cream-muted, #F5EFE0);
    color: var(--vk-red, #A83232);
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 18px var(--vk-font);
    letter-spacing: -.01em;
}
.vk-portal-section-titles h3 {
    margin: 0;
    font: 700 17px var(--vk-font);
    color: var(--vk-dark);
    letter-spacing: -.005em;
}
.vk-portal-section-titles p {
    margin: 4px 0 0;
    font: 500 13.5px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    line-height: 1.5;
}

/* Field grid (mirrors handoff .ef-grid but prefixed) */
.vk-portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}
.vk-portal-grid .full { grid-column: 1 / -1; }
.vk-portal-field {
    position: relative;
    display: block;
}
.vk-portal-field input,
.vk-portal-field select,
.vk-portal-field textarea {
    width: 100%;
    padding: 22px 14px 10px;
    background: #fff;
    border: 1.5px solid var(--vk-border, #D4D0C4);
    border-radius: 10px;
    font: 500 15px var(--vk-font);
    color: var(--vk-dark);
    outline: 0;
    transition: border-color .2s, box-shadow .2s, background .2s;
    appearance: none; -webkit-appearance: none;
    font-family: var(--vk-font);
    line-height: 1.5;
}
.vk-portal-field textarea {
    padding-top: 26px;
    min-height: 110px;
    resize: vertical;
}
.vk-portal-field input:hover,
.vk-portal-field select:hover,
.vk-portal-field textarea:hover { border-color: #C9C2A8; }
.vk-portal-field input:focus,
.vk-portal-field select:focus,
.vk-portal-field textarea:focus {
    border-color: var(--vk-sage, #6A8E5C);
    box-shadow: 0 0 0 4px rgba(106,142,92,.14);
}
.vk-portal-field-label {
    position: absolute;
    left: 14px; top: 8px;
    font: 600 11px var(--vk-font);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vk-sage-text, #4A6A3E);
    pointer-events: none;
    background: transparent;
}
.vk-portal-field .req { color: var(--vk-red, #A83232); }
.vk-portal-field-help {
    display: block;
    margin-top: 6px;
    font: 500 12.5px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    line-height: 1.5;
}

/* Submit footer (sticky on form pages) */
.vk-portal-formfoot {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    margin-top: 22px;
    padding: 16px 22px;
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(31,42,36,.10);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.vk-portal-formfoot-meta {
    font: 500 13px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    display: inline-flex; align-items: center; gap: 8px;
}
.vk-portal-formfoot-meta svg { color: var(--vk-sage, #6A8E5C); }
.vk-portal-formfoot-actions {
    display: inline-flex; align-items: center; gap: 10px;
}

.vk-portal-loading {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 14px;
    color: var(--vk-muted, #5E5E5E);
    font: 500 14.5px var(--vk-font);
}
.vk-portal-loading::before {
    content: "";
    width: 16px; height: 16px;
    border: 2px solid rgba(31,42,36,.15);
    border-top-color: var(--vk-sage, #6A8E5C);
    border-radius: 50%;
    animation: vk-portal-spin .8s linear infinite;
}
@keyframes vk-portal-spin { to { transform: rotate(360deg); } }

.vk-portal-response {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--vk-sage-bg, #EEF1E5);
    border: 1px solid rgba(106,142,92,.32);
    color: var(--vk-sage-text, #4A6A3E);
    font: 500 14px var(--vk-font);
    line-height: 1.5;
}

/* =============================================================================
   EVENTS — list + cards
   ============================================================================= */
.vk-portal-events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.vk-portal-event-card {
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 16px rgba(31,42,36,.04);
    display: flex; flex-direction: column; gap: 12px;
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.vk-portal-event-card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--vk-border-strong, #C9C2A8);
}
.vk-portal-event-card[data-status="live"]::before     { background: var(--vk-sage, #6A8E5C); }
.vk-portal-event-card[data-status="pending"]::before  { background: #D98244; }
.vk-portal-event-card[data-status="cancelled"]::before{ background: var(--vk-red, #A83232); }
.vk-portal-event-card[data-status="past"]::before     { background: #B6B0A0; }
/* Mine begivenheder fra serveren: kladde, skal rettes, sendt, udgivet, afholdt, aflyst */
.vk-portal-event-card[data-status="kladde"]::before   { background: var(--vk-border-strong, #C9C2A8); }
.vk-portal-event-card[data-status="afvist"]::before   { background: var(--vk-red, #A83232); }
.vk-portal-event-card[data-status="sendt"]::before    { background: #D98244; }
.vk-portal-event-card[data-status="udgivet"]::before  { background: var(--vk-sage, #6A8E5C); }
.vk-portal-event-card[data-status="afholdt"]::before  { background: #B6B0A0; }
.vk-portal-event-card[data-status="aflyst"]::before   { background: var(--vk-red, #A83232); }
.vk-portal-pill--draft { background: var(--vk-cream, #EBE4D1); color: var(--vk-dark); border-color: var(--vk-border-strong, #C9C2A8); }
.vk-mine-handlinger { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.vk-mine-besked { margin: 0; padding: 10px 14px; border-left: 3px solid var(--vk-red, #A83232); background: #F8F2E4; border-radius: 6px; font-size: 14px; color: #3A3A3A; }
.vk-mine-slet { margin: 0; }
.vk-mine-slet-knap { color: var(--vk-red, #A83232); }
.vk-mine-slet-knap:hover { color: var(--vk-red, #A83232); border-color: var(--vk-red, #A83232); }
.vk-portal-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(31,42,36,.08);
    border-color: #C9C2A8;
}
.vk-portal-event-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
}
.vk-portal-event-card h3 {
    margin: 0;
    font: 700 17px var(--vk-font);
    color: var(--vk-dark);
    letter-spacing: -.005em;
    line-height: 1.3;
    flex: 1; min-width: 0;
}
.vk-portal-event-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font: 500 13.5px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-event-meta span {
    display: inline-flex; align-items: center; gap: 6px;
}
.vk-portal-event-meta svg { color: var(--vk-sage, #6A8E5C); flex-shrink: 0; }

/* =============================================================================
   PROFIL — read-only display
   ============================================================================= */
.vk-portal-profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.vk-portal-profile-head {
    display: flex; align-items: center; gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--vk-border, #D4D0C4);
    margin-bottom: 8px;
}
.vk-portal-profile-mark {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vk-sage, #6A8E5C) 0%, var(--vk-teal, #468F9E) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 22px var(--vk-font);
    letter-spacing: -.01em;
    flex-shrink: 0;
}
.vk-portal-profile-head h2 {
    margin: 0;
    font: 700 22px var(--vk-font);
    color: var(--vk-dark);
    letter-spacing: -.012em;
    line-height: 1.2;
}
.vk-portal-profile-head .vk-portal-profile-since {
    margin: 4px 0 0;
    font: 600 12px var(--vk-font);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vk-sage-text, #4A6A3E);
}
.vk-portal-dl {
    margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px 32px;
}
.vk-portal-dl > div {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 0;
    border-top: 1px solid var(--vk-border, #D4D0C4);
}
.vk-portal-dl > div:first-child,
.vk-portal-dl > div:nth-child(2) { border-top: 0; padding-top: 4px; }
.vk-portal-dl dt {
    font: 700 11px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.vk-portal-dl dd {
    margin: 0;
    font: 600 15px var(--vk-font);
    color: var(--vk-dark);
    line-height: 1.4;
    word-break: break-word;
}
.vk-portal-dl dd a { color: var(--vk-sage-text, #4A6A3E); text-decoration: underline; }
.vk-portal-profile-note {
    margin-top: 24px;
    padding: 18px 22px;
    background: var(--vk-sage-bg, #EEF1E5);
    border: 1px solid rgba(106,142,92,.32);
    border-radius: 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
}
.vk-portal-profile-note svg { color: var(--vk-sage-text, #4A6A3E); flex-shrink: 0; }
.vk-portal-profile-note p {
    margin: 0;
    font: 500 14px var(--vk-font);
    color: var(--vk-body);
    line-height: 1.5;
}

/* =============================================================================
   UDMELD — mailto template
   ============================================================================= */
.vk-portal-udmeld-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 24px 28px;
    margin-bottom: 22px;
    background: var(--vk-cream-muted, #F5EFE0);
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 16px;
}
.vk-portal-udmeld-photo {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: radial-gradient(ellipse 60% 60% at 50% 40%, #d4b896 0%, #9a7a52 55%, #4e3a1e 100%);
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    flex-shrink: 0;
}
.vk-portal-udmeld-card .who b {
    display: block;
    font: 700 15px var(--vk-font);
    color: var(--vk-dark);
}
.vk-portal-udmeld-card .who .role {
    display: block;
    font: 700 11px var(--vk-font);
    color: var(--vk-red, #A83232);
    letter-spacing: .12em; text-transform: uppercase;
    margin-top: 2px; margin-bottom: 4px;
}
.vk-portal-udmeld-card .who a {
    color: var(--vk-sage-text, #4A6A3E);
    font: 600 13.5px var(--vk-font);
    text-decoration: none;
}
.vk-portal-udmeld-card .who a:hover { text-decoration: underline; }
.vk-portal-mailbox {
    background: var(--vk-dark-green, #223428);
    color: #E5E0CC;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 8px;
    box-shadow: 0 12px 32px rgba(31,42,36,.18);
}
.vk-portal-mailbox-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.vk-portal-mailbox-bar .dots {
    display: inline-flex; gap: 6px;
}
.vk-portal-mailbox-bar .dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.18);
}
.vk-portal-mailbox-bar small {
    font: 600 11px var(--vk-font);
    color: rgba(255,255,255,.45);
    letter-spacing: .14em; text-transform: uppercase;
    margin-left: auto;
}
.vk-portal-mailbox pre {
    margin: 0;
    padding: 22px 24px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.65;
    color: #E5E0CC;
    white-space: pre-wrap;
    background: transparent;
    border: 0;
    overflow-x: auto;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
    .vk-portal-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .vk-portal-nav {
        position: static;
        padding: 10px;
    }
    .vk-portal-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .vk-portal-nav-title { display: none; }
    .vk-portal-nav-divider { display: none; }
    .vk-portal-nav a {
        padding: 8px 14px;
        font-size: 13.5px;
    }
    .vk-portal-nav a[aria-current="page"]::before { display: none; }
    .vk-portal-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .vk-portal-events-grid {
        grid-template-columns: 1fr;
    }
    .vk-login-card {
        padding: 44px 32px 36px;
        max-width: 100%;
        border-radius: 20px;
    }
    .vk-login-stage { padding: 20px 16px 16px; }
}

@media (max-width: 480px) {
    .vk-login-card {
        padding: 36px 24px 32px;
        border-radius: 16px;
        box-shadow:
          0 1px 2px rgba(0,0,0,.04),
          0 8px 24px rgba(0,0,0,.18);
    }
    .vk-login-brand-text small { display: none; }
    .vk-login-brand-text b { font-size: 13px; }
    .vk-login-foot { font-size: 10px; letter-spacing: .18em; }
}

@media (max-width: 768px) {
    .vk-portal-page { padding: 0 0 64px; }
    .vk-portal-shell { padding: 0 16px; }
    .vk-portal-topbar-inner { padding: 0 16px; }
    .vk-portal-topbar { margin-bottom: 28px; padding: 12px 0; }
    .vk-portal-user .name { display: none; }
    .vk-portal-greet {
        grid-template-columns: 1fr;
        padding: 26px 24px;
    }
    .vk-portal-greet-status { justify-self: start; }
    .vk-portal-tiles {
        grid-template-columns: 1fr;
    }
    .vk-portal-card,
    .vk-portal-section { padding: 24px 22px; }
    .vk-portal-grid {
        grid-template-columns: 1fr;
    }
    .vk-portal-dl {
        grid-template-columns: 1fr;
    }
    .vk-portal-dl > div:nth-child(2) {
        border-top: 1px solid var(--vk-border, #D4D0C4);
        padding-top: 14px;
    }
    .vk-portal-pagehead {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .vk-portal-formfoot {
        position: static;
        flex-direction: column;
        align-items: stretch;
        bottom: auto;
    }
    .vk-portal-formfoot-actions {
        justify-content: stretch;
    }
    .vk-portal-formfoot-actions .vk-portal-btn {
        flex: 1;
    }
    .vk-portal-profile-note {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .vk-portal-udmeld-card {
        grid-template-columns: auto 1fr;
    }
    .vk-portal-udmeld-card .vk-portal-btn {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

@media (max-width: 480px) {
    .vk-portal-login-form { padding: 36px 22px; }
    .vk-portal-login-art { padding: 40px 22px; }
    .vk-portal-section-head {
        grid-template-columns: 36px 1fr;
        gap: 14px;
    }
    .vk-portal-section-num {
        width: 36px; height: 36px; font-size: 15px;
    }
    .vk-portal-event-card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .vk-portal-page *,
    .vk-portal-page *::before,
    .vk-portal-page *::after {
        transition-duration: .15s !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ─── Compatibility fixes for legacy classes used inside event-new/edit ─── */
/* event-new.php / event-edit.php genbruger .enroll-section / .enroll-card
   markup fra indmeldelse-handoff. Når portal.css loader sammen med
   forms-wizard.css er kombinationen ok — men vi skraber lidt margin/padding
   så event-form-card sidder pænt under topbar+pagehead. */
.vk-portal--event-form .enroll-section { padding: 0; background: transparent; }
.vk-portal--event-form .enroll-wrap   { max-width: none; }
.vk-portal--event-form .enroll-card   {
    padding: 32px 36px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(31,42,36,.04);
}
@media (max-width: 768px) {
    .vk-portal--event-form .enroll-card { padding: 24px 22px; }
}

/* =============================================================================
   EVENT-FORM — extra primitives (toggles, conditional reveal, image upload)
   ============================================================================= */

/* ─── Inline validation error on field ─── */
.vk-portal-field.has-error input,
.vk-portal-field.has-error select,
.vk-portal-field.has-error textarea {
    border-color: var(--vk-red, #A83232);
    box-shadow: 0 0 0 4px rgba(168,50,50,.10);
}
.vk-portal-field.has-error .vk-portal-field-label {
    color: var(--vk-red, #A83232);
}

/* ─── Top-level error box (above sticky submit) ─── */
.vk-portal-error-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    margin-top: 4px;
    background: rgba(168,50,50,.08);
    border: 1px solid rgba(168,50,50,.32);
    border-radius: 14px;
    color: var(--vk-red, #A83232);
}
.vk-portal-error-box svg { color: var(--vk-red, #A83232); flex-shrink: 0; margin-top: 1px; }
.vk-portal-error-box p {
    margin: 0;
    font: 600 14px var(--vk-font);
    line-height: 1.5;
    color: var(--vk-red, #A83232);
}

/* ─── Loading box error variant ─── */
.vk-portal-loading.is-error {
    background: rgba(168,50,50,.08);
    border-color: rgba(168,50,50,.32);
    color: var(--vk-red, #A83232);
}
.vk-portal-loading.is-error::before {
    border-color: rgba(168,50,50,.30);
    border-top-color: var(--vk-red, #A83232);
    animation: none;
}

/* ─── Toggle row (multi-day, end-time) ─── */
.vk-portal-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 4px 2px 2px;
}
.vk-portal-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 11px;
    background: var(--vk-cream-muted, #F5EFE0);
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 9999px;
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s;
    position: relative;
}
.vk-portal-toggle:hover {
    background: #EFE7D2;
    border-color: var(--vk-border-strong, #C9C2A8);
}
.vk-portal-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.vk-portal-toggle-track {
    width: 32px;
    height: 18px;
    border-radius: 9999px;
    background: #D4D0C4;
    position: relative;
    flex-shrink: 0;
    transition: background .2s;
}
.vk-portal-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
    transition: transform .2s, background .2s;
}
.vk-portal-toggle input:checked ~ .vk-portal-toggle-track {
    background: var(--vk-sage, #6A8E5C);
}
.vk-portal-toggle input:checked ~ .vk-portal-toggle-track::after {
    transform: translateX(14px);
}
.vk-portal-toggle input:focus-visible ~ .vk-portal-toggle-track {
    box-shadow: 0 0 0 4px rgba(106,142,92,.20);
}
.vk-portal-toggle-label {
    font: 600 13.5px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    letter-spacing: -.005em;
}
.vk-portal-toggle input:checked ~ .vk-portal-toggle-label {
    color: var(--vk-sage-text, #4A6A3E);
}

/* ─── Conditional field (revealed by toggle / data-condition) ─── */
.vk-portal-conditional {
    animation: vk-portal-reveal .25s ease-out;
}
@keyframes vk-portal-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Image upload section ─── */
.vk-portal-image-upload {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vk-portal-thumb-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: var(--vk-cream-muted, #F5EFE0);
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 14px;
}
.vk-portal-thumb-img {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(31,42,36,.08);
}

.vk-portal-thumb-dropzone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 22px 24px;
    background: var(--vk-cream-muted, #F5EFE0);
    border: 1.5px dashed var(--vk-border-strong, #C9C2A8);
    border-radius: 14px;
    transition: border-color .15s, background .15s;
}
.vk-portal-thumb-dropzone:hover {
    border-color: var(--vk-sage, #6A8E5C);
    background: #F0EAD8;
}
.vk-portal-thumb-dropzone > svg {
    color: var(--vk-sage, #6A8E5C);
    flex-shrink: 0;
}
.vk-portal-thumb-dropzone-text {
    flex: 1; min-width: 200px;
    display: flex; flex-direction: column; gap: 2px;
}
.vk-portal-thumb-dropzone-text b {
    font: 700 14.5px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
}
.vk-portal-thumb-dropzone-text small {
    font: 500 12.5px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    line-height: 1.5;
}
.vk-portal-thumb-file {
    flex: 0 1 auto;
    max-width: 220px;
    font: 500 13px var(--vk-font);
    color: var(--vk-body);
}
.vk-portal-thumb-file::file-selector-button {
    margin-right: 10px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 9999px;
    font: 600 12.5px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.vk-portal-thumb-file::file-selector-button:hover {
    background: var(--vk-cream-muted, #F5EFE0);
    border-color: var(--vk-border-strong, #C9C2A8);
}
.vk-portal-thumb-status {
    font: 500 13px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    flex-basis: 100%;
}
.vk-portal-thumb-status.is-loading { color: var(--vk-sage-text, #4A6A3E); }
.vk-portal-thumb-status.is-error   { color: var(--vk-red, #A83232); font-weight: 600; }

/* ─── Section-stack spacing tightening for event-form ─── */
.vk-portal--event-form .vk-portal-form-stack { gap: 16px; }

@media (max-width: 768px) {
    .vk-portal-toggles { flex-direction: column; align-items: stretch; }
    .vk-portal-toggle { justify-content: flex-start; }
    .vk-portal-thumb-dropzone { flex-direction: column; align-items: flex-start; }
    .vk-portal-thumb-file { max-width: 100%; }
}

/* === Hide public site-chrome on portal pages =================== */
/* Portal has its own topbar + sidebar — public site-header would cause double-nav.
 * Body gets .vk-portal-page class via body_class filter in medlemsportal.php. */
body.vk-portal-page .vk-top-strip,
body.vk-portal-page #site-header,
body.vk-portal-page .site-footer,
body.vk-portal-page .vk-footer {
	display: none !important;
}

/* =============================================================================
   AI-FILL — call-to-action card + modal (event-form integration)
   ============================================================================= */
.vk-portal-ai-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    margin: 0 0 24px;
    background: linear-gradient(135deg, rgba(106,142,92,.10) 0%, rgba(106,142,92,.04) 100%);
    border: 1.5px solid rgba(106,142,92,.32);
    border-radius: 14px;
}
.vk-portal-ai-cta-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vk-sage, #6A8E5C);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(106,142,92,.28);
}
.vk-portal-ai-cta-text {
    flex: 1 1 auto;
    min-width: 0;
}
.vk-portal-ai-cta-text b {
    display: block;
    font: 700 15px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    margin-bottom: 2px;
}
.vk-portal-ai-cta-text small {
    font: 400 13.5px/1.5 var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-ai-cta .vk-portal-btn--ai {
    flex: 0 0 auto;
}

/* AI button variant — sage primary, distinct from sticky-foot submit */
.vk-portal-btn--ai {
    background: var(--vk-sage, #6A8E5C);
    color: #fff;
    box-shadow: 0 8px 20px rgba(106,142,92,.22);
}
.vk-portal-btn--ai:hover {
    background: var(--vk-sage-hover, #587A4B);
    color: #fff;
    box-shadow: 0 12px 26px rgba(106,142,92,.32);
}

/* ─── Modal/drawer ─── */
.vk-portal-ai-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(28, 28, 28, .55);
    backdrop-filter: blur(2px);
}
.vk-portal-ai-modal.is-open {
    display: flex;
}
.vk-portal-ai-modal-card {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
    padding: 28px;
}
.vk-portal-ai-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.vk-portal-ai-modal-head h2 {
    margin: 0 0 4px;
    font: 600 22px/1.2 var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    letter-spacing: -.012em;
}
.vk-portal-ai-modal-head p {
    margin: 0;
    font: 400 14px/1.55 var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-ai-modal-close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border: 0;
    background: var(--vk-cream-muted, #F5EFE0);
    color: var(--vk-dark, #2C2C2C);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.vk-portal-ai-modal-close:hover { background: var(--vk-cream, #EBE4D1); }

.vk-portal-ai-textarea {
    width: 100%;
    min-height: 220px;
    padding: 14px 16px;
    font: 400 14.5px/1.55 var(--vk-font);
    border: 1.5px solid var(--vk-border, #D4D0C4);
    border-radius: 10px;
    resize: vertical;
    background: #fff;
    color: var(--vk-dark, #2C2C2C);
    box-sizing: border-box;
}
.vk-portal-ai-textarea:focus {
    outline: 0;
    border-color: var(--vk-sage, #6A8E5C);
    box-shadow: 0 0 0 3px rgba(106,142,92,.18);
}
.vk-portal-ai-modal-help {
    margin: 8px 0 0;
    font: 400 13px/1.5 var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
}
.vk-portal-ai-modal-error {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(168,50,50,.08);
    border: 1px solid rgba(168,50,50,.28);
    color: var(--vk-red, #A83232);
    border-radius: 10px;
    font: 500 13.5px/1.45 var(--vk-font);
}
.vk-portal-ai-modal-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

/* Spinner inside button */
.vk-portal-ai-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vk-portal-ai-spin .7s linear infinite;
}
@keyframes vk-portal-ai-spin { to { transform: rotate(360deg); } }

/* ─── Diff toast (post-fill) ─── */
.vk-portal-ai-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--vk-sage, #6A8E5C);
    color: #fff;
    border-radius: 9999px;
    box-shadow: 0 12px 30px rgba(106,142,92,.36);
    font: 600 14px var(--vk-font);
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.vk-portal-ai-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
    .vk-portal-ai-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .vk-portal-ai-cta .vk-portal-btn--ai { width: 100%; }
    .vk-portal-ai-modal-card { padding: 22px; }
    .vk-portal-ai-modal-head h2 { font-size: 19px; }
}

/* =============================================================================
   BUTIK — sociale medier-felter, logo-preview, galleri-grid, picker
   ============================================================================= */

/* ─── Inline-toggle (native checkbox + label, ingen custom track) ─── */
.vk-portal-toggle--inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--vk-cream-muted, #F5EFE0);
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 12px;
    cursor: pointer;
    flex-wrap: wrap;
    margin-top: 8px;
}
.vk-portal-toggle--inline:hover {
    background: #EFE7D2;
    border-color: var(--vk-border-strong, #C9C2A8);
}
.vk-portal-toggle--inline input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--vk-sage, #6A8E5C);
    margin: 0;
    cursor: pointer;
}
.vk-portal-toggle--inline .vk-portal-toggle-label {
    font: 600 14px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
}
.vk-portal-toggle--inline .vk-portal-toggle-help {
    flex-basis: 100%;
    font: 500 12.5px var(--vk-font);
    color: var(--vk-muted, #5E5E5E);
    line-height: 1.5;
    padding-left: 28px;
}
.vk-portal-toggle--inline.full {
    grid-column: 1 / -1;
}

/* ─── Sociale medier-felter med ikon-prefix ─── */
.vk-portal-social-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vk-sage, #6A8E5C);
    pointer-events: none;
    z-index: 1;
}
.vk-portal-field:has(.vk-portal-social-icon) input {
    padding-left: 42px;
}

/* ─── Logo: vises som på butikssiden, når der ikke er et billede — helt, midt i et kvadrat med luft omkring ─── */
.vk-portal-logo-preview-img,
.vk-portal-logo-flade {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 36px;
    box-sizing: border-box;
    background: var(--vk-cream-muted, #F5EFE0);
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 14px;
}
.vk-portal-logo-flade img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vk-portal-logo-proeve { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.vk-portal-logo-proeve small { flex: 1 1 200px; color: #5E5E5E; font-size: 13px; line-height: 1.4; }
.vk-portal-logo-proeve[hidden] { display: none; }

/* ─── Galleri-uploader sektion ─── */
.vk-portal-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vk-portal-gallery-uploader {
    /* Genbruger thumb-dropzone styling */
}

/* ─── Galleri-grid (eksisterende billeder i medlemmets galleri) ─── */
.vk-portal-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 14px;
    background: var(--vk-cream-muted, #F5EFE0);
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 14px;
}
.vk-portal-gallery-card {
    position: relative;
    aspect-ratio: 4 / 3; /* galleriets format på butikssiden */
    background: #fff;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(31,42,36,.06);
}
.vk-portal-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vk-portal-gallery-card-actions {
    position: absolute;
    inset: auto 6px 6px 6px;
    display: flex;
    gap: 4px;
    justify-content: space-between;
}
.vk-portal-gallery-btn {
    flex: 1 1 auto;
    min-width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 6px;
    font: 700 14px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.vk-portal-gallery-btn:hover:not(:disabled) {
    background: #fff;
    border-color: var(--vk-sage, #6A8E5C);
    color: var(--vk-sage-text, #4A6A3E);
}
.vk-portal-gallery-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.vk-portal-gallery-btn--remove {
    flex: 0 0 28px;
    color: var(--vk-red, #A83232);
    font-size: 18px;
    line-height: 1;
}
.vk-portal-gallery-btn--remove:hover:not(:disabled) {
    background: var(--vk-red, #A83232);
    border-color: var(--vk-red, #A83232);
    color: #fff;
}
.vk-portal-gallery-pos {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(31,42,36,.8);
    color: #fff;
    font: 700 11px var(--vk-font);
    padding: 2px 7px;
    border-radius: 9999px;
    pointer-events: none;
}

/* ─── Picker: vælg fra eksisterende uploads (collapsible <details>) ─── */
.vk-portal-gallery-picker-wrap {
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.vk-portal-gallery-picker-summary {
    padding: 12px 16px;
    cursor: pointer;
    font: 600 13.5px var(--vk-font);
    color: var(--vk-dark, #2C2C2C);
    background: var(--vk-cream-muted, #F5EFE0);
    list-style: none;
    user-select: none;
}
.vk-portal-gallery-picker-summary::-webkit-details-marker { display: none; }
.vk-portal-gallery-picker-summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform .2s;
    color: var(--vk-sage, #6A8E5C);
    margin-right: 4px;
}
.vk-portal-gallery-picker-wrap[open] .vk-portal-gallery-picker-summary::before {
    transform: rotate(90deg);
}
.vk-portal-gallery-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 14px;
}
.vk-portal-gallery-picker-empty {
    padding: 16px;
    text-align: center;
    color: var(--vk-muted, #5E5E5E);
    font: 500 13px var(--vk-font);
    grid-column: 1 / -1;
    margin: 0;
}
.vk-portal-picker-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--vk-border, #D4D0C4);
    border-radius: 8px;
    background: #fff;
}
.vk-portal-picker-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}
.vk-portal-picker-item .vk-portal-btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 540px) {
    .vk-portal-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .vk-portal-gallery-picker {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* ============================================================
   3-step progress indicator (event-new + event-edit)
   ============================================================ */
.vk-portal-formfoot [hidden],
.vk-portal-form-stack [hidden] {
    display: none !important;
}
.vk-portal-stepper {
    margin: 8px 0 28px;
    padding: 0;
}
.vk-portal-stepper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    counter-reset: step;
    position: relative;
}
.vk-portal-stepper-list::before {
    content: "";
    position: absolute;
    left: calc(100% / 6);
    right: calc(100% / 6);
    top: 18px;
    height: 2px;
    background: rgba(106, 142, 92, .18);
    z-index: 0;
}
.vk-portal-stepper-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: opacity .2s ease;
    opacity: .55;
}
.vk-portal-stepper-item:hover { opacity: .85; }
.vk-portal-stepper-item.is-active,
.vk-portal-stepper-item.is-done { opacity: 1; }
.vk-portal-stepper-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(106, 142, 92, .25);
    color: var(--vk-body, #3A3A3A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.vk-portal-stepper-item.is-active .vk-portal-stepper-num {
    background: var(--vk-sage, #6A8E5C);
    border-color: var(--vk-sage, #6A8E5C);
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(106, 142, 92, .28);
}
.vk-portal-stepper-item.is-done .vk-portal-stepper-num {
    background: var(--vk-sage-bg, #EEF1E5);
    border-color: var(--vk-sage, #6A8E5C);
    color: var(--vk-sage, #6A8E5C);
}
.vk-portal-stepper-item.is-done .vk-portal-stepper-num::before {
    content: "✓";
    font-size: 16px;
    font-weight: 700;
}
.vk-portal-stepper-item.is-done .vk-portal-stepper-num > * { display: none; }
.vk-portal-stepper-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--vk-body, #3A3A3A);
}
.vk-portal-stepper-item.is-active .vk-portal-stepper-label {
    color: var(--vk-sage-text, #4A6A3E);
}
@media (max-width: 540px) {
    .vk-portal-stepper-list { gap: 6px; }
    .vk-portal-stepper-list::before { top: 16px; }
    .vk-portal-stepper-num { width: 32px; height: 32px; font-size: 14px; }
    .vk-portal-stepper-label { font-size: 11px; line-height: 1.25; }
}

/* ── Til godkendelse (godkendere) ── */
.vk-portal-notice { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; font-size: 15px; }
.vk-portal-notice--ok { background: #E4EEDD; color: #223428; }
.vk-portal-notice--fejl { background: #F8E1DC; color: #7A2A22; }
.vk-godkend-vaerktoej { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.vk-godkend-alle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.vk-godkend-alle input, .vk-godkend-valg input { width: 20px; height: 20px; accent-color: var(--vk-sage, #6A8E5C); }
.vk-godkend-vaerktoej [data-vk-bulk]:disabled { opacity: .45; cursor: not-allowed; } /* ingen valgt: knappen er der, men tydeligt ikke aktiv */
.vk-godkend-raekke { display: grid; grid-template-columns: auto 96px minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; }
.vk-godkend-raekke + .vk-godkend-raekke { margin-top: 12px; }
.vk-godkend-valg { display: flex; align-items: center; }
.vk-godkend-billede { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--vk-cream-muted, #EFE8D7); display: block; }
.vk-godkend-tekst { min-width: 0; }
.vk-godkend-tekst .vk-portal-card-title a { color: inherit; text-decoration: none; }
.vk-godkend-tekst .vk-portal-card-title a:hover { color: var(--vk-sage-hover, #587A4B); text-decoration: underline; }
.vk-godkend-handlinger { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vk-godkend-tom p { margin: 0 0 6px; }
@media (max-width: 720px) {
  .vk-godkend-raekke { grid-template-columns: auto minmax(0, 1fr); }
  .vk-godkend-billede { display: none; }
  .vk-godkend-handlinger { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Hjælp ── */
.vk-portal-tile--help { grid-column: 1 / -1; }
.vk-portal-tile--help .vk-portal-tile-icon { background: rgba(70,143,158,.14); color: var(--vk-teal-hover, #3A7885); }
.vk-portal-tile--help p { max-width: 560px; }
.vk-hjaelp-video { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 18px; background: var(--vk-dark, #2C2C2C); border-radius: 12px; }
.vk-hjaelp-trin { margin: 0; padding-left: 22px; }
.vk-hjaelp-trin li { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.vk-hjaelp-sp { margin: 22px 0 4px; font: 700 15px var(--vk-font); color: var(--vk-dark, #2C2C2C); }
.vk-hjaelp-sp:first-of-type { margin-top: 0; }
.vk-hjaelp-sv { margin: 0; font-size: 15px; line-height: 1.55; }
.vk-hjaelp-sv a { color: var(--vk-sage-text, #4A6A3E); text-decoration: underline; }
.vk-hjaelp-trin a, .vk-hjaelp-indhold a { color: var(--vk-sage-text, #4A6A3E); text-decoration: underline; }
.vk-hjaelp-indhold ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.vk-hjaelp-indhold li { margin: 0 0 6px; font-size: 15px; line-height: 1.5; break-inside: avoid; }
@media (max-width: 720px) { .vk-hjaelp-indhold ol { columns: 1; } }