/*
 * easyMember Webbmodul — publik design
 * Skapad 2026-05-26 (webbmodul-projektet).
 *
 * Design-princip (UX-experten 13§9): "Förening Klassisk" — lugn,
 * tjänsteorienterad, INTE trendig. Stora rubriker, generös vit yta,
 * subtila accenter. Mobile-first.
 *
 * Föreningens primärfärg sätts som --website-primary i master-layout
 * (från setting('website_theme_primary_color')). Resten härleds.
 */

/* ============================================================
   DESIGN-TOKENS
   ============================================================ */
:root {
    /* Färger härledda från --website-primary (sätts i master.blade.php) */
    --website-primary: #202942;
    --website-primary-soft: rgba(32, 41, 66, 0.08);
    --website-primary-strong: rgba(32, 41, 66, 0.92);
    --website-accent: #c9a96e;  /* Varm guld för subtila accenter */

    --website-text: #1a1a1a;
    --website-text-muted: #5a6275;
    --website-bg: #ffffff;
    --website-bg-soft: #f7f8fa;
    --website-bg-warm: #fbf9f5;
    --website-border: #e5e7eb;

    --website-radius: 10px;
    --website-radius-lg: 16px;
    --website-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --website-shadow: 0 8px 24px rgba(32, 41, 66, 0.08);
    --website-shadow-lg: 0 20px 50px rgba(32, 41, 66, 0.12);

    --website-section-py: 5rem;
}

@media (max-width: 768px) {
    :root {
        --website-section-py: 3rem;
    }
}

/* ============================================================
   BAS-STIL
   ============================================================ */

/* Reservera alltid plats för vertikala rullningslisten. Utan detta flyttar
   centrerat innehåll (t.ex. header-navbaren, loggan, driftmeddelande-texten)
   ~7px i sidled mellan en sida som scrollar och en som inte gör det — det syns
   när man går mellan publika webben (lång → scrollbar) och Mina sidor (korta
   sidor → ingen scrollbar). Gäller båda (båda laddar denna fil). */
html {
    scrollbar-gutter: stable;
}

/* På Mina sidor laddas ÄVEN mypages-v2.css EFTER denna fil, och den sätter
   html, body { overflow-x: hidden; width: 100%; max-width: 100vw }. Det:
     1) återinför ett scroll-container på <html> som gör scrollbar-gutter
        verkningslös, och
     2) kapar bredden till 100vw — som INKLUDERAR rullningslistens bredd —
        vilket dubbel-reserverar gutter och knuffar centrerat innehåll i sidled.
   Resultatet blev att allt (meny, logga, driftmeddelande) hamnade ~7px till
   höger på Mina sidor jämfört med publika webben.

   Fixen: högre specificitet (html:has(...) = 0,1,0 slår element-selektorn
   html = 0,0,1 oavsett laddningsordning, inget !important behövs).
   - overflow-x: clip i stället för hidden → skapar INGEN scroll-container,
     så scrollbar-gutter fungerar OCH position: sticky bevaras.
   - width: auto + max-width: none → upphäver 100vw-kapningen (ingen
     dubbel-reservering).
   - scrollbar-gutter: stable → samma gutter som publika webben.
   Verifierat i webbläsare: navbar.left blir identiska 91.2px på både
   scrollande och icke-scrollande sidor i båda layouterna. */
html:has(body.em-website-body) {
    overflow-x: clip;
    width: auto;
    max-width: none;
    scrollbar-gutter: stable;
}

body.em-website-body {
    overflow-x: clip;
    width: auto;
    max-width: none;
}

/* Mina sidor (mypages-v2.css) sätter body { letter-spacing: -0.01em } som ett
   app-typografival. Det ärvs ned i den DELADE webb-chromen (driftmeddelande,
   header-meny, footer) och gör texten ~2% smalare där än på publika webben —
   t.ex. blev driftmeddelandets text ~7px smalare, vilket sköt ikonen ~3.5px åt
   höger eftersom innehållet är centrerat. Publika webben ärver 'normal'.
   Vi nollställer letter-spacing på chrome-rötterna så de renderar IDENTISKT
   oavsett layout. Klass-selektor (0,0,1,0) slår body-elementregeln, och eftersom
   värdet sätts direkt på rötterna ärver deras barn 'normal' i stället för -0.01em.
   Påverkar INTE publika webben (redan normal) eller Mina sidors egna app-yta. */
.em-website-announcement,
.em-website-header,
.em-website-footer {
    letter-spacing: normal;
}

.em-website-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--website-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.em-website-body h1,
.em-website-body h2,
.em-website-body h3 {
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Eyebrow — liten text ovanför sektion-titlar */
.em-website-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--website-primary);
    margin-bottom: 0.75rem;
}

.em-website-eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--website-accent);
    vertical-align: middle;
    margin-right: 0.75rem;
    transform: translateY(-2px);
}

/* Sektions-titlar */
.em-website-section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--website-text);
    margin-bottom: 0;
}

/* ============================================================
   HERO
   ============================================================ */
.em-website-hero {
    position: relative;
    /* Extra padding-bottom så stats-kortet kan "lyfta upp" och överlappa */
    padding: 6rem 0 9rem;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 60%),
        linear-gradient(135deg, var(--website-primary) 0%, var(--website-primary-strong) 100%);
    color: white;
    overflow: hidden;
}

@media (max-width: 768px) {
    .em-website-hero {
        padding: 4rem 0 6rem;
    }
}

/* Subtilt SVG-pattern i hero-bakgrund för visuellt djup */
.em-website-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
}

.em-website-hero > .container {
    position: relative;
    z-index: 1;
}

.em-website-hero-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--website-accent);
    margin-bottom: 1.25rem;
    opacity: 0.95;
}

.em-website-hero-title {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
}

.em-website-hero-subtitle {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    opacity: 0.92;
    margin-bottom: 2rem;
    max-width: 540px;
}

.em-website-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: white;
    color: var(--website-primary);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--website-radius);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.em-website-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    color: var(--website-primary);
}

.em-website-hero-image {
    border-radius: var(--website-radius-lg);
    box-shadow: var(--website-shadow-lg);
}

/* ------------------------------------------------------------
   Hero-variant: helbild med textoverlay (admin-valbar via
   website_hero_layout = 'full'). Hero-bilden täcker hela sektionen
   och texten ligger ovanpå med en mörk gradient för läsbarhet
   (WCAG-kontrast). Behåller basens botten-padding så stats-kortet
   fortsätter att lyfta/överlappa precis som i split-varianten.
   ------------------------------------------------------------ */
.em-website-hero--full {
    display: flex;
    align-items: center;
    min-height: clamp(440px, 68vh, 720px);
    background-color: var(--website-primary); /* fallback om bilden inte laddas */
    background-image:
        linear-gradient(180deg, rgba(13, 20, 38, 0.55) 0%, rgba(13, 20, 38, 0.78) 100%),
        var(--hero-bg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* SVG-prickmönstret skulle skräpa över fotot — göm det i helbild-läget. */
.em-website-hero--full::before {
    display: none;
}

.em-website-hero--full > .container {
    width: 100%;
}

/* ============================================================
   GENERELL SEKTION
   ============================================================ */
.em-website-section {
    padding: var(--website-section-py) 0;
}

.em-website-section--soft {
    background: var(--website-bg-soft);
}

/* Kompakt sektion utan rubrik — mindre vertikal padding för diskret visning */
.em-website-section--compact {
    padding: calc(var(--website-section-py) * 0.5) 0;
}

.em-website-section--warm {
    background: var(--website-bg-warm);
}

.em-website-section--primary {
    background: var(--website-primary);
    color: white;
    position: relative;
    overflow: hidden;
}

/* Subtil mönsteroverlay för primary-sektioner */
.em-website-section--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M20 0c11.046 0 20 8.954 20 20s-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0zm0 2C10.059 2 2 10.059 2 20s8.059 18 18 18 18-8.059 18-18S29.941 2 20 2z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.em-website-section--primary > .container {
    position: relative;
    z-index: 1;
}

/* ============================================================
   INTRO
   ============================================================ */
.em-website-intro {
    text-align: center;
}

.em-website-intro-body {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--website-text-muted);
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

.em-website-intro-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--website-primary);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.em-website-intro-link:hover {
    gap: 0.75rem;
    color: var(--website-primary);
}

/* ============================================================
   KONTAKTSIDA
   ============================================================ */
.em-contact-info-card {
    background: var(--website-bg-soft);
    border-radius: var(--website-radius);
    padding: 1.75rem;
    position: sticky;
    top: 6rem;
}

.em-contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--website-border);
}

.em-contact-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.em-contact-info-row:first-child {
    padding-top: 0;
}

.em-contact-info-row > i {
    color: var(--website-primary);
    font-size: 1.1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.em-contact-info-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--website-text-muted);
    margin-bottom: 0.2rem;
}

.em-contact-info-row a {
    color: var(--website-text);
    text-decoration: none;
    font-weight: 500;
}

.em-contact-info-row a:hover {
    color: var(--website-primary);
}

.em-contact-info-row address {
    margin: 0;
    font-style: normal;
    color: var(--website-text);
    line-height: 1.5;
}

/* ============================================================
   STATS — "Föreningen i siffror" (lyfter över hero som floating card)
   ============================================================ */
.em-website-stats-wrapper {
    position: relative;
    z-index: 3;
    margin-top: -3rem;       /* drar upp kortet så det överlappar hero */
    margin-bottom: 3rem;
    padding: 0 1rem;
}

.em-website-stats-card {
    background: white;
    border-radius: var(--website-radius-lg);
    box-shadow: 0 18px 40px rgba(32, 41, 66, 0.14);
    padding: 1.25rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .em-website-stats-wrapper {
        margin-top: -2rem;
        margin-bottom: 2rem;
    }
    .em-website-stats-card {
        padding: 1rem 0.75rem;
    }
}

.em-stat {
    text-align: center;
    padding: 0.25rem;
    transition: transform 0.25s ease;
    position: relative;
}

.em-stat:hover {
    transform: translateY(-2px);
}

/* Tunn separator-linje mellan stats (bara från andra och framåt på desktop) */
@media (min-width: 768px) {
    .em-stat-bordered::before {
        content: '';
        position: absolute;
        left: 0;
        top: 25%;
        bottom: 25%;
        width: 1px;
        background: var(--website-border);
    }
}

.em-stat-number {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--website-primary);
    margin-bottom: 0.25rem;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--website-primary), var(--website-primary-strong));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.em-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--website-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================================
   NYHETSKORT
   ============================================================ */
.em-news-card {
    background: white;
    border-radius: var(--website-radius);
    overflow: hidden;
    box-shadow: var(--website-shadow-sm);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.em-news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--website-shadow);
}

.em-news-card-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.em-news-card-image-placeholder {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--website-primary-soft), var(--website-bg-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--website-primary);
    opacity: 0.4;
    font-size: 2.5rem;
}

.em-news-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.em-news-card-date {
    font-size: 0.8rem;
    color: var(--website-text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.em-news-card-pinned {
    display: inline-block;
    background: var(--website-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.em-news-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.em-news-card-title a {
    color: var(--website-text);
    text-decoration: none;
}

.em-news-card-title a:hover {
    color: var(--website-primary);
}

.em-news-card-excerpt {
    color: var(--website-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0;
}

/* ============================================================
   BILDGALLERI — lista + album
   ============================================================ */
.em-gallery-card {
    display: block;
    background: white;
    border-radius: var(--website-radius);
    overflow: hidden;
    box-shadow: var(--website-shadow-sm);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: inherit;
}

.em-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--website-shadow);
    color: inherit;
}

.em-gallery-card-cover {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--website-bg-soft);
    position: relative;
}

.em-gallery-card-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--website-primary);
    opacity: 0.3;
    font-size: 3.5rem;
    background: linear-gradient(135deg, var(--website-primary-soft), var(--website-bg-warm));
}

.em-gallery-card-count {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}

.em-gallery-card-body {
    padding: 1.25rem;
}

.em-gallery-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--website-text);
}

.em-gallery-card-date {
    font-size: 0.85rem;
    color: var(--website-text-muted);
    margin-bottom: 0.5rem;
}

.em-gallery-card-desc {
    font-size: 0.9rem;
    color: var(--website-text-muted);
    line-height: 1.5;
    margin-bottom: 0;
}

.em-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.em-gallery-grid-item {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--website-radius);
    background: var(--website-bg-soft);
    box-shadow: var(--website-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.em-gallery-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--website-shadow);
}

.em-gallery-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   STYRELSE — sektioner och kort
   ============================================================ */
.em-board-section {
    margin-top: 4.5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--website-border);
    position: relative;
}

/* Första sektionen ska inte ha topp-divider/glapp. OBS: kan inte använda
   :first-child — en <header> (sidrubriken) ligger före som första barn i
   containern, så :first-child matchade aldrig och första sektionen fick ~120px
   extra luft + en avdelarlinje. Sätts nu explicit via $loop->first i Blade. */
.em-board-section--first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.em-board-section-title {
    text-align: center;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--website-text);
    margin-bottom: 2.5rem;
    position: relative;
    padding-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.em-board-section-title::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--website-accent);
    border-radius: 3px;
}

/* Liten eyebrow ovan sektionsrubrik för extra polish */
.em-board-section-eyebrow {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--website-accent);
    margin-bottom: 0.5rem;
}

.em-board-card {
    background: white;
    border-radius: var(--website-radius);
    overflow: hidden;
    box-shadow: var(--website-shadow-sm);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.em-board-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--website-shadow);
}

.em-board-card-photo {
    aspect-ratio: 3 / 4;
    width: 100%;
    object-fit: cover;
    object-position: center;  /* bilden är pre-cropped server-side till exakt 3:4 porträtt */
    background-color: var(--website-bg-soft);
    display: block;
}

.em-board-card-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--website-primary);
    opacity: 0.3;
    font-size: 4rem;
    background: linear-gradient(135deg, var(--website-primary-soft), var(--website-bg-warm));
}

.em-board-card-body {
    padding: 1.5rem;
    text-align: center;
}

.em-board-card-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--website-text);
}

.em-board-card-role {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--website-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.em-board-card-bio {
    font-size: 0.9rem;
    color: var(--website-text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.em-board-card-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--website-border);
}

.em-board-card-contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--website-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.em-board-card-contact-item:hover {
    color: var(--website-primary);
}

.em-board-card-contact-item i {
    color: var(--website-primary);
    width: 16px;
}

/* ============================================================
   KALENDER — lista + detalj
   ============================================================ */
.em-calendar-card {
    background: white;
    border-radius: var(--website-radius);
    overflow: hidden;
    box-shadow: var(--website-shadow-sm);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.em-calendar-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--website-shadow);
}

.em-calendar-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.em-calendar-card-link:hover {
    color: inherit;
}

.em-calendar-card-cover {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    position: relative;
}

.em-calendar-card-cover-fallback {
    background: linear-gradient(135deg, var(--website-primary-soft), var(--website-bg-warm));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--website-primary);
    opacity: 0.5;
    font-size: 3rem;
}

.em-calendar-card-date {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: white;
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    line-height: 1;
}

.em-calendar-card-date-day {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--website-primary);
    line-height: 1;
}

.em-calendar-card-date-month {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--website-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}

.em-calendar-card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(164, 36, 59, 0.95);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.em-calendar-card-body {
    padding: 1.25rem;
}

.em-calendar-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    color: var(--website-text);
}

.em-calendar-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--website-text-muted);
}

.em-calendar-card-meta i {
    width: 16px;
    color: var(--website-accent);
    margin-right: 0.3rem;
}

/* ----- Region-chip + filter-pills ----- */
.em-region-chip {
    --chip-color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--chip-color) 12%, white);
    /* 55%, inte 80%: regionfargen valjs av foreningen, och ljusa farger
       (gult, ljusgront) gav 3.9-4.1 mot chipets ljusa bakgrund — under
       WCAG AA:s 4.5 for 12px text. Mer svart i blandningen gor att aven
       den ljusaste regionfargen klarar kravet. (2026-08-19) */
    color: color-mix(in srgb, var(--chip-color) 55%, black);
    border: 1px solid color-mix(in srgb, var(--chip-color) 30%, transparent);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

.em-region-chip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color);
    flex-shrink: 0;
}

.em-region-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.em-region-pill {
    --pill-color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: white;
    color: var(--website-text);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.em-region-pill:hover {
    background: color-mix(in srgb, var(--pill-color) 8%, white);
    border-color: color-mix(in srgb, var(--pill-color) 40%, transparent);
    color: var(--website-text);
    text-decoration: none;
}

.em-region-pill.is-active {
    background: var(--pill-color, var(--website-primary));
    border-color: var(--pill-color, var(--website-primary));
    color: white;
}

.em-region-pill.is-active:hover {
    color: white;
}

.em-region-pill-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pill-color);
    flex-shrink: 0;
}

.em-region-pill.is-active .em-region-pill-dot {
    background: white;
}

/* ----- Vy-toggle (Lista / Månad) ----- */
.em-calendar-view-toggle {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.em-calendar-view-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: white;
    color: var(--website-text-muted);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.em-calendar-view-pill:hover {
    background: var(--website-bg-soft);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--website-text);
    text-decoration: none;
}

.em-calendar-view-pill.is-active {
    background: var(--website-primary);
    border-color: var(--website-primary);
    color: white;
}

.em-calendar-view-pill.is-active:hover {
    color: white;
}

/* ----- Månadsgrid ----- */
.em-month-grid {
    background: white;
    border-radius: var(--website-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.em-month-grid-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--website-bg-soft);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.em-month-grid-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: var(--website-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.em-month-grid-nav-btn:hover {
    background: var(--website-primary);
    color: white;
    transform: scale(1.05);
    text-decoration: none;
}

.em-month-grid-nav-title {
    text-align: center;
}

.em-month-grid-nav-title h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0;
}

.em-month-grid-today-link {
    font-size: 0.75rem;
    color: var(--website-text-muted);
    text-decoration: none;
}

.em-month-grid-today-link:hover {
    color: var(--website-primary);
    text-decoration: underline;
}

.em-month-grid-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--website-bg-soft);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.em-month-grid-weekday {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--website-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.em-month-grid-body {
    display: flex;
    flex-direction: column;
}

.em-month-grid-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    min-height: 110px;
}

.em-month-grid-row:last-child {
    border-bottom: none;
}

.em-month-grid-cell {
    padding: 0.4rem 0.5rem 0.5rem;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.em-month-grid-cell:nth-child(7n) {
    border-right: none;
}

.em-month-grid-cell.is-outside {
    background: rgba(0, 0, 0, 0.015);
}

.em-month-grid-cell.is-outside .em-month-grid-cell-day {
    color: rgba(0, 0, 0, 0.3);
}

.em-month-grid-cell.is-today .em-month-grid-cell-day {
    background: var(--website-primary);
    color: white;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.em-month-grid-cell-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.em-month-grid-cell-day {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--website-text);
}

.em-month-grid-cell-events {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.em-month-grid-event {
    --event-color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--event-color) 12%, white);
    color: color-mix(in srgb, var(--event-color) 85%, black);
    border-left: 3px solid var(--event-color);
    font-size: 0.72rem;
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    transition: background 0.15s ease;
}

.em-month-grid-event:hover {
    background: color-mix(in srgb, var(--event-color) 22%, white);
    text-decoration: none;
    color: color-mix(in srgb, var(--event-color) 85%, black);
}

.em-month-grid-event-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--event-color);
}

.em-month-grid-event-time {
    flex-shrink: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.em-month-grid-event-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.em-month-grid-event-more {
    background: none;
    border: none;
    color: var(--website-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 1px 4px;
    cursor: pointer;
    text-align: left;
}

.em-month-grid-event-more:hover {
    color: var(--website-primary);
    text-decoration: underline;
}

.em-month-grid-overflow-card {
    background: white;
    border-radius: var(--website-radius);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.em-month-grid-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    padding: 0.75rem 0;
}

.em-month-grid-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--website-text);
}

.em-month-grid-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Mobil: kompaktare grid, dölj event-titlar (visa bara prick + tid) */
@media (max-width: 768px) {
    .em-month-grid-row {
        min-height: 80px;
    }

    .em-month-grid-cell {
        padding: 0.3rem 0.25rem;
    }

    .em-month-grid-event {
        padding: 1px 4px;
        font-size: 0.65rem;
    }

    .em-month-grid-event-title {
        display: none;
    }

    .em-month-grid-weekday {
        font-size: 0.65rem;
        padding: 0.4rem 0.1rem;
    }
}

/* ----- Sökfunktion ----- */
.em-search-form {
    max-width: 640px;
    margin: 0 auto;
}

.em-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    background: white;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.em-search-input-wrapper:focus-within {
    border-color: var(--website-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.em-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--website-text-muted);
    pointer-events: none;
}

.em-search-input {
    flex: 1;
    padding: 0.75rem 0.75rem 0.75rem 3rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--website-text);
    outline: none;
    min-width: 0;
}

.em-search-input::placeholder {
    color: var(--website-text-muted);
}

.em-search-submit {
    background: var(--website-primary);
    color: white;
    border: none;
    padding: 0 1.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.em-search-submit:hover {
    background: color-mix(in srgb, var(--website-primary) 85%, black);
}

.em-search-results {
    margin: 0;
    padding: 0;
}

.em-search-result {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.em-search-result:last-child {
    border-bottom: none;
}

.em-search-result-date {
    font-size: 0.75rem;
    color: var(--website-text-muted);
    margin-bottom: 0.25rem;
}

.em-search-result-title {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--website-primary);
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.em-search-result-title:hover {
    text-decoration: underline;
    color: var(--website-primary);
}

.em-search-result-url {
    font-size: 0.75rem;
    color: #008000;
    margin-bottom: 0.4rem;
    word-break: break-all;
}

.em-search-result-excerpt {
    font-size: 0.9rem;
    color: var(--website-text);
    margin: 0;
    line-height: 1.5;
}

.em-search-result-excerpt mark,
.em-search-result-title mark {
    background: rgba(255, 235, 59, 0.4);
    color: inherit;
    font-weight: 600;
    padding: 0 0.1em;
    border-radius: 2px;
}

@media (max-width: 576px) {
    .em-search-submit {
        padding: 0 1rem;
        font-size: 0.85rem;
    }

    .em-search-input {
        font-size: 0.9rem;
        padding-left: 2.5rem;
    }

    .em-search-icon {
        left: 0.85rem;
    }
}

/* ----- Startsida: kolumn-radlayout (drag-drop ordnar sektioner i 1 eller 2 kol) ----- */
.em-website-home-row {
    /* Yttre radwrapper har sektion-padding/bakgrund, inre sektioner får ingen */
}

.em-website-home-row-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* När en sektion-partial körs i kolumn-läge skippas dess egen padding/bakgrund
   så vi inte får dubbla padding eller fel bakgrundsfärg per kolumn */
.em-website-home-row-col > .em-website-section,
.em-website-home-row-col > section.em-website-section {
    padding: 0;
    background: transparent !important;
}

.em-website-home-row-col > section > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.em-website-home-row-col > .em-website-hero,
.em-website-home-row-col > .em-website-stats-wrapper,
.em-website-home-row-col > .em-website-cta-band,
.em-website-home-row-col > .em-website-contact-cta {
    /* Visuella full-width-sektioner krymper graciöst i kolumn */
    padding: 1rem 0;
}

/* ----- Senaste galleri på startsidan ----- */
.em-home-gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.em-home-gallery-item {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: var(--website-bg-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.em-home-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.em-home-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.em-home-gallery-item:hover img {
    transform: scale(1.08);
}

.em-home-gallery-item.has-overflow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.em-home-gallery-overflow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* Scrim: texten ligger direkt pa ett uppladdat foto, och ett ljust foto
       gjorde den olasbar. Gradienten garanterar underlag oavsett bild. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    font-weight: 700;
    font-size: 0.95rem;
    z-index: 1;
    text-align: center;
    padding: 0.5rem;
}

@media (max-width: 991px) {
    .em-home-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .em-home-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
}

/* ----- Sponsorer på startsidan ----- */
.em-home-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem 1.5rem;
    align-items: center;
}

.em-home-sponsor-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: var(--website-text);
    font-weight: 600;
    text-align: center;
}

.em-home-sponsor-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: var(--website-text);
}

.em-home-sponsor-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Banner-stil: stora rektangulära annonser i 2-kolumns grid */
.em-home-sponsor-banners {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.em-home-sponsor-banner {
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: white;
    text-decoration: none;
    color: var(--website-text);
    aspect-ratio: 4 / 1;
}

.em-home-sponsor-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    text-decoration: none;
    color: var(--website-text);
}

.em-home-sponsor-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.em-home-sponsor-banner-name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
    font-size: 1.25rem;
    text-align: center;
    padding: 1rem;
    background: var(--website-bg-soft);
}

@media (max-width: 768px) {
    .em-home-sponsor-banners {
        grid-template-columns: 1fr;
    }
}

/* ----- Region-sidor (lista, hero, tabs, hub) ----- */
.em-region-card {
    --region-color: #6c757d;
    position: relative;
    display: block;
    background: white;
    border-radius: var(--website-radius);
    padding: 1.75rem 1.5rem;
    text-decoration: none;
    color: var(--website-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--website-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

.em-region-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    border-color: color-mix(in srgb, var(--region-color) 35%, transparent);
    color: var(--website-text);
    text-decoration: none;
}

.em-region-card-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--region-color);
}

.em-region-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--website-text);
}

.em-region-card-shortname {
    font-size: 0.85rem;
    color: var(--website-text-muted);
    margin-bottom: 0;
}

.em-region-card-arrow {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--region-color);
    font-size: 1.1rem;
}

/* ------------------------------------------------------------
   Regioner: vy-växlare (Karta / Lista)
   ------------------------------------------------------------ */
.em-region-viewtoggle {
    display: flex;
    width: fit-content;
    gap: 0.25rem;
    padding: 0.25rem;
    margin: 0 auto 2rem;
    border: 1px solid var(--website-border);
    border-radius: 999px;
    background: var(--website-bg-soft);
}

.em-region-viewtoggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--website-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.em-region-viewtoggle-btn:hover {
    color: var(--website-text);
}

.em-region-viewtoggle-btn.is-active {
    background: white;
    color: var(--website-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.em-region-viewtoggle-btn:focus-visible {
    outline: 2px solid var(--website-primary);
    outline-offset: 2px;
}

/* Wrapper för att centrera växlaren */
.em-website-section > .container > .em-region-viewtoggle {
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   Regioner: listvy (namn + färg)
   ------------------------------------------------------------ */
.em-region-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 640px;
    border: 1px solid var(--website-border);
    border-radius: var(--website-radius);
    overflow: hidden;
    background: white;
}

.em-region-list-li + .em-region-list-li {
    border-top: 1px solid var(--website-border);
}

.em-region-list-item {
    --region-color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--website-text);
    transition: background-color 0.15s ease;
}

.em-region-list-item:hover {
    background: color-mix(in srgb, var(--region-color) 8%, white);
    color: var(--website-text);
    text-decoration: none;
}

.em-region-list-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--region-color);
}

.em-region-list-name {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1.05rem;
}

.em-region-list-arrow {
    flex: 0 0 auto;
    color: var(--website-text-muted);
    font-size: 0.85rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.em-region-list-item:hover .em-region-list-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--region-color);
}

/* Klickbar regionskarta (inline SVG) */
.em-region-map {
    max-width: 560px;
    margin: 0 auto;
}

.em-region-map-svg {
    display: block;
    width: 100%;
    height: auto;
}

.em-region-map-land {
    fill: transparent;
}

.em-region-map-svg .region {
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linejoin: round;
    filter: url(#emRegionShadow);
    transition: filter 0.15s ease, opacity 0.15s ease;
    outline: none;
}

.em-region-map-svg .region.is-clickable {
    cursor: pointer;
}

.em-region-map-svg .region.is-clickable:hover,
.em-region-map-svg .region.is-clickable:focus-visible {
    filter: url(#emRegionShadow) brightness(1.08);
    stroke-width: 3;
}

.em-region-map-svg .region.is-clickable:focus-visible {
    stroke: var(--website-primary, #1d4ed8);
}

.em-region-map-svg .region.is-inactive {
    opacity: 0.4;
}

.em-region-map-labels text {
    fill: #ffffff;
    font-family: inherit;
    font-weight: 600;
    font-size: 22px;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(23, 32, 51, 0.28);
    stroke-width: 3px;
    pointer-events: none;
}

.em-region-map-labels .small {
    font-size: 20px;
}

.em-region-map-labels .tiny {
    font-size: 17px;
}

/* Region-hero på sub-sidor */
.em-region-hero {
    --region-color: #6c757d;
    --region-hero-image: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--region-color) 8%, white), white);
    padding: 2rem 0 1.25rem;
    border-bottom: 1px solid var(--website-border);
}

.em-region-back {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--website-text-muted);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.em-region-back:hover {
    color: var(--region-color);
    text-decoration: underline;
}

.em-region-hero-content {
    /* Standard: ingen extra indrag */
}

/* När badge-stilen är aktiv på headern:
   – kollapsa den tomma badge-backdropen som annars ligger mellan header och
     region-hero. Navy-bandet togs bort 2026-05-30 → kvar blev bara tom vit
     luft. Utan strippan reser sig hero:n upp och möter headern; emblemet
     hänger då in i hero:ns övre vänstra hörn.
   – ge region-heron egen topp-luft igen (backdropen gör det inte längre)
   – shifta innehållet åt höger så det inte hamnar bakom den hängande logon
     (padding-left skalas med --badge-size så det alltid stämmer) */
.em-website-badge-backdrop:has(+ .em-region-hero) {
    display: none;
}

body:has(.em-website-header--logo-badge) .em-region-hero {
    padding-top: 1.5rem;
}

body:has(.em-website-header--logo-badge) .em-region-hero-content {
    padding-left: calc(var(--badge-size) * 1px + 0.75rem);
}

@media (max-width: 768px) {
    body:has(.em-website-header--logo-badge) .em-region-hero-content {
        padding-left: 0;
        padding-top: 1rem;
    }
}

.em-region-hero-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 2rem;
    font-weight: 800;
    color: var(--website-text);
    margin: 0;
}

.em-region-hero-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--region-color);
    flex-shrink: 0;
}

.em-region-hero-subtitle {
    font-size: 0.95rem;
    color: var(--website-text-muted);
    margin: 0.25rem 0 0 1.65rem;
}

/* Regionnamnet på undersidorna. Sidans h1 är där sektionens namn — Nyheter,
   Kalender — så regionen står som förled ovanför i mindre grad. */
.em-region-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--website-text-muted);
    margin: 0 0 0.35rem 0;
}

.em-region-hero-eyebrow .em-region-hero-dot {
    width: 10px;
    height: 10px;
}

.em-region-hero-description {
    font-size: 0.95rem;
    color: var(--website-text-muted);
    margin: 0.4rem 0 0 0;
    max-width: 65ch;
}

/* === Region-hero med bakgrundsbild ===
   Klassen em-region-hero--has-image läggs på av _header.blade.php när
   hero_image_path är satt. CSS-variabeln --region-hero-image bär URL:en. */
.em-region-hero--has-image {
    background-image: var(--region-hero-image);
    background-size: cover;
    background-position: center;
    min-height: clamp(180px, 22vw, 280px);
    display: flex;
    align-items: flex-end;
    border-bottom: none;
    position: relative;
}

/* Mörk gradient-overlay: lätt topp → tyngre botten, för läsbarhet */
.em-region-hero--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.em-region-hero--has-image .container {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 1.25rem;
}

.em-region-hero--has-image .em-region-back {
    color: rgba(255, 255, 255, 0.85);
}

.em-region-hero--has-image .em-region-back:hover {
    color: white;
}

.em-region-hero--has-image .em-region-hero-title {
    color: white;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.em-region-hero--has-image .em-region-hero-subtitle,
.em-region-hero--has-image .em-region-hero-eyebrow {
    color: rgba(255, 255, 255, 0.8);
}

.em-region-hero--has-image .em-region-hero-description {
    color: rgba(255, 255, 255, 0.85);
}

/* Tabs */
.em-region-tabs {
    background: white;
    border-bottom: 1px solid var(--website-border);
    position: sticky;
    /* Headerns hojd varierar med logotyplaget (71/73/166px for inline/badge/
       stacked). Hardkodad 64px gjorde att flikraden glled in under headern —
       9px i badge-lage, 102px i stacked, dar hela raden forsvann. Variabeln
       satts av headerns ResizeObserver i master-layouten, och ar 0 nar
       headern inte ar sticky. (2026-08-19) */
    top: var(--em-header-offset, 0px);
    z-index: 1010;
}

/* Fade-indikator till höger på mobil — antyder att tabs är scrollbara */
.em-region-tabs .container {
    position: relative;
}
.em-region-tabs .container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, transparent, white 80%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
@media (max-width: 768px) {
    .em-region-tabs .container::after { opacity: 1; }
}

.em-region-tabs-list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    /* Dölj scrollbaren visuellt men behåll scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}

.em-region-tabs-list::-webkit-scrollbar {
    display: none;
}

.em-region-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    color: var(--website-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    scroll-snap-align: start;
    flex-shrink: 0;
}

.em-region-tab:hover {
    color: var(--website-text);
    text-decoration: none;
}

.em-region-tab.is-active {
    color: var(--website-text);
    border-bottom-color: var(--region-color, var(--website-primary));
    font-weight: 700;
}

/* Hub-kort */
.em-region-hub-card {
    background: white;
    border-radius: var(--website-radius);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--website-border);
    height: 100%;
}

.em-region-hub-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--website-border);
}

.em-region-hub-link {
    font-size: 0.85rem;
    color: var(--region-color, var(--website-primary));
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.em-region-hub-link:hover {
    text-decoration: underline;
    color: var(--region-color, var(--website-primary));
}

.em-region-hub-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ----- Nyhetskort (mini) ----- */
.em-region-hub-news-card {
    display: flex;
    gap: 0.85rem;
    padding: 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--website-text);
    transition: background 0.15s ease, transform 0.15s ease;
}

.em-region-hub-news-card:hover {
    background: color-mix(in srgb, var(--region-color, var(--website-primary)) 6%, transparent);
    text-decoration: none;
    color: var(--website-text);
    transform: translateX(2px);
}

.em-region-hub-news-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--website-bg-soft);
}

.em-region-hub-news-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--website-text-muted);
    font-size: 1.25rem;
}

.em-region-hub-news-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.em-region-hub-news-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--website-text);
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.em-region-hub-news-date {
    font-size: 0.78rem;
    color: var(--website-text-muted);
}

.em-region-hub-news-date i {
    margin-right: 0.25rem;
}

/* ----- Aktivitetskort (mini) ----- */
.em-region-hub-activity-card {
    display: flex;
    gap: 0.85rem;
    padding: 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--website-text);
    transition: background 0.15s ease, transform 0.15s ease;
}

.em-region-hub-activity-card:hover {
    background: color-mix(in srgb, var(--region-color, var(--website-primary)) 6%, transparent);
    text-decoration: none;
    color: var(--website-text);
    transform: translateX(2px);
}

.em-region-hub-activity-date {
    flex-shrink: 0;
    width: 56px;
    height: 64px;
    border-radius: 8px;
    background: var(--region-color, var(--website-primary));
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.em-region-hub-activity-day {
    font-size: 1.5rem;
    font-weight: 800;
}

.em-region-hub-activity-month {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0.15rem;
    letter-spacing: 0.05em;
}

.em-region-hub-activity-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.em-region-hub-activity-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.em-region-hub-activity-meta {
    font-size: 0.78rem;
    color: var(--website-text-muted);
}

.em-region-hub-activity-meta i {
    margin-right: 0.25rem;
    width: 12px;
}

/* ----- Album-kort (mini med overlay) ----- */
.em-region-hub-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.em-region-hub-album-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.em-region-hub-album-card:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.em-region-hub-album-cover {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--website-bg-soft);
}

.em-region-hub-album-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--website-text-muted);
    font-size: 1.5rem;
}

.em-region-hub-album-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 50%);
    padding: 0.6rem 0.75rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}

.em-region-hub-album-title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.em-region-hub-album-date {
    font-size: 0.7rem;
    opacity: 0.9;
}

/* ----- Kontaktkort med avatar ----- */
.em-region-hub-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.em-region-hub-contact {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.em-region-hub-contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--region-color, var(--website-bg-soft));
}

.em-region-hub-contact-avatar--placeholder {
    background: var(--website-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--website-text-muted);
    font-size: 1.1rem;
}

.em-region-hub-contact-body {
    min-width: 0;
}

.em-region-hub-contact-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--website-text);
    line-height: 1.2;
}

.em-region-hub-contact-role {
    font-size: 0.8rem;
    color: var(--website-text-muted);
    margin-top: 0.1rem;
}

@media (max-width: 768px) {
    .em-region-hero-title { font-size: 1.5rem; }
    .em-region-tab {
        padding: 0.75rem 0.85rem;
        font-size: 0.85rem;
        gap: 0.35rem;
    }
    /* Lite extra space till höger så fade-gradienten inte täcker sista taben */
    .em-region-tabs-list { padding-right: 1.5rem; }
}

/* ----- Cookie/GDPR consent manager ----- */
.em-cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: 720px;
    margin: 0 auto;
}

.em-cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* --- Compact-vy --- */
.em-cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.em-cookie-banner-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--website-text);
    line-height: 1.4;
}

.em-cookie-banner-text i {
    color: var(--website-primary);
}

.em-cookie-banner-link {
    color: var(--website-primary);
    font-weight: 600;
    margin-left: 0.25rem;
    white-space: nowrap;
}

.em-cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* --- Gemensamma knappar (alla vyer) --- */
.em-cookie-btn {
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.em-cookie-btn--primary {
    background: var(--website-primary);
    color: white;
}

.em-cookie-btn--primary:hover {
    background: color-mix(in srgb, var(--website-primary) 85%, black);
    transform: translateY(-1px);
}

.em-cookie-btn--secondary {
    background: transparent;
    color: var(--website-text-muted);
    border: 1px solid var(--website-border);
}

.em-cookie-btn--secondary:hover {
    background: var(--website-bg-soft);
    color: var(--website-text);
}

.em-cookie-btn--ghost {
    background: transparent;
    color: var(--website-text);
    border: 1px solid transparent;
}

.em-cookie-btn--ghost:hover {
    background: var(--website-bg-soft);
    border-color: var(--website-border);
}

/* --- Expanded-vy (kategorier) --- */
.em-cookie-banner-expanded {
    padding: 1.25rem 1.5rem 1.25rem;
    max-height: 80vh;
    overflow-y: auto;
}

.em-cookie-banner-expanded-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--website-border);
}

.em-cookie-banner-expanded-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0 0 0.5rem 0;
}

.em-cookie-banner-expanded-title i {
    color: var(--website-primary);
}

.em-cookie-banner-expanded-desc {
    font-size: 0.875rem;
    color: var(--website-text-muted);
    line-height: 1.5;
    margin: 0;
}

.em-cookie-banner-expanded-desc a {
    color: var(--website-primary);
    font-weight: 600;
    margin-left: 0.25rem;
}

.em-cookie-categories {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.em-cookie-category {
    background: var(--website-bg-soft);
    border: 1px solid var(--website-border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.em-cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.em-cookie-category-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--website-text);
}

.em-cookie-category-name i {
    color: var(--website-primary);
}

.em-cookie-category-required {
    font-size: 0.75rem;
    color: var(--website-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.15rem;
}

.em-cookie-category-desc {
    font-size: 0.825rem;
    color: var(--website-text-muted);
    line-height: 1.45;
    margin: 0;
}

/* --- Toggle-switch --- */
.em-cookie-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.em-cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.em-cookie-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.2s ease;
}

.em-cookie-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.em-cookie-toggle input:checked + .em-cookie-toggle-slider {
    background: var(--website-primary);
}

.em-cookie-toggle input:checked + .em-cookie-toggle-slider::before {
    transform: translateX(20px);
}

.em-cookie-toggle input:focus-visible + .em-cookie-toggle-slider {
    outline: 2px solid var(--website-primary);
    outline-offset: 2px;
}

.em-cookie-toggle--disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.em-cookie-toggle--disabled .em-cookie-toggle-slider {
    background: var(--website-primary);
    opacity: 0.6;
}

.em-cookie-banner-expanded-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--website-border);
}

@media (max-width: 576px) {
    .em-cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 0.85rem 1rem;
    }
    .em-cookie-banner-actions {
        flex-direction: column-reverse;
    }
    .em-cookie-btn {
        width: 100%;
    }
    .em-cookie-banner-expanded {
        padding: 1rem 1rem;
    }
    .em-cookie-banner-expanded-footer {
        flex-direction: column-reverse;
    }
}

/* ----- Sponsorer ----- */

/* Footer-strip — diskret rad logos ovanför footer-innehållet */
.em-website-sponsor-strip {
    background: white;
    border-bottom: 1px solid var(--website-border);
    padding: 1.5rem 0;
}

.em-website-sponsor-strip-label {
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--website-text-muted);
    margin-bottom: 1rem;
    font-weight: 600;
}

.em-website-sponsor-strip-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 2.5rem;
}

.em-website-sponsor-strip-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    max-width: 160px;
    filter: grayscale(0.7);
    opacity: 0.75;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: var(--website-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.em-website-sponsor-strip-item:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
    color: var(--website-text);
    text-decoration: none;
}

.em-website-sponsor-strip-item img {
    max-height: 48px;
    max-width: 100%;
    object-fit: contain;
}

.em-website-sponsor-strip-link {
    font-size: 0.85rem;
    color: var(--website-text-muted);
    text-decoration: none;
}

.em-website-sponsor-strip-link:hover {
    color: var(--website-primary);
    text-decoration: underline;
}

/* /sponsorer-sidan — grupperat per tier med olika storlekar */
.em-sponsor-group-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--website-text-muted);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--website-border);
}

.em-sponsor-grid {
    display: grid;
    gap: 1.5rem;
    justify-items: center;
}

/* Tier-specifika storlekar */
.em-sponsor-grid--main {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
}

.em-sponsor-grid--gold {
    grid-template-columns: repeat(2, 1fr);
    max-width: 920px;
    margin: 0 auto;
}

.em-sponsor-grid--silver {
    grid-template-columns: repeat(3, 1fr);
}

.em-sponsor-grid--partner,
.em-sponsor-grid--other {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .em-sponsor-grid--gold,
    .em-sponsor-grid--silver,
    .em-sponsor-grid--partner,
    .em-sponsor-grid--other {
        grid-template-columns: repeat(2, 1fr);
    }
}

.em-sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    border: 1px solid var(--website-border);
    border-radius: var(--website-radius);
    padding: 1.5rem 1rem;
    text-decoration: none;
    color: var(--website-text);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    width: 100%;
}

.em-sponsor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: color-mix(in srgb, var(--website-primary) 25%, transparent);
    text-decoration: none;
    color: var(--website-text);
}

.em-sponsor-card-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.em-sponsor-card-logo img {
    max-width: 100%;
    object-fit: contain;
}

/* Tier-specifika logo-höjder */
.em-sponsor-group--main .em-sponsor-card-logo img { max-height: 140px; }
.em-sponsor-group--gold .em-sponsor-card-logo img { max-height: 100px; }
.em-sponsor-group--silver .em-sponsor-card-logo img { max-height: 80px; }
.em-sponsor-group--partner .em-sponsor-card-logo img,
.em-sponsor-group--other .em-sponsor-card-logo img { max-height: 60px; }

.em-sponsor-card-name {
    font-weight: 700;
    font-size: 1.1rem;
}

.em-sponsor-card-label {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.em-sponsor-card-desc {
    font-size: 0.85rem;
    color: var(--website-text-muted);
    margin: 0;
}

/* ----- Detaljsida ----- */
.em-activity-detail-meta {
    background: var(--website-bg-soft);
    border-radius: var(--website-radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--website-text);
}

.em-activity-detail-meta i {
    color: var(--website-accent);
    margin-right: 0.5rem;
    width: 18px;
}

.em-activity-booking-card {
    background: white;
    border-radius: var(--website-radius);
    padding: 1.5rem;
    box-shadow: var(--website-shadow);
    position: sticky;
    top: 6rem;
}

.em-activity-booking-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--website-primary);
    color: white;
    font-weight: 600;
    border-radius: var(--website-radius);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.em-activity-booking-button:hover {
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(32, 41, 66, 0.25);
}

.em-activity-booking-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--website-radius);
    font-weight: 600;
    text-align: center;
}

.em-activity-booking-status-full {
    background: rgba(164, 36, 59, 0.1);
    color: #A4243B;
}

.em-activity-booking-status-soon {
    background: rgba(201, 169, 110, 0.15);
    color: #6b4423;
}

.em-activity-booking-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.em-activity-booking-info-label {
    font-size: 0.8rem;
    color: var(--website-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.em-activity-booking-info-value {
    font-weight: 700;
    color: var(--website-text);
}

/* ============================================================
   AKTIVITETSKORT — legacy (på startsidan)
   ============================================================ */
.em-activity-card {
    background: white;
    border-radius: var(--website-radius);
    padding: 1.5rem;
    height: 100%;
    box-shadow: var(--website-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-left: 4px solid var(--website-accent);
    position: relative;
}

.em-activity-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--website-shadow);
}

.em-activity-card-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--website-primary);
    margin-bottom: 0.75rem;
}

.em-activity-card-date i {
    color: var(--website-accent);
}

.em-activity-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0;
}

.em-activity-card-title a {
    color: var(--website-text);
    text-decoration: none;
}

.em-activity-card-title a:hover {
    color: var(--website-primary);
}

/* Hela kortet klickbart (stretched-link) + tydlig affordans */
.em-activity-card--clickable {
    cursor: pointer;
    padding-right: 2.75rem; /* plats för pilen uppe till höger */
}

.em-activity-card-arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--website-text-muted);
    opacity: 0.45;
    font-size: 0.85rem;
    transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.em-activity-card--clickable:hover .em-activity-card-arrow {
    color: var(--website-primary);
    opacity: 1;
    transform: translateX(4px);
}

.em-activity-card--clickable:hover .em-activity-card-title a {
    color: var(--website-primary);
}

/* Tangentbordsfokus: rita ringen runt hela kortet, inte bara texten */
.em-activity-card--clickable:has(.em-activity-card-link:focus-visible) {
    outline: 2px solid var(--website-primary);
    outline-offset: 3px;
}

.em-activity-card-link:focus-visible {
    outline: none;
}

/* ============================================================
   SEKTIONS-HEADER (titel + "Visa alla"-länk)
   ============================================================ */
.em-website-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.em-website-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--website-primary);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.em-website-section-link:hover {
    gap: 0.75rem;
    color: var(--website-primary);
}

/* ============================================================
   CTA-BAND
   ============================================================ */
.em-website-cta-band {
    text-align: center;
    padding: var(--website-section-py) 0;
}

.em-website-cta-band-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: white;
}

.em-website-cta-band-sub {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.em-website-cta-band-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: white;
    color: var(--website-primary);
    font-weight: 600;
    border-radius: var(--website-radius);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.em-website-cta-band-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    color: var(--website-primary);
}

/* ============================================================
   KONTAKT-CTA
   ============================================================ */
.em-website-contact-cta {
    text-align: center;
    padding: var(--website-section-py) 0;
    background: var(--website-bg-soft);
}

.em-website-contact-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: white;
    color: var(--website-primary);
    border-radius: 50%;
    margin-bottom: 1.25rem;
    box-shadow: var(--website-shadow-sm);
    font-size: 1.5rem;
}

.em-website-contact-cta-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.em-website-contact-cta-text {
    color: var(--website-text-muted);
    margin-bottom: 1.5rem;
}

/* ============================================================
   PAGE (CMS-sida)
   ============================================================ */
.em-website-page-cover {
    height: 320px;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-bottom: 0;
}

.em-website-page-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.em-website-page-cover > .container {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 2rem;
}

.em-website-page-cover-title {
    color: white;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

/* ── Members-only pill (publik sida) ───────────────────────────────────────── */
.em-members-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--website-primary);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Pill ovanpå cover-bild — halvgenomskinlig glasmorphism */
.em-members-pill--cover {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: none;
    margin-top: 0.625rem;
}

/* ── Members-only lock-ikon i navigationen ─────────────────────────────────── */
.em-nav-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    margin-left: 0.35em;
    border-radius: 50%;
    background: var(--website-primary);
    color: #fff;
    font-size: 0.58em;
    vertical-align: middle;
    opacity: 0.85;
    flex-shrink: 0;
}

.em-website-page-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--website-text);
}

.em-website-page-body h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--website-text);
}

.em-website-page-body h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--website-text);
}

.em-website-page-body p {
    margin-bottom: 1.25rem;
}

.em-website-page-body a {
    color: var(--website-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.15s ease;
}

.em-website-page-body a:hover {
    opacity: 0.7;
}

.em-website-page-body ul,
.em-website-page-body ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.em-website-page-body li {
    margin-bottom: 0.4rem;
}

.em-website-page-body blockquote {
    border-left: 4px solid var(--website-accent);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    color: var(--website-text-muted);
    font-style: italic;
}

.em-website-page-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--website-radius);
    margin: 1.5rem 0;
}

.em-website-page-body figure {
    margin: 1.5rem 0;
}

.em-website-page-body figure img {
    margin: 0;
}

.em-website-page-body figcaption {
    font-size: 0.85rem;
    color: var(--website-text-muted);
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

.em-website-page-body hr {
    border: 0;
    height: 1px;
    background: var(--website-border);
    margin: 2.5rem 0;
}

/* ============================================================
   NYHET — detaljsida
   ============================================================ */
.em-news-show-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.em-news-show-excerpt {
    color: var(--website-text-muted);
    font-size: 1.15rem;
    line-height: 1.55;
    margin: 1.5rem 0 2rem;
    padding-left: 1rem;
    border-left: 3px solid var(--website-accent);
}

.em-news-sidebar {
    background: var(--website-bg-soft);
    border-radius: var(--website-radius);
    padding: 1.5rem;
}

.em-news-sidebar-item {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--website-border);
}

.em-news-sidebar-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.em-news-sidebar-item a {
    color: inherit;
    transition: opacity 0.15s ease;
}

.em-news-sidebar-item a:hover {
    opacity: 0.7;
}

.em-news-sidebar-date {
    font-size: 0.75rem;
    color: var(--website-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.em-news-sidebar-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--website-text);
}

/* ------------------------------------------------------------
   Dela-knappar (nyhetsartikel)
   ------------------------------------------------------------ */
.em-news-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--website-border);
}

.em-news-share-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--website-text-muted);
}

.em-news-share-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.em-news-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--website-border);
    border-radius: 999px;
    background: white;
    color: var(--website-text);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.em-news-share-btn i {
    font-size: 1rem;
}

.em-news-share-btn:hover {
    border-color: var(--website-primary);
    color: var(--website-primary);
}

.em-news-share-btn:active {
    transform: scale(0.96);
}

.em-news-share-btn--native {
    border-color: var(--website-primary);
    background: var(--website-primary);
    color: white;
}

.em-news-share-btn--native:hover {
    color: white;
    filter: brightness(1.05);
}

.em-news-share-btn--facebook:hover { border-color: #1877f2; color: #1877f2; }
.em-news-share-btn--x:hover { border-color: #000; color: #000; }
.em-news-share-btn--linkedin:hover { border-color: #0a66c2; color: #0a66c2; }

.em-news-share-btn--copy.is-copied {
    border-color: #16a34a;
    color: #16a34a;
}

/* ============================================================
   HEADER
   ============================================================ */
.em-website-header {
    background: white;
    /* Position:relative behövs för att z-index ska gälla även i icke-sticky läge,
       annars hamnar dropdown-menyer bakom hero/content. */
    position: relative;
    z-index: 1020;
    border-bottom: 1px solid var(--website-border);
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255, 255, 255, 0.96);
    /* Egen typsnitts-baslinje (1rem) så headern renderas identiskt oavsett
       värd-layoutens body-font-size. Mina sidor sätter body till 0.9375rem via
       mypages-v2.css — utan denna rad ärver nav-länkarna den mindre storleken
       och headern ser krympt ut jämfört med publika webben. */
    font-size: 1rem;
    /* Tillåt logo-badge att "poppa ut" nedanför header-kanten */
    overflow: visible;
}

/* Sticky-läge: admin slår på via inställningar (default AV).
   Dubbel-klass för högre specificitet än .em-website-header (position: relative). */
.em-website-header.em-website-header--sticky {
    position: sticky;
    top: 0;
}

.em-website-header .navbar-brand {
    color: var(--website-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ============================================================
   HEADER-LOGO — 4 stilval (admin väljer i /admin/hemsida/utseende)
   ============================================================ */

.em-website-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--website-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.em-website-brand img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.em-website-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.em-website-brand-text {
    line-height: 1.15;
}

/* ----- Stil 1: inline (default, säker för alla logo-former) ----- */
.em-website-header--logo-inline .em-website-brand-logo {
    width: auto;
    height: 44px;
}

.em-website-header--logo-inline .em-website-brand-logo img {
    height: 44px;
    width: auto;
}

/* ----- Stil 2: inline_large (~80px hög, header växer) ----- */
.em-website-header--logo-inline_large .em-website-brand-logo {
    width: auto;
    height: 76px;
}

.em-website-header--logo-inline_large .em-website-brand-logo img {
    height: 76px;
    width: auto;
}

.em-website-header--logo-inline_large .em-website-brand-text {
    font-size: 1.25rem;
}

/* ----- Stil 3: badge (cirkulär pop-out) ----- */
.em-website-header--logo-badge {
    /* Tillåt badge att hänga ut nedanför header-kanten */
    overflow: visible;
}

.em-website-header--logo-badge .em-website-brand {
    position: relative;
    padding-left: calc(var(--badge-size) * 1px + 2.5rem);
    min-height: 56px;
}

.em-website-header--logo-badge .em-website-brand-logo {
    position: absolute;
    left: 0;
    /* Badge-center på brand-bottom (≈ header-bottom). Mask-gradient på bg
       tonar ut översta delen så den blir osynlig mot vit header. */
    top: 100%;
    transform: translateY(-50%);
    width: calc(var(--badge-size) * 1px);
    height: calc(var(--badge-size) * 1px);
}

/* Vita cirkel-bakgrunden — mask-gradient tonar ut översta halvan mjukt
   så det inte syns nån hård linje någonstans, oavsett var header-kanten
   exakt går. Bakgrunden "uppstår" gradvis från transparent (osynlig mot
   vit header) till full vit (synlig som halv-cirkel mot mörk hero). */
.em-website-header--logo-badge .em-website-brand-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: white;
    -webkit-mask-image: linear-gradient(to bottom, transparent 35%, black 55%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 35%, black 55%, black 100%);
    filter:
        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.18))
        drop-shadow(0 14px 24px rgba(0, 0, 0, 0.10));
    z-index: 0;
}

.em-website-header--logo-badge .em-website-brand-logo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: var(--badge-logo-pad, 12%);
    box-sizing: border-box;
}


.em-website-header--logo-badge .em-website-brand:hover .em-website-brand-logo::before {
    filter:
        drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.4))
        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2))
        drop-shadow(0 14px 28px rgba(0, 0, 0, 0.24));
}

/* ----- Badge-form: oval & rundad ruta ----- */
/* Bredare ram så avlånga loggor fyller ytan istället för att bli små med
   massa tomrum i en cirkel. Bredden är 1.47× --badge-size (≈250px vid default
   170px) med aspect-ratio 25:16 för höjden. Sammansatta selektorer (2 klasser)
   ger högre specificitet än cirkelreglerna i media-queries nedan — se även
   duplikaten inne i ≤991px-media-queryn som säkerställer rätt tablet-storlek. */
.em-website-header--logo-badge.em-website-header--badgeshape-oval .em-website-brand,
.em-website-header--logo-badge.em-website-header--badgeshape-rounded .em-website-brand {
    padding-left: calc(var(--badge-size) * 1.47 * 1px + 2.5rem);
}

.em-website-header--logo-badge.em-website-header--badgeshape-oval .em-website-brand-logo,
.em-website-header--logo-badge.em-website-header--badgeshape-rounded .em-website-brand-logo {
    width: calc(var(--badge-size) * 1.47 * 1px);
    height: auto;
    padding: 0;
    aspect-ratio: 25 / 16;
}

/* Procent-padding skalar proportionellt med badgens bredd, så loggan fyller
   ramen lika bra oavsett storlek (inget tomrum kring loggan). */
.em-website-header--logo-badge.em-website-header--badgeshape-oval .em-website-brand-logo img,
.em-website-header--logo-badge.em-website-header--badgeshape-rounded .em-website-brand-logo img {
    padding: var(--badge-logo-pad, 10%);
}

/* Rundad ruta skiljer sig bara i hörnradie. */
.em-website-header--logo-badge.em-website-header--badgeshape-rounded .em-website-brand-logo::before {
    border-radius: clamp(14px, 2.4vw, 26px);
}

@media (max-width: 991px) {
    /* Tablet (768–991px): badge skalas till 75% av admin-inställt värde. */
    .em-website-header--logo-badge .em-website-brand {
        padding-left: calc(var(--badge-size) * 0.75 * 1px + 2rem);
        min-height: 52px;
    }

    /* Dubbla klasser för att slå ut de sammansatta oval/rounded-reglerna ovan. */
    .em-website-header--logo-badge.em-website-header--badgeshape-oval .em-website-brand,
    .em-website-header--logo-badge.em-website-header--badgeshape-rounded .em-website-brand {
        padding-left: calc(var(--badge-size) * 0.75 * 1.47 * 1px + 2rem);
    }

    .em-website-header--logo-badge .em-website-brand-logo {
        width: calc(var(--badge-size) * 0.75 * 1px);
        height: calc(var(--badge-size) * 0.75 * 1px);
    }

    .em-website-header--logo-badge.em-website-header--badgeshape-oval .em-website-brand-logo,
    .em-website-header--logo-badge.em-website-header--badgeshape-rounded .em-website-brand-logo {
        width: calc(var(--badge-size) * 0.75 * 1.47 * 1px);
        height: auto;
    }
}

/* === Badge-backdrop (alla sidor utom startsidan) ===
   Ger den hängande badge-logon ett visuellt underlag — precis som hero-bilden
   gör det på startsidan. Gradient primärfärg → vit skapar kontrasten som gör
   att den vita badge-cirkeln "poppar" mot bakgrunden (premiumkänsla).
   Höjden = badge-halva + lite marginal, skalar automatiskt med --badge-size. */
.em-website-badge-backdrop {
    /* Behåll höjden så det hängande emblemet får landningsutrymme och inte
       krockar med första sektionens innehåll — men gör bandet transparent.
       Emblemet "landar" då direkt på sidans vita yta med sin egen mjuka
       skugga (navy-gradienten borttagen på begäran 2026-05-30). */
    min-height: calc(var(--badge-size) * 0.5 * 1px + 0.75rem);
    background: transparent;
    width: 100%;
}

/* Första sektionen direkt efter backdropen ska inte ha full --website-section-py
   topp-padding — backdropen ger redan visuell luft för badge-overhanget. */
.em-website-badge-backdrop + .em-website-section {
    padding-top: 1.5rem;
}

/* === Badge-backdrop MED bakgrundsbild ===
   Bilden täcker hela strippan. Lagrat gradient: transparent → vit tonar
   ut bilden nedåt och ger badge-logon en naturlig landningsyta.
   Primärfärgens tint längs toppen knyter ihop bilden med headerens färg. */
.em-website-badge-backdrop--has-image {
    min-height: clamp(220px, 28vw, 360px);
    background:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--website-primary) 40%, transparent) 0%,
            transparent 40%,
            white 100%
        ),
        var(--backdrop-image, none) center / cover no-repeat;
}

/* === Badge: mobil (≤767px) — göm badge, visa föreningsnamnet ===
   Under Bootstrap md-breakpoint är den hängande badge för stor för smal
   layout. Gömmer logon + resetar brand-padding, visar texten istället.
   em-website-brand-text--badge-fallback är den text-span som renderas när
   hideTitle=true men logoStyle=badge (server-side i header.blade.php). */
.em-website-brand-text--badge-fallback {
    display: none; /* dold på desktop — badge syns */
}

@media (max-width: 767px) {
    .em-website-header--logo-badge .em-website-brand-logo {
        display: none;
    }

    .em-website-header--logo-badge .em-website-brand,
    .em-website-header--logo-badge.em-website-header--badgeshape-oval .em-website-brand,
    .em-website-header--logo-badge.em-website-header--badgeshape-rounded .em-website-brand {
        padding-left: 0.5rem !important;
        min-height: 0 !important;
    }

    .em-website-badge-backdrop {
        display: none; /* ingen backdrop när badge är gömd */
    }

    .em-website-brand-text--badge-fallback {
        display: inline; /* visa texten när badge är gömd */
    }
}

/* ----- Stil 4: stacked (logo centrerad på egen rad, nav under) ----- */
.em-website-header--logo-stacked .navbar {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

.em-website-header--logo-stacked .em-website-brand {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

.em-website-header--logo-stacked .em-website-brand-logo {
    height: 90px;
}

.em-website-header--logo-stacked .em-website-brand-logo img {
    height: 90px;
    width: auto;
}

.em-website-header--logo-stacked .em-website-brand-text {
    font-size: 1.35rem;
}

.em-website-header--logo-stacked .navbar-toggler {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.em-website-header--logo-stacked .navbar-collapse {
    width: 100%;
    display: flex !important;
    justify-content: center;
}

.em-website-header--logo-stacked .navbar-nav {
    /* Override Bootstrap's ms-auto för centrerad nav i två-rad-layouten */
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   MOBIL: utfälld meny måste kunna scrolla
   Headern kan köra position: sticky (admin-inställning). En utfälld
   navbar blev då högre än viewporten — uppmätt 1299px mot 812px — och
   eftersom sticky låser elementet vid top:0 gick underkanten aldrig att
   nå: dropdownens botten låg kvar på samma pixel oavsett scrollposition.
   Sista menyposten drabbades värst, vilket var kontomenyn. (2026-08-17)
   ============================================================ */
@media (max-width: 991.98px) {
    .em-website-header .navbar-collapse {
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 991px) {
    .em-website-header--logo-stacked .navbar-toggler {
        top: 0.75rem;
    }

    .em-website-header--logo-stacked .em-website-account-trigger {
        top: 0.75rem;
    }

    .em-website-header--logo-stacked .em-website-brand-logo {
        height: 64px;
    }

    .em-website-header--logo-stacked .em-website-brand-logo img {
        height: 64px;
    }
}

/* Hamburger-knappen: Bootstrap ritar en tjock fokus-box-shadow (i togglerns
   mörka färg) som blir kvar efter tryck på mobil och sticker ut mot högerkanten.
   Ta bort den för mus/touch men behåll en tydlig fokusmarkering vid
   tangentbordsnavigering (a11y). */
.em-website-header .navbar-toggler {
    border: 0;
    box-shadow: none;
    outline: 0;
}
.em-website-header .navbar-toggler:focus,
.em-website-header .navbar-toggler:active {
    box-shadow: none;
    outline: 0;
}
.em-website-header .navbar-toggler:focus-visible {
    outline: 2px solid var(--website-primary);
    outline-offset: 2px;
}

.em-website-header .nav-link {
    color: var(--website-text);
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.em-website-header .nav-link:hover {
    background: var(--website-primary-soft);
    color: var(--website-primary);
}

.em-website-header .nav-link.active {
    color: var(--website-primary);
    background: var(--website-primary-soft);
}

/* Aktiv undersida i dropdown — on-brand istället för Bootstraps blå default */
.em-website-header .dropdown-menu .dropdown-item.active,
.em-website-header .dropdown-menu .dropdown-item:active {
    background: var(--website-primary-soft);
    color: var(--website-primary);
}

.em-website-header .em-website-cta-pill {
    background: var(--website-primary);
    color: white !important;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.em-website-header .em-website-cta-pill:hover {
    background: var(--website-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(32, 41, 66, 0.25);
}

/* Badge på pill när inloggad — visar antal obetalda fakturor */
.em-website-cta-pill-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: #dc2626;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid white;
    line-height: 1;
}

/* Premium user-dropdown */
.em-website-user-menu {
    min-width: 240px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px -8px rgba(0,0,0,0.18);
    padding: 0.4rem 0;
}
.em-website-user-menu .dropdown-item {
    padding: 0.55rem 1rem;
    font-size: 0.92rem;
    color: var(--website-text);
    transition: background 0.12s ease;
}
.em-website-user-menu .dropdown-item:hover,
.em-website-user-menu .dropdown-item:focus {
    background: color-mix(in srgb, var(--website-primary) 8%, transparent);
    color: var(--website-primary);
}
.em-website-user-menu-header {
    border-radius: 12px 12px 0 0;
}

/* ============================================================
   KONTOMENY PÅ MOBIL — egen sheet utanför hamburgaren
   Identitet och kontoåtgärder är en annan axel än sidnavigering.
   Som sista nästlade dropdown i den utfällda menyn hamnade den i den
   onåbara zonen; som egen sheet når man den med ett tryck och den
   scrollar av sig själv. Samma mönster som "Mer" på Mina sidor, så
   modulen har ett mobilt menyspråk i stället för två. (2026-08-17)
   ============================================================ */
.em-website-account-trigger {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: 0.35rem;
    border: 0;
    border-radius: 999px;
    background: var(--website-primary);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.em-website-account-trigger-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #dc2626;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* Stacked-varianten absolutpositionerar hamburgaren — då måste kontoknappen
   följa med dit, annars hamnar de ovanpå varandra i övre högra hörnet. */
.em-website-header--logo-stacked .em-website-account-trigger {
    position: absolute;
    top: 1rem;
    right: 4.75rem;
    margin: 0;
}

.em-website-account-backdrop,
.em-website-account-sheet {
    display: none;
}

@media (max-width: 991.98px) {
    .em-website-account-trigger {
        display: inline-flex;
    }

    .em-website-account-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .em-website-account-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1091;
        max-height: 85dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        padding: 0 0.75rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    body.em-website-account-open { overflow: hidden; }
    body.em-website-account-open .em-website-account-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.em-website-account-open .em-website-account-sheet {
        transform: translateY(0);
    }

    .em-website-account-sheet-grip {
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: #d1d5db;
        margin: 10px auto 4px;
    }

    .em-website-account-sheet-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.25rem 0.4rem 0.5rem;
        background: #fff;
    }

    .em-website-account-sheet-title {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--website-text);
    }

    .em-website-account-sheet-close {
        border: 0;
        background: none;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        color: var(--website-text-muted);
        font-size: 1.1rem;
        cursor: pointer;
    }
    .em-website-account-sheet-close:hover,
    .em-website-account-sheet-close:focus-visible {
        background: var(--website-bg-soft);
        outline: none;
    }

    /* Rader delas med desktop-dropdownen, men får tryckvänliga mått här. */
    .em-website-account-sheet .dropdown-item {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 0.65rem 0.75rem;
        border-radius: 10px;
        font-size: 1rem;
        color: var(--website-text);
        text-decoration: none;
    }
    .em-website-account-sheet .dropdown-item:hover,
    .em-website-account-sheet .dropdown-item:focus {
        background: color-mix(in srgb, var(--website-primary) 8%, transparent);
        color: var(--website-primary);
    }
    .em-website-account-sheet .em-website-user-menu-header {
        padding: 0.25rem 0.75rem 0.6rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-website-account-backdrop,
    .em-website-account-sheet { transition: none; }
}

/* ============================================================
   MOBILMENY — stiliserad panel (≤991px = Bootstrap lg-breakpoint)

   Idé: headerens bakgrund byter till föreningens primärfärg när
   hamburger-menyn öppnas. Nav-länkarna får vit text och generösa
   tryckzoner (min ~52px). Dropdown-undermenyer öppnas inline med
   en mörk tintbakgrund. "Bli medlem"-pill inverteras till vit
   knapp mot den mörka bakgrunden.

   Bygger på :has() (stöds i alla moderna webbläsare sedan 2023).
   ============================================================ */

/* Mjuk övergång av headerns bakgrundsfärg vid öppning/stängning */
@media (max-width: 991px) {
    .em-website-header {
        transition: background 0.25s ease, border-color 0.2s ease;
    }
}

@media (max-width: 991px) {

    /* --- Header: primärfärg när menyn är synlig eller animeras --- */
    .em-website-header:has(#em-website-nav.show),
    .em-website-header:has(#em-website-nav.collapsing) {
        background: var(--website-primary) !important;
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    /* Brand: vit text mot primärbakgrund */
    .em-website-header:has(#em-website-nav.show) .em-website-brand,
    .em-website-header:has(#em-website-nav.collapsing) .em-website-brand {
        color: white;
    }

    /* Toggler-ikon: byt till vit hamburgare när menyn är öppen */
    .em-website-header:has(#em-website-nav.show) .navbar-toggler-icon,
    .em-website-header:has(#em-website-nav.collapsing) .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.88%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Nav-panel: separator-linje mot header-raden + lite luftrum i botten */
    .em-website-header .navbar-collapse.show,
    .em-website-header .navbar-collapse.collapsing {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        padding-bottom: 0.75rem;
    }

    /* Nav-länk: vit text, generösa tryckzoner, diskret avdelare mellan poster */
    .em-website-header .navbar-collapse .nav-link {
        color: rgba(255, 255, 255, 0.85);
        padding: 0.875rem 0.5rem;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 0;
    }

    .em-website-header .navbar-collapse .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-radius: 6px;
    }

    .em-website-header .navbar-collapse .nav-link:active {
        background: rgba(255, 255, 255, 0.16);
        color: white;
        border-radius: 6px;
    }

    /* Aktiv länk: tydligare vit med subtil bakgrundstint */
    .em-website-header .navbar-collapse .nav-link.active {
        color: white;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.13);
        border-radius: 6px;
    }

    /* Dropdown-caret: ljusare mot mörk bakgrund */
    .em-website-header .navbar-collapse .dropdown-toggle::after {
        border-top-color: rgba(255, 255, 255, 0.6);
    }

    /* Dropdown-undermeny: öppnas inline (Bootstrap mobile-beteende),
       mörkt tintad bakgrund för visuell hierarki */
    .em-website-header .navbar-collapse .dropdown-menu {
        position: static !important;
        transform: none !important;
        background: rgba(0, 0, 0, 0.22);
        border: none;
        border-radius: 8px;
        box-shadow: none;
        padding: 0.35rem 0;
        margin: 0.25rem 0 0.5rem;
    }

    .em-website-header .navbar-collapse .dropdown-item {
        color: rgba(255, 255, 255, 0.75);
        padding: 0.65rem 1.25rem;
        font-size: 0.95rem;
        border-radius: 4px;
        background: transparent;
    }

    .em-website-header .navbar-collapse .dropdown-item:hover,
    .em-website-header .navbar-collapse .dropdown-item:focus {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    /* Aktiv undersida på mobil — vit/fet mot mörk meny (matchar nav-link.active) */
    .em-website-header .navbar-collapse .dropdown-menu .dropdown-item.active {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        font-weight: 700;
    }

    .em-website-header .navbar-collapse .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.15);
    }

    /* "Bli medlem"-pill: inverteras till vit knapp mot mörk bakgrund */
    .em-website-header .navbar-collapse .em-website-cta-pill {
        display: block;
        text-align: center;
        margin: 0.75rem 0 0.25rem;
        padding: 0.825rem 1.25rem;
        border-radius: var(--website-radius);
        background: white !important;
        color: var(--website-primary) !important;
        font-weight: 700;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        border-bottom: none;
    }

    .em-website-header .navbar-collapse .em-website-cta-pill:hover {
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--website-primary) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        transform: translateY(-1px);
        border-radius: var(--website-radius);
    }
}

/* ============================================================
   STANDALONE-HEADER för Mina sidor (när webbmodulen är AV).
   Visuellt likt website-headern men utan publika meny-länkar.
   ============================================================ */
.em-mypages-header {
    background: white;
    border-bottom: 1px solid var(--website-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.em-mypages-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    min-height: 64px;
}
.em-mypages-header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--website-text);
    font-weight: 700;
    font-size: 1.1rem;
}
.em-mypages-header-brand:hover {
    color: var(--website-primary);
}
.em-mypages-header-logo {
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.em-mypages-header-name {
    line-height: 1.2;
}
@media (max-width: 576px) {
    .em-mypages-header-name { display: none; }
    .em-mypages-header-logo { height: 36px; }
}

/* Standalone-footer */
.em-mypages-footer {
    background: var(--website-bg-soft);
    border-top: 1px solid var(--website-border);
    padding: 1.5rem 0;
    margin-top: 3rem;
}
.em-mypages-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

/* ============================================================
   PREMIUM MINA SIDOR (när webbmodulen är aktiv)
   ============================================================ */
.em-website-mypages-shell {
    background: linear-gradient(180deg, color-mix(in srgb, var(--website-primary) 3%, transparent), transparent 240px);
    min-height: calc(100vh - 200px);
    padding-bottom: 3rem;
}

/* Sektion-header (sidnamn + ev. åtgärds-knappar) */
.em-website-mypages-pageheader {
    padding: 2.5rem 0 1.5rem;
}
.em-website-mypages-pageheader h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--website-text);
    margin: 0 0 0.25rem 0;
}
.em-website-mypages-pageheader p {
    color: var(--website-text-muted);
    margin: 0;
    font-size: 1rem;
}

/* Slim tab-bar — sticky under headern */
.em-website-mypages-tabs {
    background: white;
    border-bottom: 1px solid var(--website-border);
    position: sticky;
    top: var(--em-header-offset, 0px);
    z-index: 100;
    margin-bottom: 0;
}
.em-website-mypages-tabs-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.em-website-mypages-tabs-inner {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}
.em-website-mypages-tabs-inner::-webkit-scrollbar { display: none; }
/* Badge-logo överlappar normalt headern och sticker ner — flytta tab-baren
   åt höger så första tab:n inte hamnar bakom loggan. */
body:has(.em-website-header--logo-badge) .em-website-mypages-tabs-inner {
    padding-left: 11rem;
}
@media (max-width: 768px) {
    body:has(.em-website-header--logo-badge) .em-website-mypages-tabs-inner {
        padding-left: 1rem;
    }
}
.em-website-mypages-tabs-inner::-webkit-scrollbar { display: none; }
.em-website-mypages-tab {
    padding: 1rem 1.25rem;
    color: var(--website-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.em-website-mypages-tab:hover {
    color: var(--website-text);
    text-decoration: none;
}
.em-website-mypages-tab.is-active {
    color: var(--website-primary);
    border-bottom-color: var(--website-primary);
    font-weight: 700;
}
.em-website-mypages-tab .em-website-mypages-tab-badge {
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mer-dropdown — ligger som syskon till .tabs-inner (utanför overflow:auto)
   så menyn renderas korrekt utan att klippas. */
.em-website-mypages-tab-more {
    position: relative;
    flex-shrink: 0;
}
.em-website-mypages-tab-more-menu.dropdown-menu {
    border: 1px solid var(--website-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,0.15);
    padding: 0.4rem 0;
    min-width: 220px;
    margin-top: 0.25rem;
}
.em-website-mypages-tab-more-menu .dropdown-item {
    padding: 0.55rem 1rem;
    color: var(--website-text);
    font-size: 0.92rem;
}
.em-website-mypages-tab-more-menu .dropdown-item:hover,
.em-website-mypages-tab-more-menu .dropdown-item:focus {
    background: color-mix(in srgb, var(--website-primary) 8%, transparent);
    color: var(--website-primary);
}

/* Premium sidebar-layout: vänster sidebar + content till höger.
   Den yttre shell:n behåller webbsidans max-width men innehållet får ett
   grid där sidebaren är fast 240px och content tar resterande utrymme. */
.em-website-mypages-shell-grid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1rem 1rem 0;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 992px) {
    .em-website-mypages-shell-grid {
        /* minmax(0, 1fr) — INTE bara '1fr'. Bart '1fr' = minmax(auto, 1fr),
           vars auto-minimum är kolumnens min-content-bredd. Ett brett barn
           (aviserings-tabellen, Google Wallet-knappen m.m.) tvingar då hela
           content-kolumnen bredare än skärmen → korten klipps i högerkant
           (body har overflow-x: clip). minmax(0, ...) låter kolumnen krympa
           så inre scroll-containrar/max-width:100% håller sig innanför. */
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}

/* Badge-logo sticker ned ca 85px under headern och täcker sidebaren —
   tryck endast ner sidebaren (inte content) så h1/hero får natural top.
   Sticky-top höjs så sidebaren stannar under badge:n vid scroll. */
@media (min-width: 993px) {
    body:has(.em-website-header--logo-badge) .em-mypages-sidebar-wrapper {
        margin-top: 105px;
    }
    body:has(.em-website-header--logo-badge) .em-mypages-sidebar {
        top: 170px;
    }
}

/* Mobile: badge är mindre men sticker ändå ner och täcker Navigation-knappen.
   Knuffa ner toggle-knappen så badge får luft. */
@media (max-width: 992px) {
    body:has(.em-website-header--logo-badge) .em-mypages-sidebar-mobile-toggle {
        margin-top: 60px;
    }
}

/* Sidebar-wrapper — desktop visar alltid sidebaren, mobil använder toggle */
.em-mypages-sidebar-mobile-toggle {
    display: none; /* dold på desktop */
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 12px;
    padding: 0.85rem 1.15rem;
    font-weight: 600;
    color: var(--website-text);
    cursor: pointer;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.em-mypages-sidebar-mobile-chev {
    transition: transform 0.2s ease;
}

@media (max-width: 992px) {
    .em-mypages-sidebar-mobile-toggle {
        display: flex;
    }
    /* På mobil: sidebar dold tills wrappern har is-open */
    .em-mypages-sidebar-wrapper .em-mypages-sidebar {
        display: none;
        margin-top: 0.5rem;
    }
    .em-mypages-sidebar-wrapper.is-open .em-mypages-sidebar {
        display: block;
    }
    .em-mypages-sidebar-wrapper.is-open .em-mypages-sidebar-mobile-chev {
        transform: rotate(180deg);
    }
}

.em-mypages-sidebar {
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 14px;
    padding: 0.85rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: sticky;
    top: 80px;
}
@media (max-width: 992px) {
    .em-mypages-sidebar {
        position: static;
        border: none;
        border-top: 1px solid var(--website-border);
        border-radius: 0;
        box-shadow: none;
        padding: 0.65rem 0.5rem;
    }
}

.em-mypages-sidebar-group {
    margin-bottom: 0.85rem;
}
.em-mypages-sidebar-group:last-child { margin-bottom: 0; }

.em-mypages-sidebar-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--website-text-muted);
    padding: 0.5rem 0.85rem 0.35rem;
    margin: 0;
}

.em-mypages-sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.em-mypages-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    color: var(--website-text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.em-mypages-sidebar-link:hover {
    background: var(--website-bg-soft);
    color: var(--website-text);
    text-decoration: none;
}
.em-mypages-sidebar-link i {
    width: 18px;
    color: var(--website-text-muted);
    font-size: 0.95rem;
    text-align: center;
    flex-shrink: 0;
}
.em-mypages-sidebar-link.is-active {
    background: color-mix(in srgb, var(--website-primary) 10%, white);
    color: var(--website-primary);
    font-weight: 700;
}
.em-mypages-sidebar-link.is-active i {
    color: var(--website-primary);
}
.em-mypages-sidebar-link > span:first-of-type {
    flex: 1;
    min-width: 0;
}
.em-mypages-sidebar-badge {
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Undernavigering för Profil-gruppen (Personuppgifter/Säkerhet/Profilbild) */
.em-mypages-profiletabs {
    display: inline-flex;
    gap: 4px;
    background: var(--website-bg-soft);
    border: 1px solid var(--website-border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.5rem;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.em-mypages-profiletabs::-webkit-scrollbar { display: none; }

.em-mypages-profiletab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9px;
    color: var(--website-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.em-mypages-profiletab i {
    font-size: 0.85rem;
}
.em-mypages-profiletab:hover {
    color: var(--website-text);
    text-decoration: none;
}
.em-mypages-profiletab.is-active {
    background: white;
    color: var(--website-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

@media (max-width: 576px) {
    .em-mypages-profiletabs {
        display: flex;
    }
    .em-mypages-profiletab {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.4rem;
        font-size: 0.85rem;
    }
    /* Ikonerna ryker på små skärmar så alla tre flikar får plats utan scroll */
    .em-mypages-profiletab i {
        display: none;
    }
}

/* Content-kolumnen (höger om sidebar) */
.em-website-mypages-shell-grid .em-website-mypages-pageheader {
    padding: 1.25rem 0 1.5rem;
    max-width: 100%;
}
.em-website-mypages-shell-grid .em-website-mypages-pageheader.container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

/* Container för all mypages-content i premium-läge — begränsad bredd så
   content inte sträcker över hela skärmen (premium = inramat, inte fullbleed). */
.em-website-mypages-content {
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 1rem 0;
}
.em-website-mypages-shell-grid .em-website-mypages-content {
    max-width: 100%;
    padding: 0;
}
.em-website-mypages-content .content,
.em-website-mypages-content .content-narrow,
.em-website-mypages-content .content-boxed {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
/* Pageheader matchar samma max-width för konsekvent vänsterkant */
.em-website-mypages-shell .em-website-mypages-pageheader.container {
    max-width: 1140px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Kort i mypages — matchar website-stil */
.em-website-mypages-content .card {
    border-radius: 12px;
    border: 1px solid var(--website-border);
    box-shadow: 0 4px 12px -6px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .em-website-mypages-pageheader { padding: 1.5rem 0 1rem; }
    .em-website-mypages-pageheader h1 { font-size: 1.5rem; }
    /* 60px-overstyrningen borttagen 2026-08-19: --em-header-offset foljer
       headerns faktiska hojd aven pa mobil. */
    .em-website-mypages-tab { padding: 0.75rem 0.9rem; font-size: 0.875rem; }
}


/* ============================================================
   MINA SIDOR — PREMIUM ÖVERSIKT-SIDA (welcome/index.blade.php)
   Använder webbmodulens designspråk genomgående. Alla sektioner
   och komponenter har egna em-mypages-*-klasser så vi slipper
   konflikter med mypages-v2.css.
   ============================================================ */

/* ----- HERO / Hello-kort ----- */
.em-mypages-hello {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--website-primary) 12%, white),
        color-mix(in srgb, var(--website-primary) 4%, white));
    border: 1px solid color-mix(in srgb, var(--website-primary) 20%, var(--website-border));
    border-radius: 16px;
    padding: 2.25rem 2rem;
    margin-bottom: 1.75rem;
    position: relative;
    overflow: hidden;
}
.em-mypages-hello::before {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 360px; height: 360px;
    background: radial-gradient(circle, color-mix(in srgb, var(--website-primary) 15%, transparent), transparent 70%);
    pointer-events: none;
}
.em-mypages-hello-content {
    position: relative;
    z-index: 1;
}
.em-mypages-hello-greeting {
    font-size: 2rem;
    font-weight: 800;
    color: var(--website-text);
    margin: 0 0 0.85rem 0;
    letter-spacing: -0.01em;
}
.em-mypages-hello-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    color: var(--website-text-muted);
}
.em-mypages-hello-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.em-mypages-hello-meta-item i {
    color: var(--website-primary);
    opacity: 0.75;
}

/* Status-badge med dot */
.em-mypages-hello-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: white;
    border: 1px solid var(--website-border);
}
.em-mypages-hello-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #94a3b8;
}
.em-mypages-hello-status--active {
    background: color-mix(in srgb, #10b981 12%, white);
    border-color: color-mix(in srgb, #10b981 35%, transparent);
    color: #047857;
}
.em-mypages-hello-status--active .em-mypages-hello-status-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 30%, transparent);
}
.em-mypages-hello-status--inactive,
.em-mypages-hello-status--cancelled {
    background: color-mix(in srgb, #ef4444 12%, white);
    border-color: color-mix(in srgb, #ef4444 35%, transparent);
    color: #b91c1c;
}
.em-mypages-hello-status--inactive .em-mypages-hello-status-dot,
.em-mypages-hello-status--cancelled .em-mypages-hello-status-dot {
    background: #ef4444;
}
.em-mypages-hello-status--pending {
    background: color-mix(in srgb, #f59e0b 14%, white);
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
    color: #b45309;
}
.em-mypages-hello-status--pending .em-mypages-hello-status-dot {
    background: #f59e0b;
}

/* Facts-grid (Medlemsnr, Region, Aktivt t.o.m. osv) */
.em-mypages-hello-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0 0 1rem 0;
}
.em-mypages-hello-fact { margin: 0; }
.em-mypages-hello-fact dt {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--website-text-muted);
    margin-bottom: 0.1rem;
}
.em-mypages-hello-fact dd {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--website-text);
    margin: 0;
}
.em-mypages-hello-counts {
    font-size: 0.88rem;
    color: var(--website-text-muted);
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--website-primary) 12%, transparent);
}
.em-mypages-hello-counts strong { color: var(--website-text); }

@media (max-width: 576px) {
    .em-mypages-hello { padding: 1.5rem 1.25rem; }
    .em-mypages-hello-greeting { font-size: 1.5rem; }
}

/* ----- ACTION-BANNER (obetald avisering, omröstning, aktivera medlemskap) -----
   Hette em-mypages-action fram till 2026-08-20. Namnet krockade med
   pillerknappen med samma namn i mypages-v2.css (sidhuvudets åtgärdsknapp),
   och eftersom mypages-v2.css laddas EFTER website.css i mypages-layouten vann
   pillret: bannern på Översikt renderades som en inline-flex-pill med
   0.5rem padding och border-radius 999px i stället för som ett kort. Byt inte
   tillbaka — de två komponenterna måste ha skilda namn. */
.em-mypages-banner {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 1.15rem 1.4rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    background: white;
    border: 1px solid var(--website-border);
    border-left: 4px solid var(--website-text-muted);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.em-mypages-banner-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--website-bg-soft);
    color: var(--website-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.em-mypages-banner-body {
    flex: 1;
    min-width: 0;
}
.em-mypages-banner-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--website-text);
    margin-bottom: 0.15rem;
}
.em-mypages-banner-text {
    font-size: 0.88rem;
    color: var(--website-text-muted);
    margin: 0;
    line-height: 1.45;
}
.em-mypages-banner-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform 0.15s ease;
    white-space: nowrap;
}
.em-mypages-banner-cta:hover { transform: translateY(-1px); text-decoration: none; }

/* Action-varianter */
.em-mypages-banner--warning {
    border-left-color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 4%, white);
}
.em-mypages-banner--warning .em-mypages-banner-icon {
    background: color-mix(in srgb, #f59e0b 15%, white);
    color: #b45309;
}
.em-mypages-banner-cta--warning {
    background: #f59e0b;
    color: white;
}
.em-mypages-banner-cta--warning:hover { background: #d97706; color: white; }

.em-mypages-banner--primary {
    border-left-color: var(--website-primary);
    background: color-mix(in srgb, var(--website-primary) 4%, white);
}
.em-mypages-banner--primary .em-mypages-banner-icon {
    background: color-mix(in srgb, var(--website-primary) 12%, white);
    color: var(--website-primary);
}
.em-mypages-banner-cta--primary {
    background: var(--website-primary);
    color: white;
}
.em-mypages-banner-cta--primary:hover { background: color-mix(in srgb, var(--website-primary) 85%, black); color: white; }

.em-mypages-banner--success {
    border-left-color: #10b981;
    background: color-mix(in srgb, #10b981 5%, white);
}
.em-mypages-banner--success .em-mypages-banner-icon {
    background: color-mix(in srgb, #10b981 14%, white);
    color: #047857;
}
.em-mypages-banner-cta--success {
    background: #10b981;
    color: white;
}
.em-mypages-banner-cta--success:hover { background: #059669; color: white; }

.em-mypages-banner--accent {
    border-left-color: #8b5cf6;
    background: color-mix(in srgb, #8b5cf6 4%, white);
}
.em-mypages-banner--accent .em-mypages-banner-icon {
    background: color-mix(in srgb, #8b5cf6 14%, white);
    color: #6d28d9;
}
.em-mypages-banner-cta--accent {
    background: #8b5cf6;
    color: white;
}
.em-mypages-banner-cta--accent:hover { background: #7c3aed; color: white; }

@media (max-width: 576px) {
    .em-mypages-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .em-mypages-banner-cta { width: 100%; justify-content: center; }
}

/* ----- QUICK-ACCESS GRID ----- */
.em-mypages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.em-mypages-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.5rem 1.35rem 1.4rem;
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--website-text);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}
.em-mypages-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    transition: background 0.2s ease;
}
.em-mypages-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(0,0,0,0.15);
    border-color: color-mix(in srgb, var(--website-primary) 30%, var(--website-border));
    color: var(--website-text);
    text-decoration: none;
}
.em-mypages-card:hover::before {
    background: var(--website-primary);
}
.em-mypages-card-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--website-primary) 10%, white);
    color: var(--website-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
    transition: background 0.2s ease;
}
.em-mypages-card:hover .em-mypages-card-icon {
    background: var(--website-primary);
    color: white;
}
.em-mypages-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--website-text);
}
.em-mypages-card-subtitle {
    font-size: 0.85rem;
    color: var(--website-text-muted);
}
.em-mypages-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.em-mypages-card-badge--neutral {
    background: var(--website-bg-soft);
    color: var(--website-text-muted);
    border: 1px solid var(--website-border);
}

/* Kort-varianter */
.em-mypages-card--alert::before { background: #dc2626; }
.em-mypages-card--alert:hover::before { background: #b91c1c; }
.em-mypages-card--accent .em-mypages-card-icon {
    background: color-mix(in srgb, #8b5cf6 14%, white);
    color: #6d28d9;
}
.em-mypages-card--accent:hover .em-mypages-card-icon {
    background: #8b5cf6;
    color: white;
}

/* ----- SECTION (Kommande aktiviteter, Senaste nytt osv) ----- */
.em-mypages-section {
    margin-bottom: 2.5rem;
}
.em-mypages-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.em-mypages-section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--website-text);
    margin: 0;
    letter-spacing: -0.005em;
}
.em-mypages-section-link {
    color: var(--website-primary);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.em-mypages-section-link:hover {
    opacity: 0.75;
    color: var(--website-primary);
    text-decoration: none;
}
.em-mypages-section-link--center {
    display: block;
    text-align: center;
    margin-top: 0.85rem;
}

/* ----- AKTIVITETSLISTA ----- */
.em-mypages-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.em-mypages-activity-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--website-text);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.em-mypages-activity-item:hover {
    transform: translateX(2px);
    border-color: color-mix(in srgb, var(--website-primary) 30%, var(--website-border));
    box-shadow: 0 4px 12px -6px rgba(0,0,0,0.08);
    text-decoration: none;
    color: var(--website-text);
}
.em-mypages-activity-date {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--website-primary) 8%, white);
    border-radius: 10px;
    color: var(--website-primary);
}
.em-mypages-activity-day {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}
.em-mypages-activity-month {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-top: 0.15rem;
}
.em-mypages-activity-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.em-mypages-activity-name {
    font-weight: 700;
    color: var(--website-text);
    font-size: 1rem;
}
.em-mypages-activity-region {
    font-size: 0.82rem;
    color: var(--website-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.em-mypages-activity-region i {
    color: var(--website-primary);
    opacity: 0.75;
    font-size: 0.75rem;
}
.em-mypages-activity-arrow {
    flex-shrink: 0;
    color: var(--website-text-muted);
    font-size: 0.85rem;
    transition: transform 0.15s ease, color 0.15s ease;
}
.em-mypages-activity-item:hover .em-mypages-activity-arrow {
    color: var(--website-primary);
    transform: translateX(2px);
}

/* ----- MAGAZINE-CARD (Senaste tidningen) ----- */
.em-mypages-magazine {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--website-text);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    margin-bottom: 0.85rem;
}
.em-mypages-magazine:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px rgba(0,0,0,0.15);
    text-decoration: none;
    color: var(--website-text);
}
.em-mypages-magazine-cover {
    width: 120px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--website-bg-soft);
}
.em-mypages-magazine-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--website-primary) 50%, var(--website-text-muted));
    font-size: 1.85rem;
}
.em-mypages-magazine-body {
    flex: 1;
    padding: 1.15rem 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}
.em-mypages-magazine-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--website-primary);
}
.em-mypages-magazine-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--website-text);
}
.em-mypages-magazine-date {
    font-size: 0.85rem;
    color: var(--website-text-muted);
}
.em-mypages-magazine-icon {
    align-self: center;
    padding-right: 1.5rem;
    color: var(--website-text-muted);
    transition: color 0.15s ease, transform 0.15s ease;
}
.em-mypages-magazine:hover .em-mypages-magazine-icon {
    color: var(--website-primary);
    transform: translate(2px, -2px);
}
@media (max-width: 576px) {
    .em-mypages-magazine-cover { width: 90px; }
    .em-mypages-magazine-body { padding: 0.85rem 1rem; }
    .em-mypages-magazine-icon { display: none; }
}

/* ----- NEWSLETTER-LISTA ----- */
.em-mypages-newsletter-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.em-mypages-newsletter-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 10px;
}
.em-mypages-newsletter-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--website-bg-soft);
    color: var(--website-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.em-mypages-newsletter-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.em-mypages-newsletter-title {
    font-weight: 600;
    color: var(--website-text);
    font-size: 0.93rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.em-mypages-newsletter-meta {
    font-size: 0.78rem;
    color: var(--website-text-muted);
}
.em-mypages-newsletter-read {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--website-border);
    color: var(--website-text);
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.em-mypages-newsletter-read:hover {
    background: color-mix(in srgb, var(--website-primary) 8%, white);
    border-color: var(--website-primary);
    color: var(--website-primary);
}

/* ----- NUDGES (Kom igång-checklist) ----- */
.em-mypages-nudges {
    background: linear-gradient(135deg, color-mix(in srgb, var(--website-primary) 6%, white), white);
    border: 1px solid color-mix(in srgb, var(--website-primary) 18%, var(--website-border));
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
}
.em-mypages-nudges-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0 0 1rem 0;
}
.em-mypages-nudges-title i {
    color: var(--website-primary);
}
.em-mypages-nudges-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.em-mypages-nudge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--website-text);
    transition: border-color 0.15s ease;
}
.em-mypages-nudge:hover {
    border-color: var(--website-primary);
    text-decoration: none;
    color: var(--website-text);
}
.em-mypages-nudge-check {
    color: var(--website-text-muted);
    font-size: 1.1rem;
}
.em-mypages-nudge:hover .em-mypages-nudge-check {
    color: var(--website-primary);
}
.em-mypages-nudge-text {
    flex: 1;
    font-weight: 500;
    font-size: 0.93rem;
}
.em-mypages-nudge-arrow {
    color: var(--website-text-muted);
    font-size: 0.85rem;
    transition: transform 0.15s ease, color 0.15s ease;
}
.em-mypages-nudge:hover .em-mypages-nudge-arrow {
    color: var(--website-primary);
    transform: translateX(2px);
}

/* ----- KONTAKT-CTA ----- */
.em-mypages-contact {
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 14px;
    padding: 1.75rem 1.75rem;
    margin-bottom: 1rem;
}
.em-mypages-contact-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--website-border);
}
.em-mypages-contact-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--website-primary) 10%, white);
    color: var(--website-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.em-mypages-contact-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0 0 0.15rem 0;
}
.em-mypages-contact-subtitle {
    font-size: 0.88rem;
    color: var(--website-text-muted);
    margin: 0;
}
.em-mypages-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.65rem;
}
.em-mypages-contact-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background: var(--website-bg-soft);
    border-radius: 10px;
    text-decoration: none;
    color: var(--website-text);
    font-size: 0.92rem;
    transition: background 0.15s ease;
}
.em-mypages-contact-item:hover {
    background: color-mix(in srgb, var(--website-primary) 10%, white);
    color: var(--website-primary);
    text-decoration: none;
}
.em-mypages-contact-item i {
    color: var(--website-primary);
    opacity: 0.85;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ============================================================
   MINA SIDOR — PREMIUM FORMULÄR
   Återanvänds för Profil, Säkerhet, Familj, Fordon-edit osv.
   ============================================================ */

/* Layout: form-area (8/12) + sidebar (4/12) */
.em-mypages-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 1.5rem;
}
@media (max-width: 992px) {
    .em-mypages-form-layout { grid-template-columns: 1fr; }
}

/* Huvudkort */
.em-mypages-form-card {
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 16px;
    padding: 2rem 2.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
@media (max-width: 576px) {
    .em-mypages-form-card { padding: 1.25rem 1.25rem; border-radius: 12px; }
}

/* Formulärsektioner inom kortet */
.em-mypages-form-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--website-border);
}
.em-mypages-form-section:first-of-type { padding-top: 0.25rem; }
.em-mypages-form-section:last-of-type { border-bottom: none; padding-bottom: 1rem; }

.em-mypages-form-section-header {
    margin-bottom: 1.25rem;
}
.em-mypages-form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0 0 0.25rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.em-mypages-form-section-title i {
    color: var(--website-primary);
    opacity: 0.85;
    font-size: 0.95rem;
}
.em-mypages-form-section-desc {
    font-size: 0.875rem;
    color: var(--website-text-muted);
    margin: 0;
}

/* Form rows: 2 kolumns på desktop, 1 på mobil */
.em-mypages-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 576px) {
    .em-mypages-form-row { grid-template-columns: 1fr; }
}

/* Form group */
.em-mypages-form-group {
    margin-bottom: 1rem;
}
.em-mypages-form-group:last-child { margin-bottom: 0; }
.em-mypages-form-group .form-label {
    font-weight: 600;
    color: var(--website-text);
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}
.em-mypages-form-help {
    font-size: 0.825rem;
    color: var(--website-text-muted);
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* Inputs */
.em-mypages-form-card .form-control,
.em-mypages-form-card .form-select {
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--website-border);
    background-color: white;
    color: var(--website-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.em-mypages-form-card .form-control:focus,
.em-mypages-form-card .form-select:focus {
    border-color: var(--website-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--website-primary) 15%, transparent);
    outline: none;
}
.em-mypages-form-card .form-control.is-invalid,
.em-mypages-form-card .form-select.is-invalid {
    border-color: #ef4444;
}
.em-mypages-form-card .form-control:disabled,
.em-mypages-form-card .form-select:disabled {
    background-color: var(--website-bg-soft);
    color: var(--website-text-muted);
    cursor: not-allowed;
}

/* Radio-pill-grupp (Ja/Nej val osv) */
.em-mypages-form-radios {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.em-mypages-form-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--website-border);
    border-radius: 999px;
    background: white;
    color: var(--website-text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
}
.em-mypages-form-radio:hover {
    border-color: color-mix(in srgb, var(--website-primary) 50%, var(--website-border));
    color: var(--website-text);
}
.em-mypages-form-radio input[type="radio"] {
    width: 14px;
    height: 14px;
    accent-color: var(--website-primary);
    margin: 0;
}
.em-mypages-form-radio:has(input[type="radio"]:checked) {
    border-color: var(--website-primary);
    background: color-mix(in srgb, var(--website-primary) 8%, white);
    color: var(--website-primary);
    font-weight: 600;
}

/* Footer med spara-knappar */
.em-mypages-form-footer {
    padding-top: 1.25rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--website-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Knappar */
.em-mypages-form-btn {
    padding: 0.7rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.15s ease;
    line-height: 1.2;
}
.em-mypages-form-btn--primary {
    background: var(--website-primary);
    color: white;
    border-color: var(--website-primary);
}
.em-mypages-form-btn--primary:hover {
    background: color-mix(in srgb, var(--website-primary) 85%, black);
    border-color: color-mix(in srgb, var(--website-primary) 85%, black);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--website-primary) 40%, transparent);
}
.em-mypages-form-btn--ghost {
    background: transparent;
    color: var(--website-text-muted);
    border-color: var(--website-border);
}
.em-mypages-form-btn--ghost:hover {
    background: var(--website-bg-soft);
    color: var(--website-text);
    border-color: color-mix(in srgb, var(--website-text-muted) 30%, var(--website-border));
}
.em-mypages-form-btn--sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

/* ----- SIDOKORT (lokal klubb, språk) ----- */
.em-mypages-form-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.em-mypages-sidecard {
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.em-mypages-sidecard-header {
    padding: 1.15rem 1.35rem 0.85rem;
    border-bottom: 1px solid var(--website-border);
}
.em-mypages-sidecard-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.em-mypages-sidecard-title i {
    color: var(--website-primary);
    opacity: 0.85;
}
.em-mypages-sidecard-body {
    padding: 1.15rem 1.35rem;
}
.em-mypages-sidecard-footer {
    padding: 0 1.35rem 1.15rem;
}

/* Local-clubs-tabell */
.em-mypages-localclubs-table {
    width: 100%;
    margin: 0;
    font-size: 0.92rem;
}
.em-mypages-localclubs-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--website-text-muted);
    font-weight: 700;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--website-border);
}
.em-mypages-localclubs-table td {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--website-bg-soft);
    color: var(--website-text);
    vertical-align: middle;
}
.em-mypages-localclubs-table tr:last-child td { border-bottom: none; }

.em-mypages-sidecard-iconbtn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--website-border);
    color: var(--website-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.em-mypages-sidecard-iconbtn:hover {
    background: color-mix(in srgb, #ef4444 8%, white);
    border-color: #fca5a5;
    color: #b91c1c;
}

/* Språkval i sidokort */
.em-mypages-language-current {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--website-primary) 6%, white);
    border-radius: 10px;
    margin-bottom: 0.85rem;
}
.em-mypages-language-current-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--website-text-muted);
    font-weight: 700;
}
.em-mypages-language-current strong {
    color: var(--website-primary);
    font-size: 0.95rem;
}
.em-mypages-language-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.em-mypages-language-flag {
    display: inline-flex;
    padding: 0.4rem;
    border-radius: 8px;
    border: 1px solid var(--website-border);
    background: white;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.em-mypages-language-flag:hover {
    border-color: var(--website-primary);
    transform: translateY(-2px);
}

/* ============================================================
   MINA SIDOR — GEMENSAMMA LIST- & PANEL-KOMPONENTER
   Återanvänds över alla index-sidor (aviseringar, familj,
   aktiviteter, fordon, prenumerationer, medlemskap osv).
   ============================================================ */

/* Page-intro (kort intro-text under pagename) */
.em-mypages-intro {
    color: var(--website-text-muted);
    font-size: 1rem;
    max-width: 720px;
    margin: -0.25rem 0 2rem;
    line-height: 1.55;
}

/* Generell panel — vit, rundad, med subtle shadow */
.em-mypages-panel {
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.em-mypages-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--website-border);
    background: white;
}
.em-mypages-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0;
}
.em-mypages-panel-title i {
    color: var(--website-primary);
    opacity: 0.85;
}
.em-mypages-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--website-bg-soft);
    color: var(--website-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.45rem;
}
.em-mypages-panel-count--alert { background: #fee2e2; color: #b91c1c; }
.em-mypages-panel-count--success { background: #d1fae5; color: #047857; }
.em-mypages-panel-count--warning { background: #fef3c7; color: #b45309; }
.em-mypages-panel-body {
    padding: 1.15rem 1.5rem;
}
.em-mypages-panel-body--flush { padding: 0; }

/* Status-fakta (dt/dd) på vit panel — em-mypages-hello-facts är bara för mörk hero */
.em-mypages-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 2rem;
    margin: 0;
}
.em-mypages-fact dt {
    font-size: 0.8rem;
    color: var(--website-text-muted);
    margin: 0 0 0.2rem;
}
.em-mypages-fact dd {
    font-size: 1rem;
    font-weight: 600;
    color: var(--website-text);
    margin: 0;
}

/* Avgiftssammanställning ("Din nästa avisering") — ersätter den gamla
   randiga Bootstrap-tabellen med en ren rad-för-rad-lista. */
.em-mypages-fee {
    display: flex;
    flex-direction: column;
}
.em-mypages-fee-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--website-text-muted);
    font-weight: 700;
    margin-top: 1rem;
    padding-bottom: 0.3rem;
}
.em-mypages-fee-label:first-child { margin-top: 0; }
.em-mypages-fee-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--website-bg-soft);
    color: var(--website-text);
}
.em-mypages-fee-row--muted { color: var(--website-text-muted); }
.em-mypages-fee-amount {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.em-mypages-fee-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 0.6rem;
    padding-top: 0.9rem;
    border-top: 2px solid var(--website-border);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--website-text);
}
@media (max-width: 576px) {
    .em-mypages-panel-header, .em-mypages-panel-body { padding-left: 1.15rem; padding-right: 1.15rem; }
}

/* Lista av items — generell pattern */
.em-mypages-list {
    display: flex;
    flex-direction: column;
}
.em-mypages-list-item {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--website-bg-soft);
    transition: background 0.15s ease;
}
.em-mypages-list-item:last-child { border-bottom: none; }
.em-mypages-list-item:hover { background: var(--website-bg-soft); }
.em-mypages-list-item--clickable { cursor: pointer; text-decoration: none; color: var(--website-text); }
.em-mypages-list-item--clickable:hover { text-decoration: none; color: var(--website-text); }
.em-mypages-list-item--muted { opacity: 0.75; }
@media (max-width: 576px) {
    .em-mypages-list-item { padding: 1rem 1.15rem; gap: 0.85rem; flex-wrap: wrap; }
}

/* Ikon i list-item */
.em-mypages-list-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--website-primary) 10%, white);
    color: var(--website-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.em-mypages-list-icon--success { background: color-mix(in srgb, #10b981 14%, white); color: #047857; }
.em-mypages-list-icon--warning { background: color-mix(in srgb, #f59e0b 14%, white); color: #b45309; }
.em-mypages-list-icon--danger { background: color-mix(in srgb, #ef4444 14%, white); color: #b91c1c; }
.em-mypages-list-icon--neutral { background: var(--website-bg-soft); color: var(--website-text-muted); }

/* Content (titel, meta, beskrivning) */
.em-mypages-list-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.em-mypages-list-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--website-text);
    font-size: 1rem;
    line-height: 1.3;
}
.em-mypages-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: var(--website-text-muted);
    font-size: 0.83rem;
    line-height: 1.4;
}
.em-mypages-list-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.em-mypages-list-meta-item i {
    opacity: 0.7;
    font-size: 0.75rem;
}

/* Actions (knappar till höger i list-item) */
.em-mypages-list-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .em-mypages-list-actions {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .em-mypages-list-actions .em-mypages-form-btn { flex: 1; min-width: 0; }
}

/* Prenumerationsknapparna ligger i var sitt formulär (avsikten skickas som ett
   dolt fält). Formuläret måste därför ärva knappens plats i åtgärdskolumnen —
   annars är det formuläret som blir flex-barn och mobilens fullbreddsknapp
   krymper till innehållsbredd. */
.em-mypages-list-actions .em-newsletter-form {
    display: flex;
    min-width: 0;
}
.em-mypages-list-actions .em-newsletter-form > .em-mypages-form-btn {
    width: 100%;
}
@media (max-width: 576px) {
    .em-mypages-list-actions .em-newsletter-form { flex: 1; }
}

/* Status-badge (i list-title) */
.em-mypages-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.em-mypages-status-badge--success { background: color-mix(in srgb, #10b981 14%, white); color: #047857; }
.em-mypages-status-badge--warning { background: color-mix(in srgb, #f59e0b 14%, white); color: #b45309; }
.em-mypages-status-badge--danger { background: color-mix(in srgb, #ef4444 14%, white); color: #b91c1c; }
.em-mypages-status-badge--info { background: color-mix(in srgb, #3b82f6 14%, white); color: #1d4ed8; }
.em-mypages-status-badge--neutral { background: var(--website-bg-soft); color: var(--website-text-muted); }

/* Tom-state */
.em-mypages-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--website-text-muted);
}
.em-mypages-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--website-bg-soft);
    color: var(--website-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    opacity: 0.7;
}
.em-mypages-empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0 0 0.4rem 0;
}
.em-mypages-empty-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Sammanfattnings-banner (informativ) */
.em-mypages-info-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--website-primary) 6%, white);
    border: 1px solid color-mix(in srgb, var(--website-primary) 18%, transparent);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    color: var(--website-text);
    font-size: 0.93rem;
}
.em-mypages-info-banner i {
    color: var(--website-primary);
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Varningsvarianten: används när medlemmens val inte kan få effekt —
   t.ex. prenumerationer valda med både e-post och SMS avstängda. Måste läsas
   som "något stämmer inte", inte som en upplysning. */
.em-mypages-info-banner--warning {
    align-items: flex-start;
    background: color-mix(in srgb, #f59e0b 9%, white);
    border-color: color-mix(in srgb, #f59e0b 32%, transparent);
}
.em-mypages-info-banner--warning i {
    color: #b45309;
    margin-top: 0.1rem;
}
.em-mypages-info-banner--warning a {
    color: #b45309;
    font-weight: 700;
    white-space: nowrap;
}

/* Knapp/länk i ett tomläge — em-mypages-empty nollar marginaler, så
   avståndet måste sitta på åtgärden själv. */
.em-mypages-empty-action {
    display: inline-flex;
    margin-top: 1rem;
}

/* Familj-sammanfattning (stats + CTA-knapp) */
.em-mypages-family-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.em-mypages-family-stats {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-width: 280px;
}
.em-mypages-family-stat {
    flex: 1;
    background: white;
    border: 1px solid var(--website-border);
    border-left: 3px solid var(--website-primary);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    min-width: 140px;
}
.em-mypages-family-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--website-text-muted);
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.em-mypages-family-stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--website-text);
    line-height: 1;
}

/* Newsletter — kanalrad (E-post/SMS).

   Kanalerna låg förr som två fristående kort i ett eget rutnät. De är nu
   vanliga em-mypages-list-item i en panel, så hela det blocket kunde utgå —
   det som är kvar är adressen, som måste kunna brytas: en lång e-postadress
   får annars raden att spilla över på telefon. */
.em-mypages-channel-address {
    color: var(--website-text);
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Prenumerations-grid (Mina + Tillgängliga) */
.em-mypages-subscription-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 992px) {
    .em-mypages-subscription-grid { grid-template-columns: 1fr; }
}

/* Tips-lista i sidokort */
.em-mypages-tips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.em-mypages-tips li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--website-text);
    line-height: 1.45;
}
.em-mypages-tips li i {
    color: var(--website-primary);
    font-size: 0.75rem;
    margin-top: 0.32rem;
    flex-shrink: 0;
}

/* MFA-kort */
.em-mypages-mfa-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 1.35rem;
    border-radius: 12px;
    background: var(--website-bg-soft);
    border: 1px solid var(--website-border);
}
.em-mypages-mfa-card--active {
    background: color-mix(in srgb, #10b981 6%, white);
    border-color: color-mix(in srgb, #10b981 35%, var(--website-border));
}
.em-mypages-mfa-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: var(--website-bg-soft);
    color: var(--website-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.em-mypages-mfa-icon--active {
    background: color-mix(in srgb, #10b981 18%, white);
    color: #047857;
}
.em-mypages-mfa-body {
    flex: 1;
    min-width: 0;
}
.em-mypages-mfa-status {
    display: block;
    font-size: 1rem;
    color: var(--website-text);
    margin-bottom: 0.2rem;
}
.em-mypages-mfa-body p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--website-text-muted);
    line-height: 1.4;
}

/* MFA-modal-steg */
.em-mypages-mfa-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.em-mypages-mfa-step:last-child { margin-bottom: 0; }
.em-mypages-mfa-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--website-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ============================================================
   FORDON-SPECIFIKT — list-thumbnail + photo-grid + danger-zone
   ============================================================ */

/* Thumbnail i list-item (ersätter icon när bild finns) */
.em-mypages-list-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--website-bg-soft);
}
@media (max-width: 576px) {
    .em-mypages-list-thumb { width: 56px; height: 42px; }
}

/* Vehicle hero — stor bild överst på edit-sidan */
.em-mypages-vehicle-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 380px;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--website-bg-soft);
}
.em-mypages-vehicle-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.em-mypages-vehicle-hero:hover img {
    transform: scale(1.02);
}

/* Overlay med regnr + märke/modell — premium "fordonsprofil"-känsla */
.em-mypages-vehicle-hero-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2rem 1.5rem 1.25rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    pointer-events: none;
}
.em-mypages-vehicle-hero-overlay-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.em-mypages-vehicle-hero-overlay-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.4rem;
    font-size: 0.92rem;
    opacity: 0.95;
}
.em-mypages-vehicle-hero-overlay-meta span {
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.em-mypages-vehicle-hero-overlay-meta-sep {
    opacity: 0.6;
}

/* Empty-hero — inbjudande dropzone när inga bilder finns */
.em-mypages-vehicle-hero-empty {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 380px;
    width: 100%;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--website-primary) 6%, var(--website-bg-soft)),
        var(--website-bg-soft));
    border: 2px dashed color-mix(in srgb, var(--website-primary) 25%, var(--website-border));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--website-text);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.em-mypages-vehicle-hero-empty:hover {
    border-color: var(--website-primary);
    background: color-mix(in srgb, var(--website-primary) 8%, white);
    color: var(--website-text);
    text-decoration: none;
}
.em-mypages-vehicle-hero-empty-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: white;
    color: var(--website-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.15);
}
.em-mypages-vehicle-hero-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--website-text);
    margin: 0;
}
.em-mypages-vehicle-hero-empty-desc {
    font-size: 0.88rem;
    color: var(--website-text-muted);
    margin: 0;
}

/* Foto-grid i sidokort (bilder under fordonsedit) */
.em-mypages-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
/* Kompakt 3-kol-modifier för sidokort när hero finns */
.em-mypages-photo-grid--compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.em-mypages-photo-grid--compact .em-mypages-photo-tile {
    cursor: pointer;
}
.em-mypages-photo-tile--primary {
    outline: 2px solid var(--website-primary);
    outline-offset: 2px;
}
.em-mypages-photo-tile--primary::before {
    content: "Hero";
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--website-primary);
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    z-index: 1;
}

/* Mobile: horisontell scroll-strip för tumnaglar */
@media (max-width: 768px) {
    .em-mypages-photo-grid--scroll-mobile {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.25rem;
    }
    .em-mypages-photo-grid--scroll-mobile::-webkit-scrollbar { display: none; }
    .em-mypages-photo-grid--scroll-mobile .em-mypages-photo-tile {
        flex: 0 0 120px;
        scroll-snap-align: start;
    }
}

/* ============================================================
   DOCUMENT-/ARCHIVE-TOOLBAR (sök, sortering, räknare)
   Återanvänd för framtida arkivsidor.
   ============================================================ */
.em-mypages-doc-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.em-mypages-doc-toolbar-search {
    position: relative;
    flex: 1;
    min-width: 240px;
}
.em-mypages-doc-toolbar-search i {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--website-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.em-mypages-doc-toolbar-search input {
    width: 100%;
    padding: 0.7rem 0.9rem 0.7rem 2.5rem;
    font-size: 0.95rem;
    border-radius: 10px;
    border: 1.5px solid var(--website-border);
    background: white;
    color: var(--website-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.em-mypages-doc-toolbar-search input:focus {
    border-color: var(--website-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--website-primary) 15%, transparent);
    outline: none;
}
.em-mypages-doc-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--website-text-muted);
    font-size: 0.88rem;
    flex-wrap: wrap;
}
.em-mypages-doc-toolbar-meta select {
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1.5px solid var(--website-border);
    background: white;
    color: var(--website-text);
    font-size: 0.88rem;
    cursor: pointer;
}
.em-mypages-doc-toolbar-meta select:focus {
    border-color: var(--website-primary);
    outline: none;
}

/* ============================================================
   FILTER-CHIPS (kategori-pills)
   ============================================================ */
.em-mypages-filter-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
@media (max-width: 768px) {
    .em-mypages-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }
    .em-mypages-filter-chips::-webkit-scrollbar { display: none; }
}
.em-mypages-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: white;
    border: 1.5px solid var(--website-border);
    color: var(--website-text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.em-mypages-filter-chip:hover {
    border-color: color-mix(in srgb, var(--website-primary) 50%, var(--website-border));
    color: var(--website-text);
    text-decoration: none;
}
.em-mypages-filter-chip--active {
    background: var(--website-primary);
    border-color: var(--website-primary);
    color: white;
}
.em-mypages-filter-chip--active:hover {
    background: color-mix(in srgb, var(--website-primary) 85%, black);
    color: white;
}
.em-mypages-filter-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--website-bg-soft);
    color: var(--website-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}
.em-mypages-filter-chip--active .em-mypages-filter-chip-count {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* ============================================================
   MYPAGES-TABS (generiska tabs för Mina sidor — flikade vyer)
   Promoverat från em-mp-tab. Används för aktivitetssidan men
   återanvänds på framtida flikade vyer.
   ============================================================ */
.em-mypages-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--website-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.em-mypages-tabs::-webkit-scrollbar { display: none; }

.em-mypages-tab {
    background: transparent;
    border: none;
    padding: 0.85rem 1.15rem;
    color: var(--website-text-muted);
    font-weight: 600;
    font-size: 0.93rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.em-mypages-tab:hover {
    color: var(--website-text);
}
.em-mypages-tab--active {
    color: var(--website-primary);
    border-bottom-color: var(--website-primary);
}
.em-mypages-tab--active:hover {
    color: var(--website-primary);
}
.em-mypages-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--website-bg-soft);
    color: var(--website-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}
.em-mypages-tab--active .em-mypages-tab-count {
    background: color-mix(in srgb, var(--website-primary) 15%, white);
    color: var(--website-primary);
}
.em-mypages-tab-count--alert {
    background: #fee2e2;
    color: #b91c1c;
}
/* När em-mypages-tab används som <a>-link mellan separata sidor */
a.em-mypages-tab {
    text-decoration: none;
}
a.em-mypages-tab:hover {
    text-decoration: none;
}

/* Foto-card (återanvänds i matrikel-galleri samt eventuella framtida bildlistor) */
.em-mypages-photo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--website-border);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.em-mypages-photo-card:hover {
    border-color: color-mix(in srgb, var(--website-primary) 50%, var(--website-border));
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.em-mypages-photo-card-media {
    position: relative;
    display: block;
    padding-bottom: 75%;
    background: #0b0f17;
    overflow: hidden;
}
.em-mypages-photo-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.em-mypages-photo-card:hover .em-mypages-photo-card-media img {
    transform: scale(1.04);
}
.em-mypages-photo-card-media-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.em-mypages-photo-card:hover .em-mypages-photo-card-media-hint {
    opacity: 1;
}
.em-mypages-photo-card-body {
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}
.em-mypages-photo-card-body[role="button"] {
    cursor: pointer;
}
.em-mypages-photo-card-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--website-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.em-mypages-photo-card-body[role="button"]:hover .em-mypages-photo-card-title,
.em-mypages-photo-card-body[role="button"]:focus-visible .em-mypages-photo-card-title {
    color: var(--website-primary);
}
.em-mypages-photo-card-sub {
    font-size: 0.75rem;
    color: var(--website-text-muted);
}

/* Tab-paneler */
.em-mypages-tab-panel[hidden] { display: none; }

/* ============================================================
   ACTIVITY-ROW EXTENSIONS — befintliga em-mypages-activity-*
   utökas med side (för status-badge), dimmed (för avslutade),
   static (icke-klickbar) och cancel-note.
   ============================================================ */
.em-mypages-activity-item--dimmed {
    opacity: 0.7;
}
.em-mypages-activity-item--static {
    cursor: default;
    pointer-events: none;
}
.em-mypages-activity-item--static:hover {
    transform: none;
    border-color: var(--website-border);
    box-shadow: none;
}
.em-mypages-activity-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.em-mypages-activity-date--past {
    background: var(--website-bg-soft);
    color: var(--website-text-muted);
}
.em-mypages-activity-date--cancelled {
    background: color-mix(in srgb, #ef4444 12%, white);
    color: #b91c1c;
}
.em-mypages-activity-cancel-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding: 0.5rem 0.65rem;
    background: color-mix(in srgb, #ef4444 6%, white);
    border-left: 3px solid #fca5a5;
    border-radius: 6px;
    color: #7f1d1d;
    font-size: 0.83rem;
    line-height: 1.4;
}
.em-mypages-activity-cancel-note i {
    color: #b91c1c;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}
/* Meta-modifier: relativ tid får primärfärg-accent */
.em-mypages-activity-meta--accent {
    color: var(--website-primary);
    font-weight: 600;
}
.em-mypages-activity-meta--paid {
    color: #047857;
    font-weight: 600;
}
.em-mypages-activity-meta--unpaid {
    color: #b45309;
    font-weight: 600;
}
.em-mypages-photo-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--website-bg-soft);
    border: 1px solid var(--website-border);
}
.em-mypages-photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.em-mypages-photo-tile-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.em-mypages-photo-tile:hover .em-mypages-photo-tile-delete,
.em-mypages-photo-tile:focus-within .em-mypages-photo-tile-delete {
    opacity: 1;
}
.em-mypages-photo-tile-delete:hover {
    background: #dc2626;
}
.em-mypages-photo-tile--upload {
    border: 2px dashed var(--website-border);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--website-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-align: center;
    padding: 0.5rem;
}
.em-mypages-photo-tile--upload:hover {
    border-color: var(--website-primary);
    background: color-mix(in srgb, var(--website-primary) 5%, white);
    color: var(--website-primary);
}
.em-mypages-photo-tile--upload i { font-size: 1.5rem; }

/* Sidokort i danger-färg */
.em-mypages-sidecard--danger {
    border-color: color-mix(in srgb, #ef4444 35%, var(--website-border));
}
.em-mypages-sidecard--danger .em-mypages-sidecard-header { border-bottom-color: color-mix(in srgb, #ef4444 25%, var(--website-border)); }
.em-mypages-sidecard--danger .em-mypages-sidecard-title i { color: #b91c1c; }

/* Danger-knapp */
.em-mypages-form-btn--danger {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
}
.em-mypages-form-btn--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: white;
    transform: translateY(-1px);
}
.em-mypages-form-btn--danger-ghost {
    background: transparent;
    color: #b91c1c;
    border-color: color-mix(in srgb, #dc2626 30%, var(--website-border));
}
.em-mypages-form-btn--danger-ghost:hover {
    background: color-mix(in srgb, #dc2626 8%, white);
    color: #991b1b;
    border-color: #dc2626;
}

/* Sticky form-footer på desktop när formuläret är långt */
.em-mypages-form-footer--sticky {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 5;
    margin: 1.5rem -2.25rem -2rem;
    padding: 1.25rem 2.25rem;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0 -4px 12px -8px rgba(0,0,0,0.08);
}

/* Bekräftelse-checkbox för terms */
.em-mypages-form-confirm {
    background: var(--website-bg-soft);
    border: 1px solid var(--website-border);
    border-radius: 10px;
    padding: 1rem 1.15rem;
}
.em-mypages-form-confirm-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    margin: 0;
    color: var(--website-text);
    font-size: 0.92rem;
    line-height: 1.5;
}
.em-mypages-form-confirm-input {
    width: 18px;
    height: 18px;
    margin: 0.15rem 0 0 0;
    accent-color: var(--website-primary);
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .em-mypages-form-footer--sticky {
        margin: 1.5rem -1.25rem -1.25rem;
        padding: 1.15rem 1.25rem;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
.em-website-footer {
    padding: 3rem 0 2rem;
    background: var(--website-bg-soft);
    border-top: 1px solid var(--website-border);
}

.em-website-footer-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--website-primary);
    margin-bottom: 1.25rem;
}

.em-website-footer a {
    color: var(--website-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.em-website-footer a:hover {
    color: var(--website-primary);
}

.em-website-footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.em-website-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    color: var(--website-text-muted);
    border: 1px solid var(--website-border);
    transition: all 0.2s ease;
}

.em-website-footer-social a:hover {
    background: var(--website-primary);
    color: white;
    border-color: var(--website-primary);
    transform: translateY(-2px);
}

.em-website-footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--website-border);
    font-size: 0.85rem;
    color: var(--website-text-muted);
}
.em-website-footer-cookie-link {
    color: var(--website-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--website-text-muted) 35%, transparent);
    cursor: pointer;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.em-website-footer-cookie-link:hover {
    color: var(--website-primary);
    text-decoration-color: var(--website-primary);
}

/* Flytande cookie-shield — nedre vänstra hörnet, alltid synligt efter consent.
   Premium-pattern (Stripe, Linear, Vercel). */
.em-cookie-shield {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 998;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--website-border);
    box-shadow: 0 6px 18px -4px rgba(0,0,0,0.18);
    color: var(--website-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
    padding: 0;
}
.em-cookie-shield:hover {
    transform: scale(1.08);
    color: var(--website-primary);
    background: white;
    box-shadow: 0 10px 24px -4px rgba(0,0,0,0.22);
}
.em-cookie-shield:focus-visible {
    outline: 2px solid var(--website-primary);
    outline-offset: 3px;
}
@media (max-width: 576px) {
    .em-cookie-shield {
        bottom: 0.85rem;
        left: 0.85rem;
        width: 42px;
        height: 42px;
    }
}

/* ============================================================
   Mina sidor – modaler (medlemskort, fordonskort)
   Återanvändbara mönster för AJAX-laddade detaljmodaler.
   ============================================================ */

/* Override Bootstrap/legacy modal-header för att matcha em-mypages-* designspråket.
   Den globala .modal-header har gradient + vit text; vi vill ha vit/neutral istället. */
.em-mypages-modal .modal-content {
    border: 1px solid var(--website-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.em-mypages-modal .modal-header {
    background: #fff;
    color: var(--website-text);
    border-bottom: 1px solid var(--website-border);
    padding: 1rem 1.25rem;
    border-radius: 0;
}
.em-mypages-modal .modal-header .modal-title {
    color: var(--website-text);
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.em-mypages-modal .modal-header .modal-title i {
    color: var(--website-primary);
}
.em-mypages-modal .modal-header .btn-close {
    filter: none;
    opacity: 0.6;
}
.em-mypages-modal .modal-header .btn-close:hover {
    opacity: 1;
}
.em-mypages-modal .modal-body {
    padding: 1.25rem;
}
.em-mypages-modal .modal-footer {
    background: #fff;
    border-top: 1px solid var(--website-border);
    padding: 0.75rem 1.25rem;
    gap: 0.5rem;
}

/* Modal-rubrik / hero (centrerad titel + identifier-chips) */
.em-mypages-modal-hero {
    text-align: center;
    padding: 0 0 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--website-border);
}
.em-mypages-modal-hero-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.em-mypages-modal-hero-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.em-mypages-modal-hero-foot {
    display: block;
    margin-top: 0.5rem;
    color: var(--website-text-muted);
    font-size: 0.85rem;
}

/* Identifier-pill (medlemsnummer, regnr, region-kod) */
.em-mypages-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--website-primary) 12%, transparent);
    color: var(--website-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.em-mypages-pill--muted {
    background: transparent;
    border: 1px solid var(--website-border);
    color: var(--website-text-muted);
}

/* Modal-sektion */
.em-mypages-modal-section {
    margin-bottom: 1.25rem;
}
.em-mypages-modal-section:last-child {
    margin-bottom: 0;
}
.em-mypages-modal-section-title {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--website-text-muted);
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
}

/* Info-grid (key-value-celler) */
.em-mypages-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.625rem;
}
.em-mypages-info-cell {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: var(--website-bg-soft);
    border: 1px solid var(--website-border);
}
.em-mypages-info-cell-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--website-primary) 12%, transparent);
    color: var(--website-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.em-mypages-info-cell-body {
    flex: 1;
    min-width: 0;
}
.em-mypages-info-cell-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--website-text-muted);
    font-weight: 600;
}
.em-mypages-info-cell-value {
    font-size: 0.875rem;
    color: var(--website-text);
    word-break: break-word;
}
.em-mypages-info-cell-value a {
    color: inherit;
    text-decoration: none;
}
.em-mypages-info-cell-value a:hover {
    color: var(--website-primary);
    text-decoration: underline;
}

/* Klickbar listrad i modaler (fordon, ägare) */
.em-mypages-link-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.em-mypages-link-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--website-border);
    color: var(--website-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}
.em-mypages-link-row:hover,
.em-mypages-link-row:focus-visible {
    border-color: var(--website-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--website-primary) 14%, transparent);
    transform: translateY(-1px);
    color: var(--website-text);
    text-decoration: none;
    outline: none;
}
.em-mypages-link-row--static,
.em-mypages-link-row--static:hover,
.em-mypages-link-row--static:focus-visible {
    cursor: default;
    transform: none;
    border-color: var(--website-border);
    box-shadow: none;
}
.em-mypages-link-row-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--website-primary) 12%, transparent);
    color: var(--website-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.em-mypages-link-row-body {
    flex: 1;
    min-width: 0;
}
.em-mypages-link-row-title {
    font-weight: 600;
    font-size: 0.9rem;
}
.em-mypages-link-row-sub {
    font-size: 0.78rem;
    color: var(--website-text-muted);
}
.em-mypages-link-row-action {
    flex-shrink: 0;
    color: var(--website-text-muted);
}

/* Fordons-carousel i modal */
.em-mypages-vehicle-carousel {
    border-radius: 12px;
    overflow: hidden;
    background: var(--website-bg-soft);
    border: 1px solid var(--website-border);
}
.em-mypages-vehicle-carousel-frame {
    position: relative;
    width: 100%;
    padding-bottom: 62%;
    overflow: hidden;
    background: #0b0f17;
}
.em-mypages-vehicle-carousel-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0b0f17;
}
.em-mypages-vehicle-carousel .carousel-control-prev,
.em-mypages-vehicle-carousel .carousel-control-next {
    width: 10%;
}
.em-mypages-vehicle-carousel .carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Tom-tillstånd i modal */
.em-mypages-modal-empty {
    text-align: center;
    padding: 1rem 0;
    color: var(--website-text-muted);
}
.em-mypages-modal-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Text-knapp som ser ut som länk (för inline-triggers, t.ex. ägare-länk i fordonsrader) */
.em-mypages-link-button {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.em-mypages-link-button:hover,
.em-mypages-link-button:focus-visible {
    text-decoration: underline;
    color: var(--website-primary);
    outline: none;
}

/* ============================================================
   Global toppbar / driftmeddelande (announcement-bar.blade.php)
   ============================================================ */
.em-website-announcement {
    position: relative;
    z-index: 1030;
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #fff;
    background: var(--website-primary);
}
.em-website-announcement__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    /* Symmetrisk sido-padding ger plats åt ev. absolut-placerat stäng-kryss
       till höger utan att texten tappar centreringen. */
    padding: 0.65rem 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
}
.em-website-announcement__icon {
    flex: 0 0 auto;
    font-size: 1rem;
    opacity: 0.95;
}
.em-website-announcement__message {
    flex: 0 1 auto;
    min-width: 0;
}
.em-website-announcement__btn {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    transition: background 0.15s ease;
}
.em-website-announcement__btn:hover,
.em-website-announcement__btn:focus-visible {
    background: rgba(255, 255, 255, 0.32);
    color: inherit;
    outline: none;
}
.em-website-announcement__close {
    /* Absolut till höger så centrerad text förblir centrerad oavsett om
       krysset finns eller ej. */
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    line-height: 1;
    font-size: 1.1rem;
    border-radius: 6px;
}
.em-website-announcement__close:hover,
.em-website-announcement__close:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}
.em-website-announcement.is-dismissing {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Stil-varianter */
.em-website-announcement--info {
    background: var(--website-primary);
    color: #fff;
}
.em-website-announcement--warning {
    background: #fff3cd;
    color: #664d03;
}
.em-website-announcement--warning .em-website-announcement__btn {
    background: rgba(102, 77, 3, 0.12);
    border-color: rgba(102, 77, 3, 0.4);
}
.em-website-announcement--warning .em-website-announcement__btn:hover,
.em-website-announcement--warning .em-website-announcement__btn:focus-visible {
    background: rgba(102, 77, 3, 0.2);
}
.em-website-announcement--warning .em-website-announcement__close:hover,
.em-website-announcement--warning .em-website-announcement__close:focus-visible {
    background: rgba(102, 77, 3, 0.12);
}
.em-website-announcement--danger {
    background: #b02a37;
    color: #fff;
}

@media (max-width: 575.98px) {
    .em-website-announcement__inner {
        flex-wrap: wrap;
        padding: 0.55rem 0.8rem;
        gap: 0.4rem 0.6rem;
    }
    .em-website-announcement__message {
        flex: 1 1 100%;
        order: 3;
    }
    .em-website-announcement__icon { order: 1; }
    /* Tillbaka i flödet på mobil — den staplade layouten styrs av flex-order. */
    .em-website-announcement__close {
        position: static;
        transform: none;
        order: 2;
        margin-left: auto;
    }
    .em-website-announcement__btn { order: 4; }
}

/* ============================================================
   NYHETSBILDSPEL — opt-in topp-band överst på startsidan
   Helbredd bakgrundsbild + mörk gradient + text-overlay.
   Byggt på Bootstrap 5-carousel (ingen extra JS).
   ============================================================ */
.em-news-slider {
    position: relative;
}

.em-news-slider__carousel {
    background: var(--website-primary);
}

.em-news-slider__item {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(360px, 62vh, 560px);
    background-color: var(--website-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Mörk gradient-overlay så texten alltid är läsbar ovanpå bilden */
.em-news-slider__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.45) 38%,
        rgba(0, 0, 0, 0.12) 70%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
}

/* Fallback när nyheten saknar omslagsbild: föreningens primärfärg */
.em-news-slider__item--noimage {
    background: linear-gradient(135deg, var(--website-primary), var(--website-primary-strong));
}

.em-news-slider__item--noimage::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.18) 55%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

.em-news-slider__content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 3.5rem;
    max-width: 760px;
}

.em-news-slider__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.85rem;
}

.em-news-slider__eyebrow i {
    color: var(--website-accent);
}

.em-news-slider__title {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 0.9rem;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.em-news-slider__excerpt {
    font-size: clamp(0.98rem, 1.6vw, 1.15rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.em-news-slider__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #fff;
    color: var(--website-primary);
    font-weight: 700;
    font-size: 0.98rem;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.em-news-slider__cta i {
    transition: transform 0.2s ease;
}

.em-news-slider__cta:hover,
.em-news-slider__cta:focus-visible {
    color: var(--website-primary);
    background: var(--website-bg-warm);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.em-news-slider__cta:hover i,
.em-news-slider__cta:focus-visible i {
    transform: translateX(4px);
}

/* Indikatorer (prickar) — bara när fler än en slide */
.em-news-slider__indicators {
    z-index: 3;
    margin-bottom: 1rem;
}

.em-news-slider__indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background-color: rgba(255, 255, 255, 0.55);
    opacity: 1;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.em-news-slider__indicators [data-bs-target].active {
    background-color: #fff;
    transform: scale(1.25);
}

/* Pil-kontroller — bara när fler än en slide */
.em-news-slider__control {
    z-index: 3;
    width: 6%;
    min-width: 48px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.em-news-slider__control:hover,
.em-news-slider__control:focus-visible {
    opacity: 1;
}

.em-news-slider__control .carousel-control-prev-icon,
.em-news-slider__control .carousel-control-next-icon {
    width: 2.2rem;
    height: 2.2rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    background-size: 1.1rem;
}

@media (max-width: 768px) {
    .em-news-slider__item {
        min-height: clamp(340px, 56vh, 460px);
    }
    .em-news-slider__content {
        padding-top: 2.25rem;
        padding-bottom: 2.75rem;
    }
    .em-news-slider__excerpt {
        margin-bottom: 1.25rem;
    }
    /* Dölj pilarna på mobil — indikatorer + svep räcker */
    .em-news-slider__control {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-news-slider__carousel .carousel-item {
        transition: none;
    }
    .em-news-slider__cta,
    .em-news-slider__cta i,
    .em-news-slider__indicators [data-bs-target] {
        transition: none;
    }
    .em-news-slider__cta:hover,
    .em-news-slider__cta:focus-visible {
        transform: none;
    }
}

/* ============================================================
   MINA SIDOR PÅ MOBIL — inga egna navigationsytor
   Den app-lika bottenlisten togs bort 2026-08-18. Mina sidor nås via
   webbläsaren från en publik sajt, inte som installerad app (ingen PWA),
   och lägesbytet mellan headermeny på publika sidor och bottenlist här
   tvingade fram omorientering. Mobilen använder nu headerns menyknapp,
   där Mina sidor-sektionerna ligger under rubriken "Mina sidor".
   Desktop (≥993px) behåller den grupperade sidomenyn.

   Bara när webbmodulen är PÅ (body.em-website-body) — utan modul finns
   ingen headermeny, och wrappern bär då sidomenyns egen menyknapp. En
   oscopad regel dolde även den, så medlemmen saknade navigation helt på
   telefon (2026-09-24).
   ============================================================ */
@media (max-width: 992px) {
    body.em-website-body .em-mypages-sidebar-wrapper { display: none !important; }
}

/* ============================================================
   MOBILMENYNS TVÅ GRUPPER
   Mina sidor renderas som rutnät i två kolumner, webbplatsmenyn som
   vanliga rader under. Formskillnaden gör grupperna urskiljbara utan
   att man behöver läsa rubrikerna — tolv fullbreddsrader i rad blev
   en tabell utan hierarki (2026-08-18).
   ============================================================ */
@media (max-width: 991.98px) {
    .em-website-nav-section {
        display: block;
        width: 100%;
    }

    .em-website-nav-grouphead {
        display: block;
        padding: 0.35rem 0.25rem 0.55rem;
        color: rgba(255, 255, 255, 0.58);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    /* Hårfin linje ovanför "Webbplatsen" — markerar bytet av grupp. */
    .em-website-nav-grouphead--site {
        margin-top: 0.9rem;
        padding-top: 0.95rem;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .em-website-nav-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .em-website-nav-tile {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        min-height: 52px;
        padding: 0.6rem 0.75rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.07);
        color: rgba(255, 255, 255, 0.92);
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.15;
        text-decoration: none;
        transition: background 0.15s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .em-website-nav-tile:hover,
    .em-website-nav-tile:focus-visible {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
        text-decoration: none;
        outline: none;
    }

    .em-website-nav-tile:active {
        transform: scale(0.98);
    }

    .em-website-nav-tile.is-active {
        background: #fff;
        color: var(--website-primary);
    }

    .em-website-nav-tile i {
        flex-shrink: 0;
        width: 1.1rem;
        font-size: 1rem;
        text-align: center;
        opacity: 0.85;
    }

    .em-website-nav-tile.is-active i {
        opacity: 1;
    }

    .em-website-nav-tile-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .em-website-nav-tile-badge {
        position: absolute;
        top: 6px;
        right: 8px;
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        border-radius: 999px;
        background: #dc2626;
        color: #fff;
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* Webbplatsmenyns rader: inga avdelare — rutnätet ovanför bär
       separationen, och linjer på varje rad gav tabellkänsla. */
    .em-website-header .navbar-collapse .nav-link {
        border-bottom: 0;
        border-radius: 8px;
    }

    /* Diskret rullningslist i stället för webbläsarens breda default. */
    .em-website-header .navbar-collapse {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    }

    .em-website-header .navbar-collapse::-webkit-scrollbar {
        width: 6px;
    }

    .em-website-header .navbar-collapse::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
    }

    .em-website-header .navbar-collapse::-webkit-scrollbar-track {
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-website-nav-tile { transition: none; }
    .em-website-nav-tile:active { transform: none; }
}

.em-website-nav-grouphead:first-child {
    padding-top: 0.25rem;
}

.em-website-nav-subitem {
    display: flex;
    align-items: center;
}

/* Aktiv webbplatslänk: matcha rutnätets formspråk i stället för en
   fullbredds grå platta. Tunn markör till vänster + rundade hörn gör att
   den läser som samma system som rutorna ovanför (2026-08-18). */
@media (max-width: 991.98px) {
    .em-website-header .navbar-collapse .nav-link.active {
        position: relative;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding-left: 0.85rem;
    }

    .em-website-header .navbar-collapse .nav-link.active::before {
        content: '';
        position: absolute;
        left: 0.35rem;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 1.05rem;
        border-radius: 999px;
        background: #fff;
    }
}

/* ============================================================
   OMSLAGSBILD SOM RIKTIG <img>
   Omslaget var en background-image, vilket gor bilden osynlig for
   bildsok — en forening som lagger upp foton fran arsmotet far dem
   aldrig indexerade. Bilden ar nu ett <img> bakom overlagget, med
   samma visuella uttryck: fyller ytan, beskars mot mitten.
   (2026-08-19)
   ============================================================ */
.em-website-page-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Bilden ligger fore ::before i malordningen och skulle annars taka
   gradienten som gor rubriken lasbar. Explicit stapling i stallet. */
.em-website-page-cover-image { z-index: 0; }
.em-website-page-cover::before { z-index: 1; }
.em-website-page-cover > .container { z-index: 2; }

/* ============================================================
   BADGE KRYMPER NAR HEADERN FASTNAT
   Att badgen hanger nedanfor headerkanten ar designen — den ska sticka
   ner mot hero-ytan. Problemet uppstar forst med sticky header: da foljer
   den med ner genom sidan och lagger sig over innehallet. Traffpunkts-
   analys visade brand-logon ovanpa em-news-card-title, alltsa en klickbar
   rubrik som badgen tar tryckningen pa.
   Full storlek pa forstaintrycket, kompakt nar headern blir verktygsrad.
   Skalning med transform sa att alla formvarianter (cirkel, oval, rounded)
   foljer med utan egna regler. (2026-08-19)
   ============================================================ */
.em-website-header--logo-badge .em-website-brand-logo {
    transform-origin: left center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.em-website-header--logo-badge .em-website-brand {
    transition: padding-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.em-website-header--logo-badge.is-stuck .em-website-brand-logo {
    /* top 50% i stallet for 100%: badgen flyttar in i listen i stallet for
       att hanga under den. */
    top: 50%;
    transform: translateY(-50%) scale(var(--badge-stuck-scale, 0.38));
}

/* Bakgrundscirkelns mask tonar ut oversta halvan — meningsfullt nar badgen
   hanger over hero-ytan, men i listen ska hela cirkeln synas. */
.em-website-header--logo-badge.is-stuck .em-website-brand-logo::before {
    -webkit-mask-image: none;
    mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
    .em-website-header--logo-badge .em-website-brand-logo,
    .em-website-header--logo-badge .em-website-brand {
        transition: none;
    }
}

/* ============================================================
   REDIGERINGSGENVAG PA PUBLIKA SIDOR
   For den som har behorighet: en knapp som tar en rakt till ratt
   redigeringsvy, i stallet for admin > hemsida > sidor > leta.
   Diskret i vila, tydlig vid hover. Renderas serverside bara for den
   som far redigera — den doljs aldrig med CSS. (2026-08-19)
   ============================================================ */
.em-website-edit-link {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* 46px i vila: knappen ar rund och maste na 44px tryckyta. */
    max-width: 46px;
    padding: 0.95rem 1rem;
    border-radius: 999px;
    background: var(--website-primary);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0.82;
    transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                box-shadow 0.2s ease;
}

.em-website-edit-link i {
    flex-shrink: 0;
    font-size: 0.95rem;
}

/* Texten ar dold tills man narmar sig — i vila ar knappen bara en penna. */
.em-website-edit-link-text {
    opacity: 0;
    transition: opacity 0.2s ease 0.05s;
}

.em-website-edit-link:hover,
.em-website-edit-link:focus-visible {
    max-width: 20rem;
    opacity: 1;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
    outline: none;
}

.em-website-edit-link:focus-visible {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26), 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.em-website-edit-link:hover .em-website-edit-link-text,
.em-website-edit-link:focus-visible .em-website-edit-link-text {
    opacity: 1;
}

/* Pa touch finns ingen hover — visa texten direkt i stallet for att
   knappen ska se ut som en oidentifierbar prick. */
@media (hover: none) {
    .em-website-edit-link {
        max-width: 20rem;
        opacity: 1;
    }
    .em-website-edit-link-text { opacity: 1; }
}

/* Bottenlisten pa Mina sidor ar borta, men kakbannern kan ligga i vagen. */
body:has(.em-cookie-banner.is-visible) .em-website-edit-link {
    bottom: 7.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .em-website-edit-link,
    .em-website-edit-link-text { transition: none; }
}


/* =========================================================================
   Mina sidor — mobilsäkring: inget innehåll utanför skärmkanten
   =========================================================================
   html/body har overflow-x: clip i mypages-layouten, så ett barn som är
   bredare än innehållskolumnen syns inte som horisontell scroll — det bara
   kapas i högerkanten och kortet ser ut att "rinna ut" ur skärmen. Reglerna
   nedan täpper till de källorna. De ligger sist i filen med flit: flera av dem
   överstyr en komponent som definieras längre upp, och utan ett nyckelvärde i
   specificiteten är det källordningen som avgör.
   Genomgång 2026-08-20. */

/* Bootstrap-rader: .row har negativa gutter-marginaler (-0.75rem åt vardera
   hållet) och förutsätter en förälder med matchande padding. I grid-läget har
   .em-website-mypages-content padding: 0, så raden blir 24 px bredare än
   kolumnen och sticker ut 12 px åt båda håll (aktivitetssidorna, kassan,
   bokningsbekräftelsen, matrikelns galleri). Nolla marginalerna i stället.
   Kolumnernas egen sidopadding blir då kortens ytterkant, vilket ger ett
   12 px-indrag mot panelerna ovanför. Det tas bort för .col-12 under 992 px —
   en col-12 har per definition ingen granne åt sidan, så det finns ingen
   gutter att förstöra. Bredare kolumner (matrikelgalleriets col-6) behåller
   sin padding, annars sitter miniatyrerna ihop. Radavståndet kommer från
   g-*:s vertikala gutter och påverkas inte. */
.em-website-mypages-content > .row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 991.98px) {
    .em-website-mypages-content > .row > .col-12 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Sidhuvudets rubrik är sidans titel — aktivitetsnamn och tidningstitlar kan
   innehålla långa ord som annars trycker ut hela kolumnen. */
.em-website-mypages-pageheader h1,
.em-website-mypages-pageheader p {
    overflow-wrap: break-word;
}

/* Kontaktkortet på Översikt: e-postadresser och webbadresser är obrytbara
   strängar. Utan min-width: 0 sätter flexboxen barnets min-content-bredd som
   golv, och en adress på ~40 tecken blir bredare än kortet. */
.em-mypages-contact-item {
    min-width: 0;
}

.em-mypages-contact-item > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 576px) {
    .em-mypages-contact {
        padding: 1.25rem 1.15rem;
    }
}

/* Bilder och inbäddningar i medlemsinnehållet får aldrig vara bredare än
   kolumnen. Ingen height-regel — wallet-knapparna sätter höjd via attribut
   och skulle tappa sitt bildförhållande. */
.em-website-mypages-content img,
.em-website-mypages-content svg,
.em-website-mypages-content video,
.em-website-mypages-content iframe {
    max-width: 100%;
}

/* iOS zoomar in sidan när ett textfält med mindre än 16 px text får fokus —
   efter zoomen ligger halva layouten utanför skärmen. Sökfältet i dokument-
   och galleriverktygsraden låg på 0.95rem. */
.em-mypages-doc-toolbar-search input {
    font-size: 1rem;
}

/* Standalone-headern (webbmodulen av): föreningsnamnet kan vara långt och
   ligger bredvid Administration/Logga ut-knapparna. Låt namnet krympa och
   klippas i stället för att trycka ut knapparna ur headern. */
.em-mypages-header-brand {
    min-width: 0;
}

.em-mypages-header-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Familjesidans två nyckeltal ligger sida vid sida med 140 px minimibredd
   var. På de smalaste telefonerna (320 px) blev raden bredare än kolumnen. */
@media (max-width: 400px) {
    .em-mypages-family-stats {
        flex-wrap: wrap;
        min-width: 0;
    }

    .em-mypages-family-stat {
        flex: 1 1 100%;
    }
}

/* Användardata är obrytbara strängar oftare än man tror: dokumentnamn utan
   mellanslag, e-postadresser, registreringsnummer, långa kategorinamn. Ett
   flex-barn har min-width: auto, alltså sitt min-content, och kan därför inte
   krympa förbi ett sådant ord — det sticker ut ur kortet oavsett hur mycket
   föräldern får krympa. overflow-wrap: anywhere (inte break-word) räknas in i
   min-content och löser just det; min-width: 0 låter barnet faktiskt krympa. */
.em-mypages-list-title,
.em-mypages-list-meta,
.em-mypages-link-row-title,
.em-mypages-link-row-sub,
.em-mypages-sidecard-title,
.em-mypages-panel-title,
.em-mypages-hello-fact dd {
    overflow-wrap: anywhere;
}

.em-mypages-list-title > *,
.em-mypages-list-meta > * {
    min-width: 0;
}