/* ===== main/css/main.css ===== */
:root { 

     /* COLOR */
    --hype-orange: #FF6F00;     /* Primära CTA-knappar */
    --green-engaging: #00A865;  /* Success, sparat, verifierat */
    --accent-yellow: #FFC107;   /* Highlights, badges */
    --soft-gray: #F1F2F4;       /* Bakgrunder (= innehållsytan, --content-bg) */
    --pure-white: #FFFFFF;      /* Cards */
    --dark-text: #333333;       /* Text */
    --social-blue: #3B82F6;     /* Länkar/info */
    --marinblue-accent: #1e2a441a; /* Bakgrunds färg med transperant 50-80% */
    --heart-red: #ff2d55; /* Speciella knappar som Gillar / Spara */

    /* TEMA — ljust här, mörkt (Grafit) i :root[data-theme="dark"] nedan.
       Använd de här i stället för hårdkodade färger, så följer mörkt tema med.
       OBS: --pure-white är "kortets yta" (mörk i mörkt tema). Vit text på
       orange/grön knapp skrivs som #fff. */
    --page-bg: #FFFFFF;         /* Ramen: bakom headern och sidomenyn */
    /* Innehållsytan bredvid sidomenyn (.main-content): ljusgrå med orange sken,
       så att vita kort syns och menyn avgränsas — spegling av mörkt tema */
    --content-bg:
        radial-gradient(circle at top, rgba(255,111,0,0.07), transparent 45%) fixed,
        radial-gradient(circle at bottom right, rgba(255,193,7,0.05), transparent 40%) fixed,
        #F1F2F4;
    --surface-rgb: 255 255 255; /* = --pure-white, för rgb(var(--surface-rgb) / .9) */
    --surface-2: #f3f4f6;       /* Svag fyllning: chips, fält, hover */
    --surface-3: #e5e7eb;
    --surface-4: #d1d5db;       /* Avstängd brytare o.d. */
    --surface-warm: #f3efe9;    /* Platshållare för bilder */
    --surface-cream: #fffaf5;

    --text-2: #555555;          /* Brödtext, lite ljusare än --dark-text */
    --text-muted: #6b7280;      /* Metadata */
    --text-faint: #888888;      /* Minst viktigt */
    --title-text: #2A4F6D;      /* .section-title */

    --orange-text: #c2410c;     /* Orange TEXT (läsbar mot ljust) */
    --green-text: #00663d;
    --red-text: #b3261e;
    --blue-text: #1d4ed8;
    --amber-text: #7a5200;

    --orange-soft: #fff7ed;     /* Tonade bakgrunder */
    --orange-soft-2: #ffedd5;
    --orange-soft-rgb: 255 247 237;
    --red-soft: #fdecea;
    --yellow-soft: #fef3c7;
    --blue-soft: #e0f2fe;
    --purple-soft: #ede9fe;

    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --ink-rgb: 30 42 68;        /* Tunna linjer/hover: rgb(var(--ink-rgb) / .08) */
    --shade-rgb: 0 0 0;

    /* SIDOMENYN (main/css/navigation.css) — innehållet börjar efter den */
    --sidebar-left: 16px;
    --sidebar-width: 236px;
    --sidebar-gap: 24px;

}


/* MÖRKT TEMA (Grafit) — <html data-theme="dark">, väljs i Inställningar.
   Hype Orange och knappfärgerna är desamma; ytor och text byts. */
:root[data-theme="dark"] {
    color-scheme: dark;   /* mörka scrollbars och formulärkontroller */

    --pure-white: #1C1D20;
    --soft-gray: #232428;
    --dark-text: #F2F2F3;
    --marinblue-accent: rgba(255, 255, 255, 0.06);

    --page-bg: #121314;
    --content-bg: #232428;      /* = --soft-gray: grått innehåll, svart runt sidomenyn */
    --surface-rgb: 28 29 32;
    --surface-2: #2A2C30;
    --surface-3: #313338;
    --surface-4: #45484E;
    --surface-warm: #26282C;
    --surface-cream: #221F1C;

    --text-2: #C9CBD0;
    --text-muted: #A1A4AA;
    --text-faint: #85888F;
    --title-text: #D5DEE8;

    --orange-text: #FF8A3D;
    --green-text: #34C98A;
    --red-text: #FF6B6B;
    --blue-text: #60A5FA;
    --amber-text: #FFC94D;

    --orange-soft: #33251B;
    --orange-soft-2: #4A2E17;
    --orange-soft-rgb: 51 37 27;
    --red-soft: #3A2124;
    --yellow-soft: #3A3220;
    --blue-soft: #1E2A3A;
    --purple-soft: #2A2540;

    --border: #34363B;
    --border-strong: #45484E;
    --ink-rgb: 255 255 255;
    --shade-rgb: 255 255 255;
}



* {
     box-sizing: border-box;
  }


html {
    height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background: var(--page-bg);

    color: var(--dark-text);
    margin: 0;
    padding: 0;
}

/* ⚡ Glöden i hörnen ligger still när man scrollar. Ett eget fast lager i stället för
   background-attachment: fixed — det fick mobilen att rita om hela sidan vid varje
   scrollsteg (hackigt), medan ett fast lager flyttas av grafikkortet. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at top,
            rgba(255,111,0,0.08),
            transparent 45%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255,193,7,0.05),
            transparent 40%
        );
}

a {
    text-decoration: none;
}

/* 📱 Tryck på mobil: ingen blå tryckmarkering över knappar, länkar och klickbara kort
   (tangentbordets fokusring finns kvar via :focus-visible) */
a, button, summary, label, [role="button"], [data-signup-prompt] {
    -webkit-tap-highlight-color: transparent;
}

/* Knappar och knapprader: håll inne markerar aldrig texten och ger ingen kopiera-meny, och
   inget dubbeltryck-zoom. Vanlig text (adress, inlägg, meddelanden) går fortfarande att markera. */
button,
[role="button"],
.mh-hype, .mh-comment, .mh-ghost, .mh-share, .mh-save, .save-btn, .tried-quick, .tried-ask,
.hype-btn, .fd-actions, .feed-post-actions, .rd-map-btn, .home-chip, .explore-tab, .verdict-choice {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}


/* Innehållet bredvid sidomenyn — en egen yta mot ramen (header + sidomeny):
   mörkt tema grafitgrå mot nästan svart, ljust tema ljusgrå mot vitt.
   Samma grå som startsidans flöde (.section-soft → --soft-gray). */
.main-content {
    flex: 1;
    min-width: 0;
    align-self: stretch;   /* grå ända ner även på korta sidor */
    background: var(--content-bg);
}

.page-layout {
    display: flex;
    min-height: 100vh;
    align-items: flex-start;

    padding-left: calc(var(--sidebar-left) + var(--sidebar-width) + var(--sidebar-gap));

}


/* --- Homepage layout --- */

.content-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 15px;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--title-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-block
{
    width: 100%;
    padding: 60px 0;
}

/* Tom-läge (t.ex. "Inga nyheter just nu" på startsidan).
   Låg förut i trending.css men gällde på alla sidor. */
.empty-state {
    background: var(--pure-white);
    border-radius: 24px;
    padding: 60px;
    text-align: center;
}
/* =========================
   SECTION VARIANTS
========================= */

.page-section-white {
    width: 100%;
    padding: 40px 0;
    background: var(--pure-white);
}


/* Soft background (default feed feeling) */
.section-soft {
    background: var(--soft-gray);
}

/* Clean white (cards / focus content) */
.section-white {
    background: var(--pure-white);
}

/* Hype / brand glow section */
.section-hype {
    background:
        radial-gradient(
            circle at top,
            rgba(255,111,0,0.10),
            transparent 60%
        ),
        var(--soft-gray);
}

/* Dark section (sparsam användning) */
.section-dark {
    background: #0f172a;
    color: white;
}

/* spacing fix between sections */
.section-block + .section-block {
    border-top: 1px solid rgb(var(--shade-rgb) / 0.04);
}

/* --- Kategorier --- */
.categories {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.categories a {
    padding: 14px 28px;
    border-radius: 30px;
    background-color: var(--pure-white);
    font-weight: 600;
    font-size: 1rem;
    color: var(--social-blue);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.categories a:hover {
    background-color: var(--hype-orange);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(255, 111, 0, 0.3);
}



/* --- TEXTAREA & INPUT (gäller alla formulär) --- */
textarea, input[type=text] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    font-size: 14px;
}

/* 🤖 Botfällan i registreringen (main/signup_guard.py) — bara botar fyller i den.
   Här i stället för i HTML:en, så att botar som läser sidan inte ser att den är dold. */
.form-trap {
    display: none !important;
}


/* FEED  - USER LOGGED IN*/
/* =========================
   FEED HEADER
========================= */

.feed-overview {
    margin-bottom: 20px;
    padding: 25px;
}

.feed-card {
    padding: 18px;

    border-radius: 14px;
    border: 1px solid var(--border);

    background: var(--pure-white);

    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}


.feed-badge {
    display: inline-flex;

    font-size: 0.75rem;
    font-weight: 600;

    padding: 4px 8px;

    border-radius: 999px;

    background: rgba(255,77,45,0.1);
    color: #ff4d2d;

    margin-bottom: 12px;
}

.feed-card h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark-text);
}

.feed-card p {
    margin: 6px 0 16px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* =========================
   STATS
========================= */

.feed-stats {
    display: flex;
    gap: 10px;
}

.feed-stat {
    flex: 1;

    padding: 12px;

    border-radius: 12px;

    background: rgba(255,77,45,0.04);
    border: 1px solid rgba(255,77,45,0.08);

    text-align: center;
}

.feed-stat-number {
    display: block;

    font-size: 1.25rem;
    font-weight: 700;

    color: #ff4d2d;
}

.feed-stat-label {
    display: block;

    margin-top: 4px;

    font-size: 0.75rem;
    color: var(--text-muted);
}





/* --- RESPONSIVE DESIGN --- */

@media (max-width: 1100px)
{
    /* Sidomenyn blir en smal ikon-rad */
    :root {
        --sidebar-left: 8px;
        --sidebar-width: 56px;
        --sidebar-gap: 12px;
    }

     .content-wrapper {
        max-width: none;
        margin: 0;
        padding: 0 12px;
    }
}

/* Tablets (under 992px) */
@media (max-width: 992px) {
    .container {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        padding: 15px;
    }

    .content-wrapper{

        padding: 0 16px;
        max-width: 100%;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .categories a {
        background-color: var(--pure-white);
        padding: 12px 22px;
        font-size: 0.95rem;
        color: var(--social-blue);

    }

    .categories a:hover {
    background-color: var(--hype-orange);
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 111, 0, 0.3);
}
}


@media (max-width: 768px) {

    .food-card-feed-grid {
        display: grid;
        grid-template-columns: 1fr;   /* en kolumn istället för flera */
        gap: 15px;
    }

    .page-layout{
        padding-left: 0;
    }

    .feed-card {
        padding: 16px;
    }

    .feed-card h1 {
        font-size: 1.3rem;
    }

    .feed-stats {
        flex-direction: row;
    }
} 

/* Mobiler (under 600px) */
@media (max-width: 600px) {

    

    .container {
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 15px;
    }

    .content-wrapper {
        padding: 30px 15px;
    }

    .food-card-feed-grid {
        display: grid;
        grid-template-columns: 1fr;   
        gap: 15px;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .categories {
        flex-direction: column;
        gap: 10px;
    }

    .categories a {
        width: 100%;
        text-align: center;
        padding: 12px;
        font-size: 0.95rem;
    }
}


/* =========================
   FLASH MESSAGES (django.contrib.messages)
   ========================= */
.flash-messages {
    max-width: 1100px;
    margin: 16px auto 0;
    padding: 0 16px;
}

.flash-message {
    background: var(--pure-white);
    border-left: 4px solid var(--hype-orange);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.flash-success {
    border-left-color: #2e7d32;
}

.flash-error {
    border-left-color: #c62828;
}


/* =========================
   PLATS-RAD ("Visar 34 rätter i Nacka · Byt plats")
   partials/location_scope.html
   ========================= */
.location-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.location-scope-text {
    color: var(--text-2);
}

.location-scope-text strong {
    color: var(--dark-text);
}

.location-scope-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.location-scope-btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,111,0,0.25);
    background: rgba(255,111,0,0.08);
    color: var(--hype-orange);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.location-scope-btn:hover {
    background: var(--hype-orange);
    color: white;
}

.empty-location-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

/* Platsen på restaurangkorten i listan är en knapp (byter plats) */
button.restaurants-list-location {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.restaurants-list-location:hover {
    text-decoration: underline;
}


/* =========================
   PAGINERING + "VISA FLER"
   partials/pagination.html
   ========================= */
.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 32px 0 16px;
}

.load-more-btn {
    min-width: 220px;
    padding: 14px 28px;
    border: none;
    border-radius: 999px;
    background: var(--hype-orange);
    color: white;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255,111,0,0.25);
    transition: .2s;
}

.load-more-btn:hover {
    transform: translateY(-2px);
}

.load-more-btn:disabled {
    opacity: .7;
    cursor: wait;
    transform: none;
}

.pagination-status {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.pagination-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.pagination-number,
.pagination-step {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}

.pagination-number:hover,
.pagination-step:hover {
    border-color: var(--hype-orange);
    color: var(--hype-orange);
}

.pagination-number.current {
    background: var(--hype-orange);
    border-color: var(--hype-orange);
    color: white;
}

.pagination-ellipsis {
    padding: 0 4px;
    color: var(--text-faint);
}


/* =====================================================
   📱 SOCIALA MEDIER (main/social.py)
   Ikonerna: partials/social_links.html (profil, restaurangsida).
   Fälten: partials/social_fields.html (Inställningar, ägarpanelen).
===================================================== */

.social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
}

.social-links-label {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.social-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Den runda ikonen i tjänstens färg */
.social-link {
    width: 36px;
    height: 36px;
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    color: #fff;
    text-decoration: none;

    transition: transform .2s ease, box-shadow .2s ease;
}

a.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

a.social-link:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.social-link--instagram {
    background: linear-gradient(45deg, #f9a825, #e1306c 50%, #833ab4);
}

.social-link--tiktok {
    background: #111;
    /* Syns mot mörkt tema också */
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
}

.social-link--facebook {
    background: #1877f2;
}

.social-link--youtube {
    background: #ff0000;
}

@media (prefers-reduced-motion: reduce) {
    a.social-link:hover {
        transform: none;
    }
}


/* ---------- Fälten ---------- */

.social-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.social-field {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
}

.social-field-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--dark-text);
    font-size: 15px;
    font-weight: 700;
}

.social-field-label .social-link {
    width: 32px;
    height: 32px;
}

.social-field-input {
    position: relative;
}

.social-fields .social-field-input input {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 16px;
    box-sizing: border-box;

    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-radius: 999px;
    background: var(--pure-white);

    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
}

.social-fields .social-field-input input:focus {
    outline: none;
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .15);
}

.social-fields .social-field.has-error input {
    border-color: var(--red-text);
}

.social-field-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 50%;
    background: transparent;

    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;

    transform: translateY(-50%);
}

.social-field-clear:hover {
    background: var(--red-soft);
    color: var(--red-text);
}

.social-field-clear:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 1px;
}

.social-field-clear[hidden] {
    display: none;
}

.social-field-error {
    grid-column: 2;
    margin: 0;
    color: var(--red-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* Mobil: etiketten ovanför fältet */
@media (max-width: 560px) {
    .social-field {
        grid-template-columns: minmax(0, 1fr);
    }

    .social-field-error {
        grid-column: 1;
    }
}

/* ===== main/css/food_cards.css ===== */
/* =====================================================
   KORT-GRID
===================================================== */

.food-card-feed-grid
{
   --feed-gap: 24px;
   --feed-card-min: 280px;

   display:grid;
   gap:var(--feed-gap);

   /* Max 3 kolumner, byter själv till 2 och sedan 1 när kort inte
      får plats med minst --feed-card-min. min(…, 100%) gör att ett
      ensamt kort aldrig blir bredare än skärmen på smala mobiler.
      (Förut: repeat(3, minmax(300px, 1fr)) = alltid minst 948px →
      korten sköts ut ur fönstret mellan ca 770–1270px.) */
   grid-template-columns: repeat(
       auto-fill,
       minmax(
           max(
               min(var(--feed-card-min), 100%),
               calc((100% - 2 * var(--feed-gap)) / 3)
           ),
           1fr
       )
   );
}

.food-card-feed-grid > * {
    min-width: 0;   /* låt långt innehåll krympa istället för att spränga kolumnen */
}


/* =====================================================
   MAT- & RESTAURANGKORT (.mh-card)
   partials/food_card.html + partials/restaurant_card.html
   Egna klassnamn så att korten inte krockar med knapparna på
   Mat-listan, Sparat och rättsidorna (se LEGACY längst ner).
===================================================== */

.mh-card {
    position: relative;   /* ankare för .mh-card-link */

    display: flex;
    flex-direction: column;
    height: 100%;         /* lika höga kort i samma rad */

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 20px;
    overflow: hidden;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 6px 18px rgba(16, 24, 40, .06);

    transition: transform .25s ease, box-shadow .25s ease;
}

@media (hover: hover) {

    .mh-card:hover {
        transform: translateY(-4px);
        box-shadow:
            0 2px 4px rgba(16, 24, 40, .05),
            0 16px 36px rgba(16, 24, 40, .12);
    }

    .mh-card:hover .mh-card-media img {
        transform: scale(1.04);
    }

}


/* Hela kortet är en riktig länk. Knappar och egna länkar
   lyfts ovanför med z-index 2 så att de går att klicka på. */
.mh-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.mh-card-link:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}


/* ---------- Bild ---------- */

.mh-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-warm);   /* syns medan bilden laddar */
}

.mh-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

/* Svag skugga upptill så att etiketterna syns på ljusa bilder */
.mh-card-media::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 72px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .25), transparent);
    pointer-events: none;
}

/* 📸 "Besökare": bilden kommer från någons inlägg, inte från restaurangen
   (main/visitor_photos.py). Kort: nere till vänster. Rätt-/restaurangsidan:
   nere till höger, där 📷 "Lägg till en egen bild" inte ligger. */
.mh-photo-credit {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1;

    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .62);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.fd-media .mh-photo-credit {
    left: auto;
    right: 12px;
    bottom: 12px;
    padding: 6px 12px;
    font-size: 13px;
    text-decoration: none;
    pointer-events: auto;   /* en länk till "Bilder från besökare" */
}

.mh-card-chips {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 64px;   /* plats för spara-knappen */
    z-index: 1;

    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mh-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 5px 10px;
    border-radius: 999px;

    /* Inget backdrop-filter: bakom 92 % täckning syns suddet inte, men det kostar vid scroll */
    background: rgb(var(--surface-rgb) / .92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);

    color: var(--dark-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* 📍 Avståndschippet visas först när distance.js har en position */
.mh-chip[hidden] {
    display: none;
}

/* ✨ Ny: vit text på samma glöd som Hajpad (cards.css) */
.mh-chip--new {
    background: linear-gradient(135deg, #ff7a1a 0%, #e8520c 45%, #d4430b 100%);
    color: #fff;
}

/* 📡 📈 På väg upp / 💎 Guldkorn på Sugen?-korten (main/radar.py) — tonad, så att 🏅 och ✨ syns mest */
.mh-chip--radar {
    background: var(--orange-soft);
    border: 1px solid rgba(255, 111, 0, .3);
    color: var(--orange-text);
    font-weight: 700;
}

/* Placering på Trendigt (rank=N) */
.mh-chip--rank {
    background: #1e2a44;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.mh-chip--rank1 { background: #fde68a; color: #92400e; }
.mh-chip--rank2 { background: var(--surface-3); color: var(--dark-text); }
.mh-chip--rank3 { background: #fed7aa; color: #9a3412; }

/* ⏳ Begränsad tid (partials/availability_chip.html). Fasta färger — de
   ligger på bilder i båda temana. Dubbla klasser väger tyngre än .fd-chip. */
.mh-chip.mh-chip--limited { background: #fde68a; color: #713f12; }   /* ⏳ 3 dagar kvar */
.mh-chip.mh-chip--last    { background: #dc2626; color: #fff; }      /* 🔥 Sista dagen! */
.mh-chip.mh-chip--soon    { background: #2563eb; color: #fff; }      /* 🔜 Släpps fre 10 okt */
.mh-chip.mh-chip--ended   { background: #4b5563; color: #fff; }      /* ⌛ Slut */


/* ---------- Spara (hjärta) ----------
   .save-btn.mh-save väger tyngre än de gamla globala .save-btn-reglerna.
   Används på korten och i Mat-/Restauranglistan (.mh-save--flat). */

.save-btn.mh-save {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;

    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    background: rgb(var(--surface-rgb) / .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);

    color: var(--dark-text);
    cursor: pointer;

    transition: transform .2s ease, color .2s ease;
}

.save-btn.mh-save:hover {
    transform: scale(1.08);
}

.save-btn.mh-save .save-icon,
.save-btn.mh-save.active .save-icon {   /* den gamla .save-btn.active förstorar ikonen */
    display: inline-flex;
    font-size: inherit;
    transform: none;
}

.save-btn.mh-save svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

.save-btn.mh-save.active {
    background: var(--pure-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    color: #ff2d55;
}

.save-btn.mh-save.active svg {
    fill: currentColor;
}

.save-btn.mh-save.pop svg {
    animation: mh-pop .45s cubic-bezier(.3, 1.6, .5, 1);
}

/* ✓ Testat (main/tried.py): samma knapp, grön bock i stället för hjärtat */
.save-btn.tried .save-icon svg {
    display: none;
}

.save-btn.tried .save-icon::before {
    content: "✓";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

/* tried hör alltid ihop med active — tre klasser, så de slår .active-reglerna (rött hjärta) */
.save-btn.mh-save.active.tried,
.save-btn.mh-save.active.tried:hover {
    color: var(--green-text);
}

.save-btn.fd-save.active.tried,
.save-btn.fd-save.active.tried:hover {
    border-color: rgb(0 168 101 / .4);
    background: rgb(0 168 101 / .12);
    color: var(--green-text);
}

/* Menyn under hjärtat: "Jag har testat" / "Ta bort" (save_toggle.js) */
.save-menu {
    position: absolute;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 6px;

    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--pure-white);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.save-menu-item {
    padding: 11px 12px;

    border: none;
    border-radius: 10px;
    background: none;

    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.save-menu-item:hover,
.save-menu-item:focus-visible {
    background: var(--surface-2);
    outline: none;
}

/* "✓ Har testat" / "✓ Har varit här" bredvid hjärtat på rätt- och restaurangsidan.
   Samma form som "Vill testa!" (.save-btn.fd-save), grön i stället för röd. */
.tried-quick {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 46px;
    padding: 0 20px;

    border-radius: 999px;
    border: 1.5px solid rgb(var(--ink-rgb) / .12);
    background: var(--pure-white);

    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;

    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease;
}

.tried-quick span {
    font-weight: 900;
}

.tried-quick:hover {
    border-color: rgb(0 168 101 / .4);
    background: rgb(0 168 101 / .12);
    color: var(--green-text);
}

.tried-quick:active {
    transform: scale(.96);
}

.tried-quick:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.tried-quick[hidden] {
    display: none;
}

.friends-tried a {
    color: inherit;
}

/* På vit bakgrund (listorna): tunn ram istället för skugga */
.save-btn.mh-save--flat,
.save-btn.mh-save--flat.active {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    backdrop-filter: none;
    box-shadow: none;
}

.save-btn.mh-save--flat svg {
    width: 18px;
    height: 18px;
}

.save-btn.mh-save--flat:hover {
    border-color: #ff2d55;
    color: #ff2d55;
}


/* ---------- Text ---------- */

.mh-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 14px 16px 16px;
}

.mh-card-title {
    margin: 0;

    color: var(--dark-text);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;

    /* max två rader */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.mh-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;

    color: var(--text-muted);
    font-size: 14px;
}

.mh-card-meta-main {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Restaurangnamnet: egen länk, lyft ovanför .mh-card-link */
.mh-card-restaurant {
    position: relative;
    z-index: 2;
    color: inherit;
    text-decoration: none;
}

.mh-card-restaurant:hover {
    color: var(--hype-orange);
    text-decoration: underline;
}

.mh-card-restaurant:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

.mh-price {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);

    color: var(--dark-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}


/* ---------- Prisnivå: 1–4 guldpåsar (partials/price_level.html) ---------- */

.price-level {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    vertical-align: middle;
    white-space: nowrap;
}

.price-bag {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;

    fill: none;
    stroke: #b9c0ca;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.price-bag.is-on {
    stroke: #a86b00;
}

.price-bag.is-on .price-bag-top,
.price-bag.is-on .price-bag-body {
    fill: #f5b41a;
}

.price-bag.is-on .price-bag-coin {
    fill: #ffe08a;
}

.price-level-range {
    margin-left: 6px;
    color: inherit;
    font-size: 0.85em;
    font-weight: 600;
}


/* ---------- Knappar ---------- */

.mh-card-actions {
    margin-top: auto;   /* knapparna hamnar alltid längst ner */
    padding-top: 12px;

    display: flex;
    align-items: center;
    gap: 8px;
}

.mh-hype,
.mh-comment {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    height: 40px;
    padding: 0 14px;
    border-radius: 999px;

    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .15s ease;
}

.mh-hype:active,
.mh-comment:active {
    transform: scale(.96);
}

/* Hajpa: ljus orange → eldgradient när man hajpat.
   🔥 ligger i en egen "glödbubbla" (ljus cirkel → vit när hajpad)
   så flamman syns även mot den orange knappen. */
.mh-hype {
    border: 1.5px solid rgba(255, 111, 0, .35);
    background: rgba(255, 111, 0, .08);
    color: var(--orange-text);
}

.mh-hype:hover {
    border-color: rgba(255, 111, 0, .6);
    background: rgba(255, 111, 0, .14);
}

.mh-hype.active {
    border-color: transparent;
    background: linear-gradient(135deg, #ff9a1f 0%, var(--hype-orange) 45%, #f0400c 100%);
    box-shadow: 0 4px 14px rgba(240, 64, 12, .32);
    color: #fff;
}

.mh-hype.active:hover {
    background: linear-gradient(135deg, #ff8c0a 0%, #f56800 45%, #e0360a 100%);
}

.mh-hype:disabled {
    cursor: progress;
}

/* Bubblan sitter tätt mot vänsterkanten (negativ marginal mot knappens padding) */
.mh-hype-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;

    width: 28px;
    height: 28px;
    margin-left: -9px;
    border-radius: 50%;
    background: rgba(255, 111, 0, .15);

    font-size: 15px;
    line-height: 1;
    transition: background .2s ease, box-shadow .2s ease;
}

.mh-hype.active .mh-hype-icon {
    background: #fff;
    box-shadow: 0 1px 4px rgba(150, 40, 0, .35);
}

.mh-hype.pop .mh-hype-icon {
    animation: mh-pop .45s cubic-bezier(.3, 1.6, .5, 1);
}

/* ✨ Gnistor när man hajpar (hype_points.js sätter .pop i 500 ms) */
.mh-hype-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        0 -17px #ffb703,
        15px -9px #ff6f00,
        15px 9px #ffd166,
        0 17px #f0400c,
        -15px 9px #ffb703,
        -15px -9px #ff8a00;
}

.mh-hype.pop .mh-hype-icon::before {
    animation: mh-sparks .5s ease-out;
}

@keyframes mh-sparks {
    0%   { opacity: 1; transform: scale(.35); }
    100% { opacity: 0; transform: scale(1.5); }
}

.mh-hype-count {
    margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(194, 65, 12, .25);
    font-variant-numeric: tabular-nums;
}

.mh-hype.active .mh-hype-count {
    border-left-color: rgba(255, 255, 255, .45);
}

/* Kommentera / "Visa restaurang": neutral */
.mh-comment,
.mh-ghost {
    border: 1.5px solid rgb(var(--ink-rgb) / .12);
    background: var(--pure-white);
    color: var(--dark-text);
}

.mh-comment:hover,
.mh-ghost:hover {
    background: var(--soft-gray);
}

/* 💬 Kommentera: pratbubbla (partials/comment_icon.html) vars prickar
   "skriver" som i en chatt när man håller över knappen */
.mh-comment:hover {
    border-color: rgba(59, 130, 246, .4);
    background: rgba(59, 130, 246, .08);
    color: var(--blue-text);
}

.mh-comment-icon {
    flex: none;
    width: 20px;
    height: 20px;
    overflow: visible;
}

.mh-comment-icon .mh-bubble {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.mh-comment-icon circle {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
}

.mh-comment:hover .mh-comment-icon circle,
.mh-comment:focus-visible .mh-comment-icon circle {
    animation: mh-typing 1s ease-in-out infinite;
}

.mh-comment-icon circle:nth-of-type(2) { animation-delay: .15s; }
.mh-comment-icon circle:nth-of-type(3) { animation-delay: .3s; }

@keyframes mh-typing {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-2.5px); }
}

/* .mh-ghost delar form med .mh-hype/.mh-comment */
.mh-ghost {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    height: 40px;
    padding: 0 14px;
    border-radius: 999px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

/* Mindre knappar (Mat-/Restauranglistan) */
.mh-actions-sm .mh-hype,
.mh-actions-sm .mh-comment,
.mh-actions-sm .mh-ghost {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.mh-actions-sm .mh-hype-icon {
    width: 24px;
    height: 24px;
    margin-left: -8px;
    font-size: 13px;
}

.mh-actions-sm .mh-comment-icon {
    width: 18px;
    height: 18px;
}

.mh-hype:focus-visible,
.mh-comment:focus-visible,
.mh-ghost:focus-visible,
.save-btn.mh-save:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

@keyframes mh-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45) rotate(-8deg); }
    100% { transform: scale(1); }
}


/* Skärmläsartext (syns inte) */
.mh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


@media (max-width: 768px) {

    .food-card-feed-grid {
        --feed-gap: 15px;
        grid-template-columns: minmax(0, 1fr);
    }

    .mh-card-title {
        font-size: 17px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .mh-card,
    .mh-card-media img,
    .mh-hype,
    .mh-comment,
    .save-btn.mh-save {
        transition: none;
    }

    .mh-card:hover,
    .mh-card:hover .mh-card-media img {
        transform: none;
    }

    .mh-hype.pop .mh-hype-icon,
    .mh-hype.pop .mh-hype-icon::before,
    .mh-comment:hover .mh-comment-icon circle,
    .mh-comment:focus-visible .mh-comment-icon circle,
    .save-btn.mh-save.pop svg {
        animation: none;
    }

}


/* =====================================================
   LEGACY — används fortfarande utanför korten:
   .save-btn (Sparat, rätt- och restaurangsidorna)
   Rör inte utan att kolla de sidorna.
===================================================== */

.save-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 9px 15px;
    border-radius: 999px;

    background: rgb(var(--surface-rgb) / .18);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .25);

    color: white;
    font-weight: 800;
    cursor: pointer;

    transition: .25s ease;
}

.save-icon {
    font-size: 20px;
}

.save-text {
    font-size: 14px;
}

.save-btn.active {
    background: #ff2d55;
    border-color: #ff2d55;
    box-shadow: 0 10px 25px rgba(255, 45, 85, .35);
}

.save-btn.active .save-icon {
    transform: scale(1.2);
}


/* 🏷️ Pågående erbjudande (Restaurant/FoodItem.has_offer, owners/campaigns.py) */
.mh-chip.mh-chip--offer { background: #15803d; color: #fff; }

/* 🏅 Hajp-verifierad (main/verdict.py): gul med mörk text i båda temana —
   ligger på bilder och ska synas. Dubbla klasser väger tyngre än .fd-chip. */
.mh-chip.mh-chip--verified {
    background: var(--accent-yellow);
    color: #3b2a00;
    text-decoration: none;
}

a.mh-chip.mh-chip--verified:hover {
    filter: brightness(.95);
}

/* 🔥 "82 % värt hajpen · 143 svar" — under restaurangnamnet, ovanför knapparna */
.mh-verdict {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.3;
}

.mh-verdict strong {
    color: var(--dark-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mh-verdict-count {
    color: var(--text-muted);
}

.layout-list .mh-verdict {
    font-size: 12px;
}

.layout-list .mh-verdict-count {
    display: none;
}

/* 🏅 "· 2 hajp-verifierade" i restaurangkortets meta-rad */
.mh-card-verified {
    color: var(--amber-text);
    font-weight: 700;
}

/* Trendigt → 🏅 Värt hajpen: två listor efter varandra (trending.html) */
.verdict-list + .verdict-list {
    margin-top: 36px;
}

.verdict-list-title {
    margin: 0 0 4px;
    color: var(--dark-text);
    font-size: 1.35rem;
    font-weight: 900;
}

.verdict-list-intro {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 14px;
}

.verdict-list-share {
    margin-top: 14px;
}

/* 🔥 😐 🧊 — rutan på rättens sida (partials/verdict_box.html) och frågan efter
   "Jag har testat" (verdict.js) */
.verdict-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.verdict-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    overflow-wrap: anywhere;   /* "Överhajpat" går aldrig utanför knappen */
    border: 1px solid var(--border-strong);
    border-radius: 12px;

    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;

    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.verdict-choice:hover {
    border-color: var(--hype-orange);
}

.verdict-choice:active {
    transform: scale(.97);
}

.verdict-choice:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.verdict-choice--worth.is-active     { background: var(--hype-orange); border-color: var(--hype-orange); color: #fff; }
.verdict-choice--ok.is-active        { background: var(--surface-4); border-color: var(--surface-4); }
.verdict-choice--overhyped.is-active { background: #0284c7; border-color: #0284c7; color: #fff; }

.verdict-choice[aria-busy="true"] {
    opacity: .6;
}

@media (max-width: 420px) {
    .verdict-choice {
        flex-direction: column;
        gap: 2px;
        font-size: 13px;
    }
}

/* ✓ "Har du testat den? ✓ Ja · Inte än" under knapparna efter 🔥 Hajpa (verdict.js) —
   ovanpå kortlänken, så att trycken inte öppnar rätten */
.tried-ask {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 12px;

    background: var(--orange-soft);
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;

    animation: tried-ask-in .25s ease;
}

.tried-ask-text {
    flex: 1 1 auto;
}

/* ✓ Ja och Inte än bryts till nästa rad tillsammans */
.tried-ask-actions {
    display: flex;
    gap: 6px;
}

.tried-ask-yes,
.tried-ask-no {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.tried-ask-yes {
    border: 0;
    background: var(--green-engaging);
    color: #fff;
}

.tried-ask-no {
    border: 1px solid var(--border-strong);
    background: var(--pure-white);
    color: var(--text-2);
}

/* Startsidans små kort har ingen plats under knapparna → en ruta längst ner på skärmen */
.tried-ask--toast {
    position: fixed;
    z-index: 900;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: min(420px, calc(100vw - 24px));
    margin: 0;
    transform: translateX(-50%);
    border: 1px solid var(--border);
    background: var(--pure-white);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
    animation: none;
}

.layout-list .tried-ask {
    margin-top: 6px;
    padding: 6px 8px;
    font-size: 13px;
}

@keyframes tried-ask-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tried-ask { animation: none; }
}

/* Frågan efter "Jag har testat" — ett ark nere på mobilen, en ruta i mitten på datorn */
.verdict-sheet {
    width: min(420px, calc(100vw - 24px));
    padding: 20px 18px 16px;
    border: 0;
    border-radius: 20px;

    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.verdict-sheet::backdrop {
    background: rgba(0, 0, 0, .45);
}

.verdict-sheet-kicker {
    margin: 0 0 4px;
    color: var(--green-text);
    font-size: 13px;
    font-weight: 800;
}

.verdict-sheet-title {
    margin: 0 0 14px;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.verdict-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;

    color: var(--text-faint);
    font-size: 12px;
}

.verdict-sheet-skip {
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* 📸 "Visar bilden mat, dryck eller ett ställe?" — samma ark, före de första bildinläggen (feed.js) */
.photo-check-list {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.35;
}

.photo-check-list li {
    display: flex;
    gap: 8px;
}

.photo-check-warning {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--page-bg);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.photo-check-warning a {
    color: inherit;
    font-weight: 700;
}

.photo-check-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.photo-check-fine {
    margin: 10px 0 0;
    color: var(--text-faint);
    font-size: 12px;
}

/* "✍️ Dela vad du tyckte" · Klar — efter svaret från "Har du testat den än?" */
.verdict-sheet-next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.verdict-sheet-thanks {
    margin: 4px 0 0;
    font-size: 1.1rem;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 640px) {
    .verdict-sheet {
        width: 100vw;
        max-width: 100vw;
        margin: auto 0 0;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}


/* =====================================================
   📋 LISTA ELLER STORA KORT (Mat, Restauranger, Sparat, Testat)
   Samma kort på alla fyra sidor. Stora kort = rutnätet (.food-card-feed-grid).
   Lista (.layout-list) = kompakta rader — bild till vänster, text till höger —
   så att man ser fler träffar. Klassen sätts av partials/card_layout_init.html
   (och knapparna i partials/card_layout_toggle.html → card_layout.js), alltså
   av valet man gjort eller sidans förval. Hela raden är fortfarande en länk
   (.mh-card-link).
===================================================== */

.list-grid > .food-empty,
.list-grid > .restaurants-empty {
    grid-column: 1 / -1;
}

/* Surfplatta på höjden: två stora kort i bredd i stället för ett jättekort */
@media (min-width: 641px) and (max-width: 768px) {
    .list-grid:not(.layout-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Listan: en eller två rader i bredd, beroende på hur mycket plats det finns */
.food-card-feed-grid.layout-list {
    --feed-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
}




.layout-list .mh-card {
    flex-direction: row;
    align-items: stretch;
    border-radius: 16px;
}

/* Bilden: en ruta till vänster som fyller radens höjd. Den är inte längre
   ankare, så att ❤️ och chipsen placeras mot hela raden. */
.layout-list .mh-card-media {
    position: static;
    flex: 0 0 112px;
    aspect-ratio: auto;
    min-height: 112px;
}

.layout-list .mh-card-media img {
    position: absolute;
    inset: 0 auto 0 0;
    width: 112px;
}

.layout-list .mh-card-media::after {
    display: none;
}

/* Chipsen staplas på bilden. Bara de färgade (🏷️ ✨ ⏳ #1) och avståndet —
   kategorin och orten står redan i texten bredvid. */
.layout-list .mh-card-chips {
    top: 6px;
    left: 6px;
    right: auto;
    max-width: 100px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.layout-list .mh-chip {
    max-width: 100%;
    padding: 3px 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10.5px;
}

.layout-list .mh-chip:not([class*="mh-chip--"]):not([data-distance]) {
    display: none;
}

/* 📸 Nere i bildrutan (raden är ankare här) — bara ikonen, texten får inte plats */
.layout-list .mh-photo-credit {
    left: 6px;
    bottom: 6px;
    padding: 2px 6px;
}

.layout-list .mh-photo-credit-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ❤️ uppe till höger i raden */
.layout-list .save-btn.mh-save {
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    backdrop-filter: none;
    box-shadow: none;
}

.layout-list .save-btn.mh-save svg {
    width: 17px;
    height: 17px;
}

.layout-list .mh-card-body {
    min-width: 0;
    gap: 4px;
    padding: 10px 12px 12px;
}

.layout-list .mh-card-title {
    padding-right: 36px;   /* plats för ❤️ */
    font-size: 16px;
}

.layout-list .mh-card-meta {
    font-size: 13px;
}

.layout-list .mh-featured {
    padding: 6px 8px;
}

.layout-list .mh-featured small,
.layout-list .mh-card-more {
    display: none;
}

.layout-list .mh-card-actions {
    gap: 6px;
    padding-top: 6px;
}

.layout-list .mh-hype,
.layout-list .mh-comment {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
}

/* ===== main/css/header.css ===== */
/* =====================================================
   HEADER — BAS (partials/header.html)
   Vänster: M-märket, MatHajp och 📍 området på raden under.
   Mitten: sökfältet (search.css). Höger: chatt, notiser, profil.
   Flytande med clamp — layouten staplas bara om på mobil (≤768px).
===================================================== */

.site-header {
    --header-pop: header-pop .18s cubic-bezier(.2, .8, .2, 1);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: clamp(10px, 1.2vw, 14px) clamp(16px, 3vw, 28px);
    padding-top: max(10px, env(safe-area-inset-top));

    position: sticky;
    top: 0;
    z-index: 1000;

    gap: clamp(8px, 1.5vw, 20px);

    /* Överst smälter headern ihop med ramen — kanten och skuggan kommer när man scrollat */
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.site-header.is-scrolled {
    border-bottom-color: rgb(var(--shade-rgb) / .06);
    box-shadow: 0 6px 24px rgba(30, 42, 68, .07);
}

/* Glaseffekten ligger på ::before och inte på headern själv: backdrop-filter
   på headern gör att position: fixed inuti den (sök-overlayn, platsrutan på
   mobil) räknas från headern i stället för från fönstret. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: rgb(var(--surface-rgb) / 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
}

/* Öppen sök/platsruta ska ligga över bottenmenyn (z-index 9999) */
.site-header:has(.search-overlay-active, .location-dropdown.open) {
    z-index: 10001;
}

@keyframes header-pop {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.985);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        --header-pop: none;
    }
}


/* =====================================================
   VÄNSTER: märket + namnet + 📍 området
===================================================== */

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}

/* Samma M som appikonen på hemskärmen (main/images/pwa) */
.logo-mark {
    flex: none;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    border-radius: 13px;

    background: linear-gradient(155deg, var(--accent-yellow) -25%, var(--hype-orange) 62%);
    box-shadow:
        0 6px 16px rgba(255, 111, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .35);

    color: #fff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    text-decoration: none;

    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.logo-mark:hover {
    transform: rotate(-6deg) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .logo-mark:hover {
        transform: none;
    }
}

.header-brand {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.header-brand-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-left .logo {
    font-size: clamp(1.2rem, 1.35vw, 1.36rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--hype-orange);
    letter-spacing: -.03em;
    white-space: nowrap;
    text-decoration: none;
}

.header-left .logo:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
    border-radius: 6px;
}

.beta-badge {
    font-size: 0.66rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--orange-text);
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Bara på full dator-bredd — så fort headern blir trängre försvinner det */
@media (max-width: 1024px) {
    .beta-badge {
        display: none;
    }
}


/* ---------- 📍 Området (knappen under namnet) ---------- */

.location-picker {
    position: relative;
    min-width: 0;
}

.location-button {
    /* En tydlig knapp (pill), inte en underrubrik — nya användare ska se att man kan byta.
       Ingen max-width: 100% här — då blir knappen aldrig bredare än "MatHajp" ovanför
       (och "Hela Sverige" kapas). .location-text har en egen maxbredd. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;

    min-height: 26px;
    margin-top: 2px;
    padding: 0 7px 0 6px;

    border: 1px solid rgba(255, 111, 0, .32);
    border-radius: 999px;
    background: var(--orange-soft);

    color: var(--dark-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition: border-color .15s ease, background .15s ease;
}

/* Tryckytan når 44px på höjden (Apples minsta), fast knappen ser mindre ut */
.location-button::after {
    content: "";
    position: absolute;
    inset: -9px -4px;
}

.location-button:hover,
.location-button[aria-expanded="true"] {
    border-color: var(--hype-orange);
    background: var(--orange-soft-2);
}

.location-button:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 1px;
}

.location-icon,
.location-arrow {
    display: flex;
    flex: none;
}

.location-icon {
    color: var(--hype-orange);
}

.location-icon .nav-icon {
    width: 15px;
    height: 15px;
    stroke-width: 2.3;
}

.location-icon .nav-icon .f {
    fill: currentColor;
    fill-opacity: .18;
}

.location-text {
    max-width: clamp(110px, 11vw, 170px);
    /* overflow: hidden klipper annars g/j/p med knappens line-height: 1 */
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-arrow .nav-icon {
    width: 13px;
    height: 13px;
    stroke-width: 2.6;
    color: var(--orange-text);
    transition: transform .2s ease;
}

.location-button[aria-expanded="true"] .location-arrow .nav-icon {
    transform: rotate(180deg);
}


/* =====================================================
   MITTEN: sökfältet — flytande, alltid centrerat
   (fältet och förslagen: search.css)
===================================================== */

.header-center,
.header-right {
    display: flex;
    align-items: center;
}

.header-center {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;   /* låter flexboxen faktiskt krympa vid behov */
}

.search-wrapper {
    position: relative;

    width: 100%;
    min-width: 220px;                       /* absolut golv, aldrig smalare */
    max-width: 580px;

    flex: 1 1 clamp(220px, 40vw, 580px);    /* flyter mjukt mellan golv och tak */

    margin: 0 auto;                         /* garanterar centrering oavsett flex-beteende */
}

/* Stängknapp för sök-overlay — osynlig på desktop, se mobil-block nedan */
.search-overlay-close {
    display: none;
}


/* =====================================================
   HÖGER: runda ikonknappar (sök på mobil, chatt, notiser, ☰)
   Mjuka fyllda cirklar utan ram, som Facebook/Instagram.
   Öppen meny = orange.
===================================================== */

.header-right {
    flex-shrink: 0;
    gap: clamp(6px, .8vw, 10px);
}

.mobile-search-toggle {
    display: none;   /* bara ≤768px, se nedan */
}

.mobile-search-toggle,
.site-header .notif-bell {
    position: relative;
    flex-shrink: 0;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;

    border: 0;
    background: var(--surface-2);
    color: var(--dark-text);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.mobile-search-toggle:hover,
.site-header .notif-bell:hover {
    background: var(--surface-3);
}

.mobile-search-toggle:active,
.site-header .notif-bell:active {
    transform: scale(.94);
}

.site-header .notif-bell[aria-expanded="true"],
.site-header .header-menu-btn[aria-current="page"] {
    background: var(--orange-soft);
    color: var(--hype-orange);
}

.mobile-search-toggle:focus-visible,
.site-header .notif-bell:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.mobile-search-toggle .nav-icon,
.site-header .notif-bell .nav-icon {
    width: 21px;
    height: 21px;
}

/* Siffran: en ring i headerns färg runt, så den "skärs ut" ur cirkeln */
.site-header .notif-badge {
    top: -3px;
    right: -3px;
    border-color: rgb(var(--surface-rgb));
}

/* ☰ Menyn — bara mobil (≤768px), där den ersätter profilbilden */
.site-header .header-menu-btn {
    display: none;
}


/* =====================================================
   🌙 TEMA-VÄLJAREN ☀️ / 🌙 / 📱 (partials/theme_switch.html)
   I profilmenyn, Menyn (/meny/) och längst ner i sidomenyn
===================================================== */

.theme-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.theme-switch-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.theme-switch-options {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgb(var(--shade-rgb) / .06);
}

.theme-switch button {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 5px 10px;
    border: none;
    border-radius: 999px;
    background: transparent;

    color: var(--text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.theme-switch button:hover {
    color: var(--dark-text);
}

.theme-switch button[aria-pressed="true"] {
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.theme-switch button:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 1px;
}

/* I profilmenyn: en egen rad mellan länkarna */
.dropdown-theme {
    margin: 4px 0;
    padding: 10px 12px;
    border-top: 1px solid rgb(var(--shade-rgb) / .06);
    border-bottom: 1px solid rgb(var(--shade-rgb) / .06);
}


/* =====================================================
   PROFILBILDEN + PROFILMENYN
===================================================== */

/* Profilknappen: samma avatar som överallt (community/_avatar.html → .avatar i feed.css),
   så bilden beskärs rund i stället för att tryckas ihop, och bokstaven/ringen följer med */
.profile-menu {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar-btn {
    --header-avatar: 42px;

    display: block;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;

    cursor: pointer;
    transition: transform .2s;
    -webkit-tap-highlight-color: transparent;
}

.profile-avatar-btn .avatar {
    display: inline-flex;
    width: var(--header-avatar);
    height: var(--header-avatar);
    font-size: calc(var(--header-avatar) * .42);
    vertical-align: top;
}

.profile-avatar-btn:hover {
    transform: scale(1.05);
}

.profile-avatar-btn[aria-expanded="true"] .avatar {
    box-shadow: 0 0 0 3px var(--orange-soft-2);
}

.profile-avatar-btn:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);

    min-width: 250px;
    padding: 6px;
    flex-direction: column;

    background: rgb(var(--surface-rgb) / .96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);

    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(30, 42, 68, .16);

    animation: var(--header-pop);
    transform-origin: top right;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 12px;
    border-radius: 12px;

    color: var(--dark-text);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.dropdown-menu a .nav-icon {
    width: 19px;
    height: 19px;
    color: var(--text-faint);
    transition: color .15s ease;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
    background: var(--orange-soft);
    color: var(--orange-text);
    outline: none;
}

.dropdown-menu a:hover .nav-icon,
.dropdown-menu a:focus-visible .nav-icon {
    color: currentColor;
}

/* 👤 Överst: bilden och namnet (som .menu-profile på ☰ Menyn) */
.dropdown-menu .dropdown-profile {
    gap: 12px;
    margin-bottom: 4px;
    padding: 10px 12px;
}

.dropdown-profile .avatar {
    flex: none;
    width: 42px;
    height: 42px;
    font-size: 18px;
}

.dropdown-profile span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dropdown-profile strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-profile small {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}


/* =====================================================
   KNAPPAR (utloggad): Logga in / Skapa konto
===================================================== */

.auth-btn, .profile-btn, .suggest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: clamp(6px, 0.8vw, 8px) clamp(12px, 1.5vw, 20px);
    border-radius: 25px;

    font-weight: 500;
    font-size: clamp(0.78rem, 0.9vw, 0.9rem);

    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Logga in */
.login-btn {
    background: var(--pure-white);
    color: var(--hype-orange);
    border: 2px solid var(--hype-orange);
    border-radius: 25px;
    font-weight: 600;
    padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1.5vw, 18px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-btn:hover {
    background: var(--hype-orange);
    color: #fff;
    transform: translateY(-1px);
}

/* Skapa konto */
.signup-btn, .suggest-btn {
    background: var(--green-engaging);
    color: #fff;
    border: 2px solid var(--green-engaging);
    border-radius: 25px;
    font-weight: 600;
    padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1.5vw, 18px);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 168, 101, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
}

.signup-btn:hover, .suggest-btn:hover {
    background: #008c52;
    border-color: #008c52;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 168, 101, 0.35);
}

/* Profil / Föreslå-knappar */
.profile-btn {
    background: var(--pure-white);
    color: var(--hype-orange);
    border: 2px solid var(--hype-orange);
}

.profile-btn:hover {
    background: var(--green-engaging);
    color: #fff;
    border-color: var(--green-engaging);
}


/* === UPLOAD BUTTON (PRIMARY CTA) === */
.upload-btn-image-header {
    background: rgba(0,168,101,0.1);
    color: var(--green-engaging);
    border: 1px solid rgba(0,168,101,0.2);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 600;
    transition: 0.2s;
}

.upload-btn-image-header:hover {
    background: var(--green-engaging);
    color: white;
}

.create-hype-btn {
    background: var(--hype-orange);
    color: white;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(255,111,0,0.25);
    transition: 0.2s;
}

.create-hype-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,111,0,0.35);
}


/* =====================================================
   📍 PLATSRUTAN (öppnas från områdesknappen)
===================================================== */

.gps-location-btn .nav-icon,
.location-search-box .nav-icon,
.location-all-btn .nav-icon {
    width: 18px;
    height: 18px;
}

.location-search-box .nav-icon {
    color: var(--text-faint);
}

/* Rakt under märket: vänsterkanten i linje med M:et */
.location-dropdown {
    position: absolute;
    left: -50px;
    top: calc(100% + 14px);
    width: 340px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 20px;
    padding: 20px;

    box-shadow: 0 20px 50px rgba(30, 42, 68, .16);
    display: none;
    z-index: 999;
}

.location-dropdown.open {
    display: block;
    animation: var(--header-pop);
    transform-origin: top left;
}

.location-header h3 {
    margin: 0;
    font-size: 18px;
}

.location-header p {
    margin: 5px 0 15px;
    color: var(--text-muted);
    font-size: 14px;
}

.location-search-box {
    display: flex;
    align-items: center;
    gap: 10px;

    background: var(--soft-gray);
    padding: 12px 15px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.location-search-box:focus-within {
    background: var(--pure-white);
    border-color: rgba(255, 111, 0, .45);
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .12);
}

.location-search-box input {
    border: none;
    outline: none;
    background: none;
    width: 100%;
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
}

/* Sökträffarna: samma nål-bricka som ortknappen (JS bygger bara namn + område) */
.location-result {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 8px 10px 8px 6px;
    border-radius: 12px;
    cursor: pointer;
}

.location-result::before {
    content: "";
    grid-row: span 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.location-result span {
    font-weight: 700;
}

.location-result:hover {
    background: var(--soft-gray);
}

.location-result small {
    color: var(--text-faint);
    margin-top: 2px;
}

/* GPS: "Nära mig" — stor rad med orange bricka, som ortknappens Nära mig */
.gps-location-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;

    background: var(--orange-soft);
    color: var(--orange-text);
    border: 1px solid rgba(255,111,0,0.25);

    min-height: 56px;
    padding: 8px 14px 8px 8px;
    border-radius: 16px;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease;
}

.gps-location-btn:hover {
    border-color: var(--hype-orange);
}

/* "Hämtar din plats…" medan telefonen letar (header.html → gpsBusy) */
.gps-location-btn[aria-busy="true"],
.place-chip[aria-busy="true"] {
    cursor: progress;
    opacity: .75;
}

.gps-location-btn[aria-busy="true"] .nav-icon,
.place-chip[aria-busy="true"] .place-chip-icon {
    animation: gps-pulse 1s ease-in-out infinite alternate;
}

@keyframes gps-pulse {
    to { opacity: .45; }
}

.gps-location-btn .nav-icon {
    flex: none;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 12px;
    background: var(--hype-orange);
    color: #fff;
    stroke-width: 2.1;
}

.location-divider {
    text-align: center;
    margin: 14px 0;
    font-size: 13px;
    color: var(--text-faint);
}

.location-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    margin-top: 12px;
    padding: 10px;

    background: transparent;
    border: 1px dashed rgb(var(--shade-rgb) / .15);
    border-radius: 14px;

    color: var(--text-2);
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.location-all-btn:hover {
    background: rgb(var(--shade-rgb) / 0.04);
    color: var(--dark-text);
}

/* 🗺️ "Se restauranger på kartan" — en länk med knappens utseende */
.location-map-link {
    text-decoration: none;
}

.location-all-btn + .location-map-link {
    margin-top: 8px;
}


/* =====================================================
   SURFPLATTA / LITEN LAPTOP (769–1024px)
   Allt stannar på EN rad — bara tätare, och sökfältet får
   krympa mer innan det blir trångt
===================================================== */

@media (min-width: 769px) and (max-width: 1024px) {

    .site-header {
        padding-left: 16px;
        padding-right: 16px;
        gap: 12px;
    }

    .header-right {
        gap: 8px;
    }

    .search-wrapper {
        min-width: 160px;
        flex-basis: 160px;
    }

    .location-text {
        max-width: 110px;
    }

    .login-btn,
    .signup-btn {
        padding: 6px 12px;
        font-size: 0.82rem;
    }

}


/* =====================================================
   MOBIL (768px och nedåt): EN rad, ca 58px hög.
   Märket + namnet med 📍 området under till vänster, runda
   ikonknappar till höger. Sökfältet blir en ikon + fullskärms-
   overlay. "Logga in" finns i bottenmenyn, så headern visar
   bara "Skapa konto" för utloggade.
===================================================== */

@media (max-width: 768px) {

    .site-header {
        --header-height: 61px;   /* märket + två rader (namnet, området) + padding */

        min-height: var(--header-height);
        padding: 8px 12px;
        padding-top: max(8px, env(safe-area-inset-top));
        gap: 8px;
        transition: transform .25s ease, border-color .2s ease, box-shadow .2s ease;
    }

    /* Scroll nedåt → headern glider upp (header.html, "DÖLJ HEADERN").
       Transform bara när den är dold: en transform gör annars att
       position: fixed inuti headern räknas från den. Extra 12px så
       skuggan inte syns. */
    .site-header.is-scroll-hidden {
        transform: translateY(calc(-100% - 12px));
    }

    @media (prefers-reduced-motion: reduce) {
        .site-header {
            transition: none;
        }
    }

    .header-left {
        gap: 9px;
    }

    .logo-mark {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 20px;
        box-shadow:
            0 4px 12px rgba(255, 111, 0, .24),
            inset 0 1px 0 rgba(255, 255, 255, .35);
    }

    .header-left .logo {
        font-size: 1.14rem;
        line-height: 1.05;
    }

    /* Resten av raden (knapparna till höger, märket) tar ~270px — längre namn får "…" */
    .location-text {
        max-width: min(170px, calc(100vw - 280px));
    }

    .header-right {
        gap: 6px;
        flex-wrap: nowrap;
    }

    /* Runda ikonknappar i samma storlek */
    .mobile-search-toggle,
    .site-header .notif-bell {
        width: 38px;
        height: 38px;
    }

    .mobile-search-toggle .nav-icon,
    .site-header .notif-bell .nav-icon {
        width: 20px;
        height: 20px;
    }

    .site-header .login-btn {
        display: none;
    }

    .site-header .signup-btn {
        flex-shrink: 0;
        padding: 7px 14px;
        font-size: 0.82rem;
        box-shadow: none;
    }

    /* Profilbilden finns i bottenmenyn (base.html) — här blir den ☰ Meny */
    .site-header .profile-menu {
        display: none;
    }

    .site-header .header-menu-btn {
        display: inline-flex;
    }

    /* Platsrutan: hela bredden, under headern */
    .location-dropdown {
        position: fixed;
        left: 12px;
        right: 12px;
        top: calc(max(8px, env(safe-area-inset-top)) + var(--header-height));
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--header-height) - 24px);
        overflow-y: auto;
        border-radius: 20px;
    }

    .autocomplete-list {
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
    }


    /* --- Sök blir ikon istället för inline-fält --- */

    .header-center {
        display: none;      /* dold i vanligt flöde ... */
    }

    .mobile-search-toggle {
        display: inline-flex;   /* ... ikonen tar dess plats i header-right */
    }

    /* ... och blir fullskärms-overlay när aktiv.
       Rutnät: [sökfält][Avbryt] överst, förslagen i full bredd under.
       .search-wrapper blir "osynlig" så att fältet och listan
       hamnar direkt i rutnätet. */

    .header-center.search-overlay-active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;

        position: fixed;
        inset: 0;
        z-index: 2000;

        background: var(--pure-white);
        padding: max(12px, env(safe-area-inset-top)) 16px 0;

        animation: search-overlay-in .2s ease;
    }

    @keyframes search-overlay-in {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .header-center.search-overlay-active {
            animation: none;
        }
    }

    .header-center.search-overlay-active .search-wrapper {
        display: contents;
    }

    .header-center.search-overlay-active .search-bar {
        grid-column: 1;
        grid-row: 1;
    }

    .header-center.search-overlay-active .search-overlay-close {
        grid-column: 2;
        grid-row: 1;

        display: block;
        padding: 8px 0;

        border: 0;
        background: none;
        color: var(--hype-orange);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .header-center.search-overlay-active .search-bar input {
        font-size: 16px;   /* under 16px zoomar iOS in vid fokus */
    }

    .header-center.search-overlay-active .autocomplete-list {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: stretch;

        position: static;
        max-height: none;
        margin: 10px -16px 0;
        padding: 0 10px max(16px, env(safe-area-inset-bottom));

        border: 0;
        border-top: 1px solid rgb(var(--ink-rgb) / .08);
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    .header-center.search-overlay-active .ac-heading:first-child {
        padding-top: 16px;
    }

    .header-center.search-overlay-active .ac-thumb {
        width: 48px;
        height: 48px;
    }

}


/* =====================================================
   480px — telefoner: lite mindre knappar, så att områdets
   namn får plats under MatHajp ("Hela Sverige", "Södermalm")
===================================================== */

@media (max-width: 480px) {

    .header-right {
        gap: 5px;
    }

    .mobile-search-toggle,
    .site-header .notif-bell {
        width: 36px;
        height: 36px;
    }

    .location-button {
        gap: 3px;
        padding: 0 6px 0 5px;
    }

}


/* =====================================================
   360px — mycket smala mobiler (äldre Android)
===================================================== */

@media (max-width: 360px) {

    .site-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .site-header .signup-btn {
        padding: 7px 9px;
        font-size: 0.78rem;
    }

    .header-left {
        gap: 7px;
    }

    .logo-mark {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 18px;
    }

    .location-text {
        max-width: calc(100vw - 250px);
    }

    /* Mindre runda knappar så att allt får plats även på 320px:
       inloggad fyra (sök, chatt, notiser, ☰ meny) */
    .mobile-search-toggle,
    .site-header .notif-bell {
        width: 34px;
        height: 34px;
    }

    .header-right {
        gap: 4px;
    }

}

/* ===== main/css/auth.css ===== */
/* ============================= */
/* AUTH PAGE WRAPPER (VIKTIG!) */
/* ============================= */

.auth-page {
    min-height: 100vh;
    background: var(--soft-gray);
}

/* ============================= */
/* LAYOUT */
/* ============================= */

.auth-page .login-container,
.auth-page .signup-container {
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: space-between;
    padding: 60px 20px;
}

/* LEFT SIDE */
.auth-page .login-left,
.auth-page .signup-left {
    flex: 1;
    max-width: 500px;
}

.auth-page .login-left h1,
.auth-page .signup-left h1 {
    color: var(--hype-orange);
    font-size: 3rem;
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.auth-page .login-left p,
.auth-page .signup-left p {
    font-size: 1.15rem;
    color: var(--dark-text);
    line-height: 1.6;
    opacity: 0.9;
}

/* RIGHT SIDE */
.auth-page .login-right,
.auth-page .signup-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* ============================= */
/* CARD */
/* ============================= */

.auth-page .login-card,
.auth-page .signup-card {
    background: var(--pure-white);
    padding: 38px;
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-page .login-card:hover,
.auth-page .signup-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}

.auth-page .login-card h2,
.auth-page .signup-card h2 {
    margin-bottom: 20px;
    font-size: 1.7rem;
    font-weight: 600;
}

/* ============================= */
/* FORM */
/* ============================= */

.auth-page .form-group {
    margin-bottom: 16px;
}

.auth-page .form-group label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.auth-page .form-group input,
.auth-page .form-group select {
    width: 100%;
    color: var(--dark-text);
    padding: 13px 15px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--pure-white);
}

/* 👁️ Öga som visar/döljer lösenordet (password_toggle.js) */
.pw-field {
    position: relative;
    display: block;
}

.pw-field input {
    padding-right: 48px !important;
}

/* Edge visar annars ett eget öga bredvid vårt */
.pw-field input::-ms-reveal,
.pw-field input::-ms-clear {
    display: none;
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
    color: var(--hype-orange);
}

.pw-toggle:hover {
    background: rgba(0,0,0,0.05);
}

/* 🎂 Födelsedatum: år, månad och dag bredvid varandra */
.auth-page .birth-date {
    border: 0;
    padding: 0;
    margin: 0 0 16px;   /* fieldset har egen sidomarginal i webbläsaren */
    min-width: 0;
}

.auth-page .birth-date legend {
    font-size: 0.85rem;
    font-weight: 700;   /* som etiketterna ovanför */
    margin-bottom: 6px;
    padding: 0;
    color: var(--text-muted);
}

.auth-page .birth-date__fields {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.9fr;
    gap: 8px;
}

/* Etiketterna finns för skärmläsare — rullistornas första val säger redan År/Månad/Dag */
.auth-page .birth-date__fields label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.auth-page .birth-date__fields select {
    padding: 13px 10px;
}

/* Focus state (premium feel) */
.auth-page .form-group select:focus,
.auth-page .form-group input:focus {
    outline: none;
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 3px rgba(255,111,0,0.15);
}

/* ============================= */
/* BUTTON */
/* ============================= */

.primary-btn {
    background-color: var(--green-engaging);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.primary-btn:hover {
    background-color: #008f55;
    transform: translateY(-1px);
}

.auth-page .login-btn,
.auth-page .signup-btn {
    width: 100%;
    padding: 13px;
    background: var(--green-engaging);
    color: white;
    border: none;
    border-radius: 28px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,168,101,0.25);
}

.auth-page .login-btn:hover,
.auth-page .signup-btn:hover {
    background: #008f55;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,168,101,0.35);
}

.auth-page .login-btn:active,
.auth-page .signup-btn:active {
    transform: scale(0.97);
}

/* ============================= */
/* TEXT / LINKS */
/* ============================= */

.auth-page .login-text {
    text-align: center;
    font-size: 0.9rem;
}

.auth-page .login-text a {
    color: var(--social-blue);
    font-weight: 600;
    text-decoration: none;
    position: relative;
}

/* Subtil underline animation */
.auth-page .login-text a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background: var(--social-blue);
    transition: width 0.2s ease;
}

.auth-page .login-text a:hover::after {
    width: 100%;
}

/* Divider */
.auth-page .login-card hr,
.auth-page .signup-card hr {
    margin: 22px 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* ============================= */
/* ERROR */
/* ============================= */

.auth-page .error-text {
    color: var(--red-text);
    font-size: 0.85rem;
    margin-top: 10px;
}

.form-errors {
    background: rgba(255, 0, 0, 0.08);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
}

.error-message {
    color: #ff3b3b;
    margin: 5px 0;
    font-size: 14px;
    font-weight: 600;
}

/* ============================= */
/* SMALL DETAILS (premium feel) */
/* ============================= */

/* Smooth fade-in */
.auth-page .login-card,
.auth-page .signup-card {
    animation: fadeInUp 0.4s ease;
}

/* 🎂 Under 13 (signup_too_young.html) */
.auth-page .signup-too-young {
    margin: 40px auto;
    text-align: center;
}

.auth-page .signup-too-young .signup-btn {
    display: block;
    box-sizing: border-box;
    text-decoration: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 900px) {
    .auth-page .login-container,
    .auth-page .signup-container {
        flex-direction: column;
        gap: 30px;
        padding: 40px 15px;
    }

    .auth-page .login-left,
    .auth-page .signup-left {
        text-align: center;
    }

    .auth-page .login-left h1,
    .auth-page .signup-left h1 {
        font-size: 2.2rem;
    }

    .auth-page .login-left p,
    .auth-page .signup-left p {
        font-size: 1rem;
    }

    .auth-page .login-right,
    .auth-page .signup-right {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .auth-page .login-card,
    .auth-page .signup-card {
        padding: 25px;
        border-radius: 12px;
    }

    .auth-page .login-left h1,
    .auth-page .signup-left h1 {
        font-size: 1.8rem;
    }
}

/* ===== main/css/food_detail.css ===== */
/* =====================================================
   RÄTTSIDAN (food/food_detail.html)
   .fd-crumbs/.fd-hero/.fd-stats/.fd-actions/.fd-save används även
   av restaurangsidan (restaurant_detail.css har bara det unika).
   Samma formspråk som Profil/Upptäck: vita kort, rundade hörn,
   chips. Återanvänder .explore-page/.explore-section (explore.css),
   .mh-hype/.mh-comment/.mh-ghost/.mh-chip (food_cards.css) och
   .home-section-head/.home-rail-more (home_rails.css).
===================================================== */


/* ---------- Brödsmulor ---------- */

.fd-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 14px;

    color: var(--text-muted);
    font-size: 14px;
}

.fd-crumbs a {
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
}

.fd-crumbs a:hover {
    color: var(--hype-orange);
}

.fd-crumbs [aria-current] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--dark-text);
    font-weight: 700;
}


/* ---------- Rätten: bild + info ---------- */

.fd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    overflow: hidden;

    border-radius: 24px;

    background:
        radial-gradient(circle at top right, rgba(255, 111, 0, .1), transparent 55%),
        var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

/* Desktop: bilden fyller hela radens höjd (styrs av infokolumnen) */
.fd-media {
    position: relative;
    min-height: 380px;
    background: var(--surface-warm);   /* syns medan bilden laddar */
}

.fd-media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fd-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;

    padding: 28px;
}

.fd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Chipsen ligger på vitt här, inte på en bild */
.fd-chip {
    background: var(--surface-2);
    backdrop-filter: none;
    box-shadow: none;
    text-decoration: none;
}

a.fd-chip:hover {
    background: var(--orange-soft);
    color: var(--orange-text);
}

/* 🔥 "#2 Trendigt i Nacka" (partials/trending_badge.html) — färgen från
   .mh-chip--rank, länk till Trendigt */
.fd-trend-chip {
    backdrop-filter: none;
    box-shadow: none;
    text-decoration: none;
    transition: filter .2s ease;
}

.fd-trend-chip:hover {
    filter: brightness(.94);
}

.fd-trend-chip:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.fd-chip--price {
    font-variant-numeric: tabular-nums;
}

.fd-title {
    margin: 0;

    color: var(--dark-text);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.fd-restaurant-link {
    align-self: flex-start;

    color: var(--social-blue);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.fd-restaurant-link:hover {
    color: var(--hype-orange);
}

.fd-description {
    margin: 0;

    color: var(--text-2);
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


/* ⏳ "Kommer snart" / "Slut för den här gången" — rätten finns inte på menyn just nu */

.fd-availability {
    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 12px 14px;
    border-radius: 14px;

    font-size: 14px;
    line-height: 1.5;
}

.fd-availability strong {
    font-size: 15px;
}

.fd-availability span {
    color: var(--text-2);
}

.fd-availability a {
    color: inherit;
    font-weight: 700;
    white-space: nowrap;
}

.fd-availability a:hover {
    color: var(--hype-orange);
}

.fd-availability--soon {
    background: var(--blue-soft);
    color: var(--blue-text);
}

.fd-availability--ended {
    background: var(--surface-2);
    color: var(--dark-text);
}


/* Siffror: hajp · kommentarer */

.fd-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

/* Rättsidan: hajp · inlägg · kommentarer */
.fd-stats--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fd-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 12px 14px;
    border-radius: 14px;

    background: rgb(var(--surface-rgb) / .7);
    border: 1px solid rgb(var(--ink-rgb) / .08);

    color: inherit;
    text-decoration: none;

    transition: border-color .2s ease, background .2s ease;
}

a.fd-stat:hover {
    border-color: rgba(255, 111, 0, .4);
    background: var(--pure-white);
}

.fd-stat strong {
    color: var(--dark-text);
    font-size: 1.3rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.fd-stat > span {
    color: var(--text-muted);
    font-size: 13px;
}


/* 🏅 "Värt hajpen?" (partials/verdict_box.html, verdict.js) */

.fd-chips .mh-chip--verified {
    backdrop-filter: none;
    box-shadow: none;
}

/* Orange tonad så att den syns bland korten; gul när rätten är hajp-verifierad.
   Långa ord får brytas — rutan ligger i en smal kolumn (dp-aside) och på mobil. */
.verdict-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;

    padding: 16px;
    border-radius: 20px;

    background: var(--orange-soft);
    border: 1px solid rgb(255 111 0 / .3);
    overflow-wrap: anywhere;
}

:root[data-theme="dark"] .verdict-box:not(.is-verified) {
    border-color: rgb(255 111 0 / .38);
}

.verdict-box.is-verified {
    border-color: rgba(255, 193, 7, .7);
    background: var(--yellow-soft);
}

.verdict-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.verdict-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7a1a 0%, #e8520c 45%, #d4430b 100%);
    color: #fff;
}

.verdict-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--dark-text);
    font-size: 1.1rem;
    font-weight: 900;
}

.verdict-anon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--orange-soft-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
}

:root[data-theme="dark"] .verdict-anon {
    background: rgb(255 255 255 / .07);
}

.verdict-badge[hidden],
.verdict-box [hidden] {
    display: none;
}

.verdict-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.verdict-score {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    color: var(--text-2);
    font-size: 15px;
}

.verdict-score strong {
    color: var(--orange-text);
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.verdict-count {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

/* Tre delar i en stapel: 🔥 orange · 😐 grå · 🧊 blå (flex-grow = antal svar) */
.verdict-bar {
    display: flex;
    gap: 2px;
    height: 10px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-3);
}

.verdict-bar span {
    flex-basis: 0;
    min-width: 0;
    transition: flex-grow .3s ease;
}

.verdict-bar-worth     { background: var(--hype-orange); }
.verdict-bar-ok        { background: var(--surface-4); }
.verdict-bar-overhyped { background: #38bdf8; }

/* Tre lika breda rutor — "🧊 4 %" över "överhajpat" ryms även i smal kolumn */
.verdict-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;

    color: var(--text-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.verdict-split strong {
    display: block;
    color: var(--dark-text);
    font-size: 15px;
}

/* "1 av 5 svar – resultatet visas vid 5" + en prick per svar */
.verdict-pending {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.verdict-pending-text {
    margin: 0;
    min-width: 0;
    color: var(--text-2);
    font-size: 14px;
}

.verdict-pending-text strong {
    color: var(--dark-text);
    font-weight: 800;
}

.verdict-dots {
    display: flex;
    gap: 5px;
}

.verdict-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(255 111 0 / .22);
    transition: background .2s ease;
}

:root[data-theme="dark"] .verdict-dot {
    background: var(--orange-soft-2);
}

.verdict-dot.is-filled,
:root[data-theme="dark"] .verdict-dot.is-filled {
    background: var(--hype-orange);
}

.verdict-ask {
    margin: 0;
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 700;
}

/* Knapparna 🔥 😐 🧊: food_cards.css (.verdict-choice, delas med frågan efter Testat).
   I rutan: emojin ovanför ordet, så att "Överhajpat" ryms i smala kolumner. */
.verdict-box .verdict-choice {
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
    padding: 8px 4px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.15;
}

.verdict-box .verdict-choice > span {
    font-size: 20px;
    line-height: 1;
}

.verdict-box .verdict-choice--worth.is-active {
    background: linear-gradient(135deg, #ff7a1a 0%, #e8520c 45%, #d4430b 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(232, 82, 12, .35);
}

.verdict-note {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

.verdict-thanks {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--orange-soft-2);
    color: var(--orange-text);
}

.verdict-box.is-verified .verdict-thanks {
    background: rgb(var(--surface-rgb) / .6);
}

.verdict-thanks svg {
    flex: 0 0 16px;
    margin-top: 1px;
}

.verdict-thanks p {
    min-width: 0;
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

.verdict-remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--orange-text);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.verdict-fine {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid rgb(255 111 0 / .2);
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.45;
}

.verdict-box.is-verified .verdict-fine {
    border-top-color: rgba(255, 193, 7, .5);
}

.verdict-fine a {
    color: var(--orange-text);
    font-weight: 700;
}


/* Knappar: två rader.
   .fd-actions-main = det man gör med rätten/restaurangen (Hajpa, Följ,
   Vill testa/besöka) — stora. .fd-actions-more = vidare härifrån (Ska vi?,
   Kommentera/Vad folk säger, Hantera sidan) — vanlig storlek. */

.fd-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: auto;   /* längst ner i infokolumnen */
    padding-top: 8px;
}

.fd-actions-main,
.fd-actions-more {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fd-actions-main .mh-hype,
.save-btn.fd-save {
    height: 46px;
    padding: 0 20px;
    font-size: 15px;
}

.fd-hype .mh-hype-icon {
    width: 34px;
    height: 34px;
    margin-left: -15px;
    font-size: 18px;
}


/* "Vill testa!" — .save-btn.fd-save väger tyngre än de gamla
   globala .save-btn-reglerna (LEGACY i food_cards.css) */

.save-btn.fd-save {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    border-radius: 999px;
    border: 1.5px solid rgb(var(--ink-rgb) / .12);
    background: var(--pure-white);
    backdrop-filter: none;
    box-shadow: none;

    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease;
}

.save-btn.fd-save:hover {
    border-color: var(--heart-red);
    color: var(--heart-red);
}

.save-btn.fd-save:active {
    transform: scale(.96);
}

.save-btn.fd-save.active {
    border-color: rgba(255, 45, 85, .35);
    background: var(--red-soft);
    box-shadow: none;
    color: var(--heart-red);
}

.save-btn.fd-save .save-icon,
.save-btn.fd-save.active .save-icon {
    display: inline-flex;
    font-size: inherit;
    transform: none;
}

.save-btn.fd-save svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

.save-btn.fd-save.active svg {
    fill: currentColor;
}

.save-btn.fd-save.pop svg {
    animation: mh-pop .45s cubic-bezier(.3, 1.6, .5, 1);
}

.save-btn.fd-save .save-text {
    font-size: inherit;
}

.save-btn.fd-save:focus-visible,
.fd-stat:focus-visible,
.fd-restaurant:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- Sektioner ---------- */

.fd-section {
    scroll-margin-top: 90px;   /* #posts hamnar inte under headern */
}

/* ✍️ Gamla länkar till #comments (rättens tråd före 27 okt 2026) landar i "Vad folk säger" */
.post-section-anchor {
    display: block;
    scroll-margin-top: 90px;
}

/* ✍️ "Berätta vad du åt …" under rubriken (partials/write_about_hint.html): vad man skriver
   här, och att man svarar någon under deras inlägg — samma rad på rätt- och restaurangsidan */
.write-about-hint {
    margin: -4px 0 14px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.write-about-hint span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

.write-about-hint strong {
    color: var(--text-2);
    font-weight: 700;
}

/* Inläggsflödet är byggt för ~680px (feed.css centrerar det) —
   här linjerar det med rubrikerna till vänster i stället */
.fd-section.post-section {
    max-width: 720px;
    margin: 36px 0 0;
}


/* Serveras hos */

.fd-restaurant {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 14px;
    border-radius: 20px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);

    color: inherit;
    text-decoration: none;

    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.fd-restaurant:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 111, 0, .4);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .1);
}

.fd-restaurant-thumb {
    flex-shrink: 0;

    width: 84px;
    height: 84px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--surface-warm);
}

.fd-restaurant-text {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fd-restaurant-text strong {
    color: var(--dark-text);
    font-size: 17px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.fd-restaurant-text small {
    color: var(--text-muted);
    font-size: 14px;
}

.fd-restaurant-cta {
    flex-shrink: 0;
}


/* ---------- 🔗 Kedjans ställen (partials/branch_list.html) ---------- */

.fd-branches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 10px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-branch {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    box-sizing: border-box;

    padding: 12px 14px;
    border-radius: 16px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);

    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease;
}

.fd-branch:hover {
    border-color: rgba(255, 111, 0, .4);
}

.fd-branch:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.fd-branch-text {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fd-branch-text strong {
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.fd-branch-text small {
    color: var(--text-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.fd-branch-status {
    flex-shrink: 0;
    color: var(--red-text);
    font-size: 13px;
    font-weight: 700;
}

.fd-branch-status.is-open {
    color: var(--green-text);
}

.fd-branch-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* 📍 Avståndet till stället (distance.js, bara med en position) */
.fd-branch-distance {
    flex-shrink: 0;
    color: var(--blue-text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.fd-branch-distance[hidden] {
    display: none;
}

.fd-branches-title {
    margin: 20px 0 10px;
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 800;
}

.fd-branches-more {
    margin-top: 10px;
}

.fd-branches-more summary {
    margin-bottom: 10px;
    color: var(--social-blue);
    font-weight: 700;
    cursor: pointer;
}


/* ---------- Mindre skärmar ---------- */

@media (max-width: 900px) {

    .fd-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .fd-info {
        padding: 22px 20px;
    }

}

@media (max-width: 600px) {

    .fd-hero {
        border-radius: 18px;
    }

    .fd-media {
        aspect-ratio: 4 / 3;
    }

    .fd-info {
        padding: 18px 16px;
    }

    /* Tre siffror i bredd (samma som restaurangsidans .rd-stats) */
    .fd-stats--3 {
        gap: 6px;
    }

    .fd-stats--3 .fd-stat {
        padding: 10px 8px;
    }

    .fd-stats--3 .fd-stat strong {
        font-size: 1.05rem;
    }

    /* Rad 1 fyller bredden efter innehåll (Hajpa · Följ · Vill besöka
       får plats bredvid varandra), rad 2 delar lika */
    .fd-actions-main > * {
        flex: 1 1 auto;
        justify-content: center;
    }

    .fd-actions-main .mh-hype,
    .fd-actions-main .follow-btn,
    .fd-actions-main .save-btn.fd-save {
        min-width: 0;
        padding: 0 12px;
        font-size: 14px;
    }

    .fd-hype .mh-hype-icon {
        margin-left: -7px;
    }

    .fd-actions-more > * {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }
    .fd-restaurant {
        flex-wrap: wrap;
    }

    .fd-restaurant-thumb {
        width: 64px;
        height: 64px;
    }

    .fd-restaurant-cta {
        width: 100%;
        justify-content: center;
    }

}

@media (prefers-reduced-motion: reduce) {

    .fd-restaurant,
    .fd-stat,
    .save-btn.fd-save {
        transition: none;
    }

    .fd-restaurant:hover {
        transform: none;
    }

    .save-btn.fd-save.pop svg {
        animation: none;
    }

}

/* ===== main/css/restaurant_detail.css ===== */
/* =====================================================
   RESTAURANGSIDAN (restaurant_detail.html)
   Toppkortet, brödsmulorna, siffrorna och knapparna delas med
   rättsidan (.fd-*, food_detail.css). Här ligger bara det som
   är unikt för restaurangen.
===================================================== */


/* Används fortfarande av create_hype.html */
.page-container {
    max-width: 1280px;
    margin: auto;
    padding: 25px;
}


/* ---------- 📍 Liten karta (mini_map.js) ----------
   Dator: bild överst och karta under i vänsterkolumnen — bilden blir mindre
   hårt beskuren när infokolumnen är lång. Mobil: kartan sist i kortet. */

.fd-hero.has-map {
    grid-template-areas:
        "media info"
        "map   info";
    grid-template-rows: minmax(240px, 1fr) auto;
}

.fd-hero.has-map .fd-media {
    grid-area: media;
    min-height: 240px;
}

.fd-hero.has-map .fd-info {
    grid-area: info;
}

.rd-map {
    grid-area: map;
    position: relative;
    isolation: isolate;   /* Leaflets z-index stannar i rutan */

    height: 230px;
    border-top: 1px solid rgb(var(--ink-rgb) / .08);
    background: var(--surface-warm);   /* syns tills kartbilderna laddat */
}

.rd-map[hidden] {
    display: none;
}

.rd-map-canvas {
    position: absolute;
    inset: 0;
    font: inherit;
    background: var(--surface-warm);
}

/* Ett ställe: hela kartan leder till stora kartan */
.rd-map:not(.is-chain) .rd-map-canvas {
    cursor: pointer;
}

.rd-map .leaflet-container {
    cursor: inherit;
}

/* 🌙 Samma inverterade kartbilder som stora kartan */
[data-theme="dark"] .rd-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.6);
}

.rd-map .leaflet-control-attribution {
    background: rgb(var(--surface-rgb) / .85);
    color: var(--text-muted);
    font-size: 10px;
}

.rd-map .leaflet-control-attribution a {
    color: var(--blue-text);
}

.rd-map-open {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgb(var(--ink-rgb) / .12);

    background: var(--pure-white);
    box-shadow: 0 2px 10px rgb(0 0 0 / .18);
    color: var(--dark-text);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.rd-map-open:hover {
    background: var(--surface-2);
}

.rd-map-open:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .fd-hero.has-map {
        grid-template-areas:
            "media"
            "info"
            "map";
        grid-template-rows: auto;
    }

    .fd-hero.has-map .fd-media {
        min-height: 0;
    }

    .rd-map {
        height: 200px;
    }
}


/* ---------- Adress + hemsida ---------- */

.rd-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 0;
    padding: 0;
    list-style: none;

    color: var(--text-2);
    font-size: 15px;
}

.rd-facts li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.rd-facts a {
    color: var(--social-blue);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.rd-facts a:hover {
    color: var(--hype-orange);
    text-decoration: underline;
}

/* 📍 "450 m bort" efter adressen — visas av distance.js när det finns en position */
.rd-distance {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;

    background: rgba(59, 130, 246, .1);
    color: var(--blue-text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.rd-distance[hidden],
.rd-nearest[hidden] {
    display: none;
}

/* 🔗 Kedjans sida: "Närmaste ställe: McDonald's Nacka · 1,2 km" */
.rd-nearest {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;

    color: var(--text-2);
    font-size: 15px;
}

.rd-nearest a {
    color: var(--social-blue);
    font-weight: 700;
    text-decoration: none;
}

.rd-nearest a:hover {
    color: var(--hype-orange);
    text-decoration: underline;
}

.rd-nearest small {
    color: var(--text-muted);
    font-size: 12px;
}

/* 🗺️ Visa på kartan (MatHajp) + 🧭 Vägbeskrivning (Google Maps) */
.rd-facts .rd-map-actions {
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 4px;
}

.rd-facts a.rd-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 13px;
    border-radius: 999px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .14);

    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.rd-facts a.rd-map-btn:hover {
    border-color: rgba(255, 111, 0, .45);
    color: var(--dark-text);
    text-decoration: none;
}

.rd-facts a.rd-map-btn:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- 🕒 Öppettider ---------- */

.rd-hours {
    border-radius: 14px;
    background: var(--soft-gray);
    border: 1px solid rgb(var(--ink-rgb) / .06);
}

.rd-hours summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    padding: 10px 14px;
    cursor: pointer;
    list-style: none;

    color: var(--text-2);
    font-size: 15px;
}

.rd-hours summary::-webkit-details-marker {
    display: none;
}

.rd-hours summary:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
    border-radius: 14px;
}

.rd-hours-now {
    color: var(--red-text);
}

.rd-hours-now.is-open {
    color: var(--green-text);
}

.rd-hours-toggle {
    margin-left: auto;
    color: var(--social-blue);
    font-size: 13px;
    font-weight: 700;
}

.rd-hours-toggle::after {
    content: " ▾";
}

.rd-hours[open] .rd-hours-toggle::after {
    content: " ▴";
}

.rd-hours[open] .rd-hours-toggle {
    font-size: 0;   /* "Visa tider" → bara pilen när listan är öppen */
}

.rd-hours[open] .rd-hours-toggle::after {
    font-size: 13px;
}

.rd-hours-table {
    width: calc(100% - 28px);
    margin: 0 14px 12px;
    border-collapse: collapse;
    font-size: 14px;
}

.rd-hours-table th,
.rd-hours-table td {
    padding: 6px 0;
    border-top: 1px solid rgb(var(--ink-rgb) / .06);
}

.rd-hours-table th {
    color: var(--text-2);
    font-weight: 600;
    text-align: left;
}

.rd-hours-table td {
    color: var(--dark-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rd-hours-table .is-today th,
.rd-hours-table .is-today td {
    color: var(--dark-text);
    font-weight: 800;
}

.rd-hours-table small {
    color: var(--text-muted);
    font-weight: 500;
}

.rd-hours-note {
    margin: 0 14px 12px;
    color: var(--text-2);
    font-size: 13px;
}

.rd-hours-missing {
    align-self: flex-start;
    color: var(--social-blue);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.rd-hours-missing:hover {
    color: var(--hype-orange);
    text-decoration: underline;
}

/* 📷 Bara för ägaren, ovanpå MatHajps bild (main/placeholder.py) */
.rd-photo-missing {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.75);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.rd-photo-missing:hover {
    background: var(--hype-orange);
}


/* Tre siffror: hajp · rätter · inlägg */
.rd-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* hajp · rätter · inlägg · följer */
}


/* ---------- ⏳ Rätterna: 🔜 Kommer snart + ⌛ Tidigare specialare ---------- */

.rd-dishes-subtitle {
    margin: 24px 0 12px;
    color: var(--dark-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.rd-ended-foods {
    margin-top: 20px;
}

.rd-ended-foods summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface-2);

    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.rd-ended-foods summary::-webkit-details-marker {
    display: none;
}

.rd-ended-foods summary::after {
    content: "▾";
    color: var(--text-muted);
}

.rd-ended-foods[open] summary::after {
    content: "▴";
}

.rd-ended-foods summary:hover {
    background: var(--surface-3);
}

.rd-ended-foods summary:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.rd-ended-foods .food-card-feed-grid {
    margin-top: 14px;
}

/* Slut: bilderna lite blekare, så det syns att de inte finns nu */
.rd-ended-foods .mh-card-media img {
    filter: grayscale(.6);
    opacity: .8;
}


/* ---------- Galleri ---------- */

.rd-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rd-gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;

    border-radius: 18px;
    background: var(--surface-warm);
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

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

/* "Rätt · användare" nederst på bilden */
.rd-gallery-caption {
    position: absolute;
    inset: auto 0 0 0;

    padding: 28px 12px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);

    color: #fff;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) {

    .rd-gallery-item:hover img {
        transform: scale(1.05);
    }

}

.rd-gallery-item:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- 📷 Bilderna: Restaurangen · Besökare · Reels (partials/restaurant_media.html) ---------- */

.rd-media-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.rd-media-tabs::-webkit-scrollbar {
    display: none;
}

.rd-media-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;

    border: 1px solid rgb(var(--ink-rgb) / .12);
    border-radius: 999px;
    background: rgb(var(--surface-rgb));
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.rd-media-tab[aria-selected="true"],
.rd-media-tab[aria-current="page"] {
    border-color: var(--hype-orange);
    background: var(--hype-orange);
    color: #fff;
}

.rd-media-tab:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.rd-media-count {
    font-weight: 600;
    opacity: .75;
}

.rd-media-panel + .rd-media-panel {
    margin-top: 18px;   /* utan JS: panelerna under varandra */
}

.rd-media-panel-title {
    margin: 0 0 8px;
    font-size: 15px;
}

.rd-media-empty {
    margin: 4px 0;
    color: var(--text-muted);
}

.rd-media-all {
    display: inline-block;
    margin-top: 10px;
    color: var(--hype-orange);
    font-weight: 700;
    text-decoration: none;
}

.rd-media-all:hover {
    text-decoration: underline;
}

/* Ägaren utan bilder: en uppmaning i stället för sektionen */
.rd-media-start {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    padding: 14px 16px;

    border: 2px dashed rgb(var(--ink-rgb) / .18);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
}

.rd-media-start:hover {
    border-color: var(--hype-orange);
}

.rd-media-start strong,
.rd-media-start small {
    display: block;
}

.rd-media-start small {
    color: var(--text-muted);
}

.rd-media-start-icon {
    font-size: 26px;
}

.rd-media-start > span:last-child {
    margin-left: auto;
    color: var(--hype-orange);
    font-weight: 800;
}

/* 🎬 Reels som stående rutor (partials/reel_tiles.html) */
.reel-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;   /* tätt, som bildrutnätet */
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .reel-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.reel-tile {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 2px;
    background: #111;
    color: #fff;
    text-decoration: none;
}

.reel-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel-tile-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(0 0 0 / .45);
    font-size: 18px;
}

.reel-tile-title {
    position: absolute;
    inset: auto 0 0 0;
    padding: 26px 8px 8px;
    background: linear-gradient(to top, rgb(0 0 0 / .7), transparent);
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-tile-title small {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reel-tile:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- Mindre skärmar ---------- */

@media (max-width: 600px) {

    .rd-stats {
        gap: 6px;
    }

    .rd-stats .fd-stat {
        padding: 10px 8px;
    }

    .rd-stats .fd-stat strong {
        font-size: 1.05rem;
    }

    .rd-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .rd-gallery-item {
        border-radius: 14px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .rd-gallery-item img {
        transition: none;
    }

    .rd-gallery-item:hover img {
        transform: none;
    }

}

/* ===== main/css/comments.css ===== */
.comment-form {
    display: flex;
    flex-direction: column;

    border-top: 1px solid rgb(var(--shade-rgb) / 0.08);
    background: var(--pure-white);

    padding: 10px;
}

.comment-form textarea {
    resize: none;
    border: none;
    outline: none;

    min-height: 50px;
    max-height: 120px;

    font-size: 13px;

    padding: 8px;

    background: transparent;
}

.comment-submit-btn {
    width: 34px;
    height: 34px;

    border: none;
    border-radius: 999px;

    background: var(--social-blue);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 14px;

    transition: all 0.15s ease;
}

.comment-submit-btn:hover {
    transform: scale(1.08);
    background: #005a96;
}

.comment-submit-btn:active {
    transform: scale(0.95);
}

.comment-form-footer {
    display: flex;
    justify-content: flex-end; /* ← skickar knappen till höger */
    align-items: center;

    margin-top: 6px;
}


/* =======================
   COMMENTS
======================= */

.comments {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    min-height: 0;
}

.comment-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
     align-items: flex-start;
}

.comment-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-bubble {
    flex: 1;
    background: var(--surface-3);
    padding: 8px 10px;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;

}

.comment-meta {
    display: flex;
    flex-direction: column;
}

.comment-meta strong {
    font-size: 13px;
}

.comment-meta small {
    font-size: 11px;
    opacity: 0.6;
}

.comment-body {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.2;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.comment-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comment-footer {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-right: 6px;
}

.load-more-comments {
    width: calc(100% - 24px);
    margin: 8px auto 0;

    padding: 10px 12px;

    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    background: rgb(var(--shade-rgb) / 0.04);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 500;
    color: var(--dark-text);

    cursor: pointer;

    transition: all 0.15s ease;

    display: flex;
    align-items: center;
    justify-content: center;
}

.load-more-comments:hover {
    background: rgb(var(--shade-rgb) / 0.08);
    transform: translateY(-1px);
}

.load-more-comments:active {
    transform: scale(0.98);
}

.delete-comment-btn {
    background: rgb(var(--surface-rgb) / 0.7);
    backdrop-filter: blur(6px);

    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    border-radius: 999px;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 13px;

    box-shadow: 0 1px 2px rgba(0,0,0,0.08);

    opacity: 0.7;
    transition: all 0.15s ease;
}

.delete-comment-btn:hover {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.comment-login-hint {
    margin: 0;
    padding: 14px;
    text-align: center;
    border-top: 1px solid rgb(var(--shade-rgb) / 0.08);
    font-size: 14px;
}

.comment-login-hint a {
    color: var(--hype-orange);
    font-weight: 700;
}


/* =====================================================
   KOMMENTARSTRÅD — samma överallt
   comments/_thread.html + _comment.html, main/javascript/comments.js
===================================================== */

.cthread-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* 🏪 "Svara som <restaurangen>" under skrivrutan (bara för ägaren) */
.cthread-as {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0 42px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
}

.cthread-as input {
    accent-color: var(--hype-orange);
}

.cthread-as strong {
    color: var(--dark-text);
}

/* 📣 @namn i kommentarer och förslagen medan man skriver (comments/mentions.py) */
.cmt-mention {
    color: var(--orange-text);
    font-weight: 600;
    text-decoration: none;
}

.cmt-mention:hover {
    text-decoration: underline;
}

.cthread-field {
    position: relative;
}

.cmt-mention-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 30;
    margin: 0;
    padding: 4px;
    list-style: none;
    border-radius: 12px;
    border: 1px solid rgb(var(--shade-rgb) / 0.1);
    background: var(--pure-white);
    box-shadow: 0 8px 24px rgb(0 0 0 / .14);
}

.cmt-mention-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.cmt-mention-option:hover,
.cmt-mention-option:focus-visible {
    background: rgba(255, 111, 0, .1);
}

.cmt-mention-option .avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
    border-radius: 50%;
    object-fit: cover;
}

/* 🏪 Kommentar som restaurangen: samma märke som restaurangens inlägg */
.cmt--restaurant .cmt-bubble .post-restaurant-badge {
    margin-left: 4px;
    font-size: 11.5px;
}

.cthread-form .avatar,
.cmt .avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
    box-shadow: none;
}

.cthread-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.cthread .cthread-form input[type=text] {
    display: block;
    width: 100%;
    padding: 9px 42px 9px 14px; /* plats för 😊 */

    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--soft-gray);

    font: inherit;
    font-size: 15px;
}

.cthread .cthread-form input[type=text]:focus {
    outline: none;
    background: var(--pure-white);
    border-color: rgba(255,111,0,0.35);
}

/* 😊-knappen i skrivrutorna (kommentarer, chatten, inlägg) — var den sitter
   bestämmer varje ställe (.cthread-emoji, .chat-emoji, .composer-emoji) */
.emoji-toggle {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;

    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .15s ease, opacity .15s ease, background .15s ease;
}

.emoji-toggle:hover,
.emoji-toggle[aria-expanded="true"] {
    filter: none;
    opacity: 1;
    background: rgb(var(--shade-rgb) / 0.06);
}

.cthread-emoji {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

/* Emoji-rutan (emoji.js) — kommentarer och chatten. Ligger i body ovanför
   rätternas popup, eller inne i en öppen <dialog> (inläggspopupen) */

.emoji-pop {
    position: fixed;
    z-index: 100001;
    width: 300px;
    max-width: calc(100vw - 16px);
    padding: 8px 10px 10px;

    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    border-radius: 14px;
    background: var(--pure-white);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.emoji-pop[hidden] {
    display: none;
}

.emoji-pop-label {
    margin: 4px 2px 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.emoji-pop-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.emoji-pop-btn {
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;

    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .1s ease, transform .1s ease;
}

.emoji-pop-btn:hover {
    background: rgba(255,111,0,0.1);
    transform: scale(1.12);
}

.emoji-pop-btn:active {
    transform: scale(0.95);
}

.cthread-send {
    width: 36px;
    height: 36px;
    flex-shrink: 0;

    border: none;
    border-radius: 50%;
    background: var(--hype-orange);
    color: #fff;

    font-size: 14px;
    cursor: pointer;
}

.cthread-send:disabled {
    opacity: .5;
    cursor: wait;
}

.cthread-error {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--red-text);
}

.cthread-login {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

.cthread-login a {
    color: var(--hype-orange);
    font-weight: 700;
}

.cthread-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.cthread-empty {
    margin: 0;
    font-size: 14px;
    color: var(--text-faint);
}

.cthread-more {
    margin-top: 10px;
    padding: 0;
    border: none;
    background: none;

    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.cthread-more:hover {
    text-decoration: underline;
}

/* En kommentar */

.cmt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cmt-avatar {
    display: inline-flex;
    flex-shrink: 0;
}

.cmt-body {
    flex: 1; /* svarsrutan under kommentaren får hela bredden */
    min-width: 0;
}

.cmt-bubble {
    display: inline-block;
    max-width: 100%;
    padding: 8px 12px;

    border-radius: 16px;
    background: var(--soft-gray);
}

/* ✏️ Redigerad / redigera på plats (comments.js) */
.cmt-edited {
    color: var(--text-faint);
}

.cmt-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Bubblan och raden under döljs medan man redigerar (de har egen display) */
.cmt-bubble[hidden],
.cmt-meta[hidden] {
    display: none;
}

.cmt-edit input[type=text] {
    display: block;
    width: 100%;
    padding: 8px 42px 8px 12px;   /* plats för 😊 */

    border: 1px solid rgba(255, 111, 0, .45);
    border-radius: 16px;
    background: var(--pure-white);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .12);
    color: var(--dark-text);

    font: inherit;
    font-size: 15px;
}

.cmt-edit input[type=text]:focus {
    outline: none;
}

.cmt-edit-actions {
    display: flex;
    gap: 14px;
    margin-left: 12px;
}

.cmt-edit-actions button {
    padding: 0;
    border: none;
    background: none;

    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cmt-edit-actions .cmt-edit-save {
    color: var(--orange-text);
}

.cmt-edit-actions button:hover {
    text-decoration: underline;
}

.cmt-edit-actions button:disabled {
    opacity: .5;
    cursor: wait;
}

.cmt-edit-error {
    margin: 0 0 0 12px;
    font-size: 12px;
    color: var(--red-text);
}

/* Nyss skickad (comments.js) — inte bara-emoji-bubblor, de har ingen bakgrund */
.cmt--new > .cmt-body > .cmt-bubble:not(.is-emoji) {
    animation: cmt-new 1.8s ease;
}

@keyframes cmt-new {
    0%   { opacity: 0; transform: translateY(6px); background: var(--orange-soft-2); }
    15%  { opacity: 1; transform: none; }
    45%  { background: var(--orange-soft-2); }
    100% { background: var(--soft-gray); }
}

@media (prefers-reduced-motion: reduce) {
    .cmt--new > .cmt-body > .cmt-bubble:not(.is-emoji) {
        animation: none;
    }
}

.cmt-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-text);
}

.cmt-author:hover {
    text-decoration: underline;
}

.cmt-text {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dark-text);
    overflow-wrap: anywhere;
}

.cmt-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;

    margin: 4px 0 0 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.cmt-action {
    padding: 0;
    border: none;
    background: none;

    color: var(--text-muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.cmt-action:hover {
    text-decoration: underline;
}

.cmt-like {
    /* "håll inne" på mobil: ingen markering eller meny */
    -webkit-touch-callout: none;
    user-select: none;
}

.cmt-like.is-liked {
    color: var(--orange-text);
}

/* 😋 Reaktionsraden (emoji.js) — kommentarer och chatten, ligger i body ovanför popupen.
   Fler reaktioner än som får plats → en rad till. */

.react-bar {
    position: fixed;
    z-index: 100001;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    max-width: calc(100vw - 12px);
    box-sizing: border-box;
    padding: 4px 6px;

    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    border-radius: 24px;
    background: var(--pure-white);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);

    animation: react-bar-in .15s ease-out;
}

.react-bar[hidden] {
    display: none;
}

@keyframes react-bar-in {
    from { opacity: 0; transform: translateY(6px) scale(.9); }
}

.react-bar-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;

    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}

.react-bar-btn:hover,
.react-bar-btn:focus-visible {
    transform: translateY(-4px) scale(1.25);
    outline: none;
}

.react-bar-btn.is-current {
    background: rgba(255,111,0,0.14);
}

/* Fler knappar efter reaktionerna, t.ex. 📋 Kopiera i chatten */
.react-bar-extras {
    display: flex;
    margin-left: 2px;
    padding-left: 4px;
    border-left: 1px solid rgb(var(--shade-rgb) / 0.1);
}

.react-bar-extras[hidden] {
    display: none;
}

.react-bar-extra {
    font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .react-bar { animation: none; }
    .react-bar-btn:hover,
    .react-bar-btn:focus-visible { transform: none; background: rgba(255,111,0,0.14); }
}

.cmt-likes {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255,111,0,0.1);
    color: var(--orange-text);
    font-weight: 700;
}

.cmt-likes[hidden] {
    display: none;
}

/* Bara emoji ("😋🔥") → större, som i chattar (threads.is_emoji_only) */

.cmt-bubble.is-emoji .cmt-text {
    font-size: 30px;
    line-height: 1.2;
}

/* 💬 Svar — under kommentaren, lite mindre */

.cmt-replies:has(> :not([hidden])) {
    margin-top: 8px;
}

.cmt-replies-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cmt-replies-list[hidden] {
    display: none;
}

.cmt--reply .avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

.cmt-replies-toggle {
    margin-left: 12px;
    padding: 0;
    border: none;
    background: none;

    color: var(--text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cmt-replies-toggle::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-right: 8px;
    vertical-align: middle;
    background: currentColor;
    opacity: .5;
}

.cmt-replies-toggle:hover {
    text-decoration: underline;
}

.cmt-replies-toggle[hidden] {
    display: none;
}

.cthread-form--reply {
    margin-top: 8px;
    gap: 8px;
}

/* En kort markering när man tryckt "Svara" — så att man ser vilket fält som tar emot texten */
.cthread-form--reply.is-replying input[type=text] {
    border-color: rgba(255, 111, 0, .6);
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .18);
}

.cthread .cthread-form--reply .avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

.cthread .cthread-form--reply input[type=text] {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 14px;
}

.cthread-form--reply .cthread-send {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

/* De mest gillade kommentarerna (comments/threads.py, TOP_COMMENTS) */

.cmt-top-badge {
    display: table;
    margin: 0 0 4px 12px;
    padding: 1px 8px;

    border-radius: 999px;
    background: linear-gradient(135deg, #ff8a00, #ff5a1f);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cmt.is-top .cmt-bubble {
    box-shadow: inset 0 0 0 1.5px rgba(255,111,0,0.35);
}

/* Under ett inlägg i flödet */

.feed-post-comments .cthread {
    padding: 4px 18px 16px;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
}

/* ===== main/css/navigation.css ===== */
/* =====================================================
   NAVIGERING
   - Sidomenyn (partials/sidebar.html)
       över 1100px:   full meny med text
       769–1100px:    smal ikon-rad med tooltips
   - Bottenmenyn (.mobile-nav i base.html) under 769px
   Aktiv punkt: .is-active (nav_section, main/context_processors.py).
   Bredd/avstånd styrs av --sidebar-* i main.css.
===================================================== */

:root {
    --nav-text: #3a3a3a;
    --nav-hover: rgba(30, 42, 68, 0.06);
    --nav-active: #c2410c;                 /* mörkare orange: läsbar mot ljus bakgrund */
    --nav-active-bg: rgba(255, 111, 0, 0.10);

    /* Bottenmenyns höjd (mobil) utan iPhones hemstreck — det som ska ligga
       ovanför den (toasts, Installera-rutan …) räknar med den */
    --mobile-nav-h: 58px;
}

:root[data-theme="dark"] {
    --nav-text: #D6D8DC;
    --nav-hover: rgba(255, 255, 255, 0.06);
    --nav-active: #FF8A3D;                 /* ljusare orange: läsbar mot mörk bakgrund */
    --nav-active-bg: rgba(255, 111, 0, 0.16);
}


/* ---------- Ikoner ---------- */

.nav-icon {
    width: 24px;
    height: 24px;
    flex: none;
    display: block;
}

/* Aktiv: tjockare linje + ifylld form (syns även för färgblinda) */
.is-active > .nav-item-icon .nav-icon {
    stroke-width: 2.2;
}

.is-active > .nav-item-icon .nav-icon .f {
    fill: currentColor;
    fill-opacity: .2;
}


/* ---------- Sidomenyn ---------- */

.sidebar {
    position: fixed;
    top: 88px;
    bottom: 16px;
    left: var(--sidebar-left);
    width: var(--sidebar-width);
    z-index: 50;

    display: flex;
    flex-direction: column;

    padding: 4px 0 0;
    overflow-y: auto;

    /* Scrollist bara om det verkligen behövs (väldigt låga fönster) */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.sidebar:hover {
    scrollbar-color: var(--surface-4) transparent;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
}

.sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section-title {
    margin: 18px 12px 6px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
}


/* En punkt (används även i bottenmenyn, se längre ner) */

.nav-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    height: 44px;
    padding: 0 12px;

    border-radius: 12px;

    color: var(--nav-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;

    transition: background-color .15s ease, color .15s ease;
}

.nav-item:hover {
    background: var(--nav-hover);
    color: var(--dark-text);
}

.nav-item.is-active {
    background: var(--nav-active-bg);
    color: var(--nav-active);
    font-weight: 700;
}

.nav-item:focus-visible,
.sidebar-share:focus-visible,
.sidebar-minor:focus-visible,
.mobile-nav-create:focus-visible,
.create-menu a:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 2px;
}

.nav-item-icon {
    position: relative;
    flex: none;
    display: flex;
}

.nav-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Olästa notiser */
.nav-badge {
    position: absolute;
    top: -6px;
    right: -9px;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    border: 2px solid var(--soft-gray);
    border-radius: 999px;
    background: #e11d48;
    color: #fff;

    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}


/* Nederdelen: Dela / Skapa konto, Föreslå, admin */

.sidebar-bottom {
    margin-top: auto;
    padding: 16px 0 4px;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-share {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 46px;
    margin-bottom: 8px;

    border-radius: 999px;
    background: var(--hype-orange);
    box-shadow: 0 6px 16px rgba(255, 111, 0, 0.25);

    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    transition: background-color .15s ease, box-shadow .15s ease;
}

.sidebar-share:hover {
    background: #e65c00;
    box-shadow: 0 8px 20px rgba(255, 111, 0, 0.32);
}

.sidebar-share .nav-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.6;
}

.sidebar-join {
    padding: 14px;
    border: 1px solid rgb(var(--shade-rgb) / 0.05);
    border-radius: 16px;
    background: var(--pure-white);
}

.sidebar-join-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-2);
}

.sidebar-join .sidebar-share {
    margin-bottom: 0;
}

.sidebar-minor {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 12px;
    border-radius: 10px;

    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.sidebar-minor:hover {
    background: var(--nav-hover);
    color: var(--dark-text);
}

.sidebar-minor .nav-icon {
    width: 20px;
    height: 20px;
}


/* ---------- Längst ner: tema + länkar (det som förr låg i sidfoten) ---------- */

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 12px 0;
    border-top: 1px solid rgb(var(--shade-rgb) / .08);
}

.sidebar-footer .theme-switch-options {
    display: flex;
    width: 100%;
}

.sidebar-footer .theme-switch button {
    flex: 1;
    justify-content: center;
    padding: 5px 6px;
    font-size: 12px;
}

/* "Om MatHajp · Användarvillkor · …" — liten grå rad, som Instagram/Facebook */
.site-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.site-links a {
    color: inherit;
    text-decoration: none;
}

.site-links a:hover {
    color: var(--hype-orange);
    text-decoration: underline;
}

.site-links a:not(:last-of-type)::after {
    content: "·";
    margin: 0 6px;
    color: var(--text-faint);
}

.site-links-copy {
    flex-basis: 100%;
    color: var(--text-faint);
}

/* "Mer" behövs bara i den smala ikon-raden — och när tema + länkar inte får
   plats (navigation.js sätter .is-cramped), t.ex. inloggad på en låg laptop */
.sidebar-more {
    display: none;
}

.sidebar.is-cramped .sidebar-footer {
    display: none;
}

.sidebar.is-cramped .sidebar-more {
    display: flex;
}

/* ...och lite tätare längst ner, så att "Mer" också får plats */
.sidebar.is-cramped .sidebar-bottom {
    gap: 0;
    padding-top: 4px;
}

.sidebar.is-cramped .sidebar-minor {
    padding-top: 5px;
    padding-bottom: 5px;
}


/* Låga fönster (t.ex. laptop 1366×768): lite tätare så allt får plats */
@media (max-height: 780px) {
    .nav-item { height: 40px; }
    .sidebar-section-title { margin-top: 12px; }
    .sidebar-bottom { padding-top: 10px; }
}


/* ---------- Smal ikon-rad (769–1100px) ---------- */

@media (min-width: 769px) and (max-width: 1100px) {

    .sidebar {
        align-items: center;
        overflow: visible;   /* tooltips ska kunna sticka ut till höger */
    }

    .sidebar-nav,
    .sidebar-bottom {
        align-items: center;
    }

    .nav-item,
    .sidebar-minor {
        justify-content: center;
        width: 48px;
        height: 44px;
        padding: 0;
    }

    .sidebar-minor {
        height: 38px;
    }

    /* Texten finns kvar för skärmläsare, men syns inte */
    .sidebar .nav-item-label,
    .sidebar-join-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* "Du" blir en tunn linje */
    .sidebar-section-title {
        width: 32px;
        height: 1px;
        margin: 12px auto;
        overflow: hidden;
        background: var(--surface-4);
        color: transparent;
    }

    .sidebar-share {
        width: 48px;
        height: 48px;
        padding: 0;
    }

    .sidebar-join {
        padding: 0;
        border: none;
        background: none;
    }

    /* Tema och länkar får inte plats — "Mer" leder till ☰ Menyn där de finns */
    .sidebar-footer {
        display: none;
    }

    .sidebar .sidebar-more {
        display: flex;
    }

    /* Tooltip med namnet */
    .sidebar .nav-item::after,
    .sidebar-share::after,
    .sidebar-minor::after {
        content: attr(data-label);

        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translate(-4px, -50%);

        padding: 6px 10px;
        border-radius: 8px;
        background: #1f2937;
        color: #fff;

        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;

        opacity: 0;
        pointer-events: none;
        transition: opacity .12s ease, transform .12s ease;
        z-index: 60;
    }

    .sidebar .nav-item:hover::after,
    .sidebar .nav-item:focus-visible::after,
    .sidebar-share:hover::after,
    .sidebar-share:focus-visible::after,
    .sidebar-minor:hover::after,
    .sidebar-minor:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

/* Ikon-raden på låga skärmar (surfplatta på tvären): tätare */
@media (min-width: 769px) and (max-width: 1100px) and (max-height: 780px) {
    .sidebar .nav-item { height: 40px; }
    .sidebar-minor { height: 34px; }
    .sidebar-share { width: 44px; height: 44px; margin-bottom: 4px; }
    .sidebar-section-title { margin: 8px auto; }
    .sidebar-bottom { padding-top: 8px; }
}

/* ...och riktigt låga (mobil på tvären): hellre scroll än att något
   hamnar utom räckhåll — tooltips klipps då, men namnen finns för
   skärmläsare och det är pekskärmar ändå */
@media (min-width: 769px) and (max-width: 1100px) and (max-height: 640px) {
    .sidebar {
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
    }
}


/* ---------- Bottenmenyn (mobil, under 769px) ---------- */

.mobile-nav,
.create-menu {
    display: none;
}

@media (max-width: 768px) {

    .sidebar {
        display: none;
    }

    /* Plats för bottenmenyn, så den inte täcker slutet av sidan */
    body {
        padding-bottom: calc(var(--mobile-nav-h) + 16px + env(safe-area-inset-bottom));
    }

    /* Fast längst ner i full bredd (som TikTok/Instagram/YouTube).
       Bakgrunden går ner bakom iPhones hemstreck; knapparna ligger ovanför det. */
    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;

        display: flex;
        align-items: center;
        justify-content: space-around;

        height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
        padding: 0 max(6px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-right));

        border-top: 1px solid rgb(var(--shade-rgb) / 0.08);
        /* ⚡ Inget glas (backdrop-filter): menyn ligger fast över sidan, så suddet räknades om vid
           varje scrollsteg — och bakom 94 % täckning syntes det ändå inte */
        background: rgb(var(--surface-rgb) / 0.97);
    }

    .mobile-nav .nav-item {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 3px;

        height: 100%;
        max-height: var(--mobile-nav-h);
        padding: 0;
        border-radius: 0;

        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
    }

    .mobile-nav .nav-item:hover {
        background: none;
        color: var(--dark-text);
    }

    .mobile-nav .nav-item.is-active {
        background: none;
        color: var(--nav-active);
        font-weight: 700;
    }

    /* 👤 Profilbilden i stället för en ikon (community/_avatar.html, med ens ⭕ ring) */
    .nav-item--profile .avatar {
        display: inline-flex;
        width: 26px;
        height: 26px;
        font-size: 12px;
        transition: box-shadow .15s ease;
    }

    /* Markerad: en orange kant — inte på en ring, den har redan sina färger */
    .nav-item--profile.is-active .avatar:not(.avatar-ring) {
        box-shadow: 0 0 0 2px rgb(var(--surface-rgb)), 0 0 0 4px var(--nav-active);
    }

    .mobile-nav-create {
        flex: none;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;
        margin: 0 4px;
        padding: 0;

        border: none;
        border-radius: 50%;
        background: var(--hype-orange);
        box-shadow: 0 4px 12px rgba(255, 111, 0, 0.28);
        color: #fff;

        cursor: pointer;
        transition: transform .2s ease;
    }

    .mobile-nav-create .nav-icon {
        stroke-width: 2.6;
    }

    .mobile-nav-create.is-open {
        transform: rotate(45deg);
    }

    .create-menu:not([hidden]) {
        position: fixed;
        left: 50%;
        bottom: calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 10000;

        display: flex;
        flex-direction: column;
        gap: 2px;

        width: min(320px, calc(100vw - 32px));
        padding: 8px;

        border-radius: 18px;
        background: var(--pure-white);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    }

    .create-menu a {
        display: flex;
        align-items: center;
        gap: 12px;

        padding: 12px 14px;
        border-radius: 12px;

        color: var(--dark-text);
        font-weight: 600;
        text-decoration: none;
    }

    .create-menu a:hover {
        background: var(--soft-gray);
    }

    .create-menu .nav-icon {
        color: var(--hype-orange);
    }
}


/* ---------- ☰ Menyn (/meny/, menu.html) ---------- */

/* Marginaler från .explore-page (explore.css) — här bara smalare */
.explore-page.menu-page {
    max-width: 640px;
    padding-bottom: 24px;
}

.menu-title {
    margin: 4px 0 14px;
    font-size: 1.6rem;
}

.menu-heading {
    margin: 22px 2px 10px;
    color: var(--text-faint);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Profilen överst */
.menu-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;

    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    color: var(--dark-text);
    text-decoration: none;
}

.menu-profile .avatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
}

.menu-profile strong,
.menu-profile small {
    display: block;
}

.menu-profile strong {
    font-size: 1.1rem;
}

.menu-profile small {
    color: var(--text-muted);
    font-size: 13px;
}

.menu-profile:hover {
    border-color: rgba(255, 111, 0, .4);
}

/* Utloggad */
.menu-join {
    padding: 16px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

.menu-join p {
    margin: 0 0 12px;
    color: var(--text-2);
}

.menu-join-actions {
    display: flex;
    gap: 8px;
}

.menu-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgb(var(--ink-rgb) / .14);
    color: var(--dark-text);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.menu-btn--primary {
    border-color: var(--hype-orange);
    background: var(--hype-orange);
    color: #fff;
}

/* Rutorna: två i bredd på mobil */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 560px) {
    .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.menu-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    box-sizing: border-box;
    padding: 14px;

    border-radius: 16px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    color: var(--dark-text);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.menu-tile:hover {
    border-color: rgba(255, 111, 0, .4);
}

.menu-tile:active {
    transform: scale(.98);
}

.menu-tile:focus-visible,
.menu-list a:focus-visible,
.menu-profile:focus-visible,
.menu-logout:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 2px;
}

.menu-tile-icon {
    position: relative;
    align-self: flex-start;
    display: flex;
    color: var(--hype-orange);
}

.menu-tile-icon .nav-badge {
    border-color: var(--pure-white);
}

.menu-tile-text strong,
.menu-tile-text small {
    display: block;
}

.menu-tile-text strong {
    font-size: 15px;
}

.menu-tile-text small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
}

/* Mer: en vanlig lista */
.menu-list {
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 16px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

.menu-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 12px;
    color: var(--dark-text);
    font-weight: 600;
    text-decoration: none;
}

.menu-list a:hover {
    background: var(--soft-gray);
}

.menu-list .nav-icon {
    color: var(--text-faint);
}

/* Tema */
.menu-theme {
    padding: 14px;
    border-radius: 16px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

.menu-theme .theme-switch-options {
    display: flex;
    width: 100%;
}

.menu-theme .theme-switch button {
    flex: 1;
    justify-content: center;
    padding: 9px 8px;
    font-size: 14px;
}

.menu-theme p {
    margin: 10px 2px 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* Villkor, integritet, cookies … (partials/site_links.html) */
.menu-links {
    justify-content: center;
    margin: 22px 4px 0;
    font-size: 13px;
    text-align: center;
}

.menu-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    padding: 12px;

    border-radius: 14px;
    background: var(--soft-gray);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    color: var(--red-text);
    font-weight: 700;
    text-decoration: none;
}

.menu-logout .nav-icon {
    width: 20px;
    height: 20px;
}

/* ===== main/css/hype_post.css ===== */
/* =====================================================
   "NYTT FRÅN MATHAJP" (HypePost)
   Kort/rad:  news/hype_post.html
   Panelen:   news/_news_panel.html (startsidan, Trendigt)
   Sidor:     news/list.html, detail.html, app_updates.html → news_page.css
   Skriv:     create_hype.html (längre ner)
   Pricken:   main/javascript/news.js
===================================================== */


/* ---------- Färg per typ (bakgrund utan bild + etikettens färg) ---------- */

.news-item--news {
    --news-bg: linear-gradient(135deg, #fff4ea, #ffdcc0);
    --news-accent: #c2410c;
}

.news-item--new_place {
    --news-bg: linear-gradient(135deg, #e9f8f0, #c6ecd8);
    --news-accent: #047857;
}

.news-item--contest {
    --news-bg: linear-gradient(135deg, #fdecf4, #f8cde2);
    --news-accent: #be185d;
}

.news-item--update {
    --news-bg: linear-gradient(135deg, #edf3ff, #d2e1ff);
    --news-accent: #1d4ed8;
}

.news-item--event {
    --news-bg: linear-gradient(135deg, #f3edff, #dccbff);
    --news-accent: #6d28d9;
}

/* Mörkt tema: dova toningar, ljusare etikettfärg */
[data-theme="dark"] .news-item--news {
    --news-bg: linear-gradient(135deg, #2E2219, #4A2E17);
    --news-accent: #FF8A3D;
}

[data-theme="dark"] .news-item--new_place {
    --news-bg: linear-gradient(135deg, #1A2A23, #1F3D30);
    --news-accent: #34C98A;
}

[data-theme="dark"] .news-item--contest {
    --news-bg: linear-gradient(135deg, #2D1C26, #45233A);
    --news-accent: #F472B6;
}

[data-theme="dark"] .news-item--update {
    --news-bg: linear-gradient(135deg, #1C2333, #22314F);
    --news-accent: #60A5FA;
}

[data-theme="dark"] .news-item--event {
    --news-bg: linear-gradient(135deg, #251E36, #382A57);
    --news-accent: #A78BFA;
}


/* ---------- Kortet (standard: bild överst) ---------- */

.news-item {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;

    color: inherit;
    text-decoration: none;
}

.news-item-media {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;

    background: var(--news-bg, var(--surface-warm));
}

.news-item-media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .4s ease;
}

.news-item-emoji {
    font-size: 52px;
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(30, 42, 68, .15));

    transition: transform .3s ease;
}

.news-item:hover .news-item-media img {
    transform: scale(1.04);
}

.news-item:hover .news-item-emoji {
    transform: scale(1.08) rotate(-4deg);
}

/* Etiketten: "🎉 Tävling" */
.news-kind {
    position: absolute;
    top: 10px;
    left: 10px;

    padding: 4px 10px;
    border-radius: 999px;

    background: rgb(var(--surface-rgb) / .94);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);

    color: var(--news-accent, var(--dark-text));
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.news-kind--static {
    position: static;
    box-shadow: none;
    background: var(--news-bg, var(--surface-warm));
}

.news-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.news-item-title {
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.news-item:hover .news-item-title {
    color: var(--orange-text);   /* (--hype-orange är för ljus som text på vitt) */
}

/* "🎉 Tävling" ovanför rubriken — bara i raderna på Nyheter (news_page.css), där etiketten på bilden inte får plats */
.news-item-eyebrow {
    display: none;

    color: var(--news-accent, var(--text-muted));
    font-size: 12px;
    font-weight: 800;
}

.news-item-text {
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.news-item-meta {
    margin-top: 2px;

    color: var(--text-muted);
    font-size: 12px;
}

/* Typen står i etiketten på kortet — bara i raderna */
.news-item-kind-inline {
    display: none;

    color: var(--news-accent);
    font-weight: 700;
}

.news-item-pin {
    color: var(--amber-text);
    font-weight: 700;
}

/* 🎪 Event: "🗓️ 1–10 aug 2026" under rubriken, och status på bilden */
.news-item-when {
    color: var(--news-accent);
    font-size: 13px;
    font-weight: 800;
}

/* Alla reaktioner med antal på kortet: "🔥 1 😍 1" */
/* 📍 Stockholm / 🏪 Bonanza · Stockholm — var nyheten gäller */
.news-item-where {
    overflow: hidden;

    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-item-likes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 8px;

    color: var(--orange-text);
    font-weight: 700;
    vertical-align: bottom;
}

.news-status {
    padding: 4px 10px;
    border-radius: 999px;

    background: rgb(var(--surface-rgb) / .94);

    color: var(--news-accent, var(--dark-text));
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

/* Nere till vänster: uppe till höger ligger "✏️ Redigera" för moderatorer */
.news-item-media .news-status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.news-status--now,
.news-status--last {
    background: #047857;
    color: #fff;
}

.news-status--over {
    background: rgb(var(--ink-rgb) / .72);
    color: #fff;
}

/* Orange "ny"-prick (news.js sätter .is-unread) */
.news-dot {
    display: none;

    width: 8px;
    height: 8px;
    margin: 0 6px 1px 0;
    border-radius: 50%;

    background: var(--hype-orange);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .18);
    vertical-align: middle;
}

.news-item.is-unread .news-dot {
    display: inline-block;
}

.news-item:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
    border-radius: 14px;
}


/* ---------- Panelen (startsidan / Trendigt) ---------- */

/* .home-rail.news-panel: home_rails.css laddas efter och sätter annars
   padding-right: 0 (raderna där går ut i kanten, inte den här på desktop) */
.home-rail.news-panel {
    padding-right: 16px;
}

.news-panel .home-rail-head.news-panel-head {
    padding-right: 0;
}

.news-panel-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Desktop: den första stor, resten kompakta rader */
@media (min-width: 901px) {

    .news-panel .news-item.is-featured {
        padding-bottom: 12px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgb(var(--ink-rgb) / .08);
    }

    .news-panel .news-item:not(.is-featured) {
        flex-direction: row;
        align-items: center;
        gap: 12px;

        margin: 0 -8px;
        padding: 8px;
        border-radius: 12px;

        transition: background .2s ease;
    }

    .news-panel .news-item:not(.is-featured):hover {
        background: var(--surface-cream);
    }

    .news-panel .news-item:not(.is-featured) .news-item-media {
        flex-shrink: 0;
        width: 52px;
        aspect-ratio: 1;
        border-radius: 12px;
    }

    .news-panel .news-item:not(.is-featured) .news-item-emoji {
        font-size: 24px;
        filter: none;
    }

    .news-panel .news-item:not(.is-featured) .news-kind,
    .news-panel .news-item:not(.is-featured) .news-status,
    .news-panel .news-item:not(.is-featured) .news-item-text {
        display: none;
    }

    .news-panel .news-item:not(.is-featured) .news-item-kind-inline {
        display: inline;
    }

    .news-panel .news-item:not(.is-featured) .news-item-title {
        font-size: 14px;
        font-weight: 700;
    }
}

/* Mobil: en rad kort att svepa i, kant i kant som startsidans rader */
@media (max-width: 900px) {

    .home-rail.news-panel {
        padding-right: 0;
    }

    .news-panel .home-rail-head.news-panel-head {
        padding-right: 16px;
    }

    .news-panel-list {
        flex-direction: row;
        gap: 12px;

        padding: 2px 16px 4px 0;

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;   /* ‹ › -pilarna (home_rails.js) */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .news-panel-list::-webkit-scrollbar {
        display: none;
    }

    /* Pilarna mitt på korten (omslagsbilden tar övre delen) */
    .news-panel .home-rail-arrow {
        top: 35%;
    }

    /* Kortet, eller cellen runt det när Redigera finns (_news_card.html) */
    .news-panel-list > * {
        flex: 0 0 min(78%, 260px);
        scroll-snap-align: start;
    }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .news-panel-list {
        scroll-behavior: auto;
    }
}


/* ---------- 🎪 Event-panelen (startsidan, Upptäck): datum – rubrik – plats ---------- */

/* .home-rail.event-panel: home_rails.css laddas efter och sätter annars
   padding-right: 0 (som för .news-panel ovan) */
.home-rail.event-panel {
    padding-right: 16px;
}

.feed-news > * + .event-panel {
    margin-top: 24px;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 2px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.event-row {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 -8px;
    padding: 9px 8px;
    border-radius: 12px;

    color: inherit;
    text-decoration: none;

    transition: background .2s ease;
}

.event-row:hover {
    background: var(--surface-cream);
}

.event-row:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Datumet i en lila ruta, lika bred för alla rader så att rubrikerna linjerar */
.event-date {
    flex: 0 0 78px;
    box-sizing: border-box;
    padding: 6px 4px;
    border-radius: 10px;

    background: linear-gradient(135deg, #f3edff, #dccbff);
    color: #6d28d9;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

[data-theme="dark"] .event-date {
    background: linear-gradient(135deg, #251E36, #382A57);
    color: #A78BFA;
}

.event-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.event-title {
    overflow: hidden;

    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-row:hover .event-title {
    color: var(--hype-orange);
}

.event-place {
    overflow: hidden;

    color: var(--text-muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grön prick: pågår just nu */
.event-live {
    flex-shrink: 0;

    width: 9px;
    height: 9px;
    border-radius: 50%;

    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
}

/* Upptäck har bredare plats: två kolumner */
.explore-page .event-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 20px;
}

@media (max-width: 700px) {
    .explore-page .event-list {
        grid-template-columns: 1fr;
    }
}


/* ---------- Nyhetens text ----------
   Sidorna (Nyheter, nyhetens sida, Nytt i appen): news_page.css.
   Texten här används också av förhandsgranskningen i skrivverktygen. */

.news-article-text {
    margin-top: 16px;

    color: var(--dark-text);
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.news-article-text p {
    margin: 0 0 1em;
}

.news-article-text a {
    color: var(--orange-text);
    font-weight: 600;
    text-decoration: underline;
}



/* =====================================================
   SKRIV EN NYHET (create_hype.html)
   Formuläret till vänster, förhandsvisningen (samma kort som
   startsidan) till höger — under formuläret på mobil.
===================================================== */

.news-create {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    box-sizing: border-box;
}

.news-create-head {
    margin-bottom: 22px;
}

.news-create-head h1 {
    margin: 0;

    color: var(--dark-text);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.news-create-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
}

.news-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}

.news-create-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}


/* ---------- Sektion ---------- */

.nc-card {
    padding: 20px 22px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.nc-card-title {
    margin: 0;

    color: var(--dark-text);
    font-size: 1.02rem;
    font-weight: 800;
}

.nc-card > .nc-hint {
    margin: 2px 0 14px;
}

.nc-hint {
    display: block;

    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.nc-optional {
    margin-left: 4px;

    color: var(--text-faint);
    font-size: 12px;
    font-weight: 600;
}


/* ---------- Fält ---------- */

.nc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-top: 16px;
}

.nc-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.nc-field label,
.nc-label {
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
}

.nc-counter {
    color: var(--text-faint);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.nc-counter.is-near {
    color: var(--orange-text);
    font-weight: 700;
}

/* ✍️ Skrivverktyg över "Hela texten": fet, rubrik, länk, bild, förhandsgranska */
.nc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;

    padding: 6px;
    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-radius: 12px;
    background: var(--soft-gray);
}

.nc-toolbar button {
    min-width: 36px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--pure-white);

    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.nc-toolbar button:hover:not(:disabled) {
    border-color: rgba(255, 111, 0, .45);
}

.nc-toolbar button:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 1px;
}

.nc-toolbar button:disabled {
    opacity: .45;
    cursor: default;
}

.nc-toolbar button[aria-pressed="true"] {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.nc-toolbar-spacer {
    flex: 1;
}

.nc-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 8px;
}

.nc-link-row[hidden] {
    display: none;
}

.nc-link-row input {
    flex: 1 1 220px;
    width: auto !important;
}

.nc-link-ok,
.nc-link-cancel {
    padding: 0 16px;
    border-radius: 10px;

    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.nc-link-ok {
    border: none;
    background: var(--hype-orange);
    color: #fff;
}

.nc-link-cancel {
    border: 1px solid rgb(var(--ink-rgb) / .14);
    background: var(--pure-white);
    color: var(--dark-text);
}

.nc-body-preview {
    min-height: 120px;
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px dashed rgb(var(--ink-rgb) / .2);
    border-radius: 12px;
}

.nc-body-preview[hidden],
.nc-body-status[hidden] {
    display: none;
}

.nc-body-status.is-error {
    color: var(--red-text);
    font-weight: 600;
}

.nc-field .nc-toolbar + textarea,
.nc-field .nc-link-row + textarea {
    margin-top: 8px;
}

/* ✍️ Rubriker, bilder och länkar i nyhetens text (main/news_text.py) */
.news-article-text h2 {
    margin: 1.4em 0 .5em;

    color: var(--dark-text);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.news-article-text strong {
    font-weight: 800;
}

/* >> text: centrerat */
.news-article-text .is-center {
    text-align: center;
}

/* - punkt / 1. punkt */
.news-article-text ul,
.news-article-text ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.news-article-text li {
    margin: 0 0 .3em;
    padding-left: .2em;
}

.news-article-text li::marker {
    color: var(--hype-orange);
    font-weight: 800;
}

.news-figure {
    margin: 1.2em 0;
}

.news-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.news-figure figcaption {
    margin-top: 6px;

    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* 🌐 Hemsidan: en knapp under texten */
.news-website {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;

    margin-top: 18px;
    padding: 10px 16px;
    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-radius: 14px;
    background: var(--pure-white);

    color: var(--dark-text);
    font-size: 22px;
    text-decoration: none;

    transition: border-color .2s ease, background .2s ease;
}

.news-website:hover {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
}

.news-website:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.news-website-text {
    display: flex;
    flex-direction: column;
    min-width: 0;

    font-size: 15px;
    line-height: 1.25;
}

.news-website-text small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.news-website-text strong {
    overflow: hidden;

    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-website-arrow {
    color: var(--text-muted);
    font-size: 16px;
}

/* Var gäller det? — ingenstans / ort / restaurang */
.nc-place-modes {
    margin-bottom: 14px;
}

.nc-place-panel[hidden] {
    display: none;
}

.nc-event-hint {
    margin: -4px 0 12px;
}

.nc-event-hint[hidden] {
    display: none;
}

.nc-dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 16px;
}

.nc-field input[type="text"],
.nc-field input[type="date"],
.nc-field input[type="url"],
.nc-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;

    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-radius: 12px;
    background: var(--soft-gray);

    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.5;

    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.nc-field textarea {
    resize: vertical;
    min-height: 90px;
}

.nc-field input[type="text"]:focus,
.nc-field input[type="date"]:focus,
.nc-field input[type="url"]:focus,
.nc-field textarea:focus {
    outline: none;
    border-color: var(--hype-orange);
    background: var(--pure-white);
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .12);
}

.news-create .errorlist {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;

    color: var(--red-text);
    font-size: 13px;
    font-weight: 600;
}

.nc-error-box {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--red-soft);
    border: 1px solid #fecaca;
}


/* ---------- Typ / rätt: chips ---------- */

.news-kind-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.news-kind-option {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgb(var(--ink-rgb) / .12);
    background: var(--pure-white);

    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;

    transition: border-color .2s ease, background .2s ease;
}

.news-kind-picker .news-kind-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.news-kind-option:hover {
    border-color: rgba(255, 111, 0, .45);
}

.news-kind-option:has(input:checked),
.news-kind-option[aria-pressed="true"] {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.news-kind-option:has(input:focus-visible),
.news-kind-option:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- Bild ---------- */

.nc-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.nc-dropzone {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 150px;
    overflow: hidden;

    border: 2px dashed rgb(var(--ink-rgb) / .16);
    border-radius: 14px;
    background: var(--soft-gray);

    text-align: center;
    cursor: pointer;

    transition: border-color .2s ease, background .2s ease;
}

.nc-dropzone:hover,
.nc-dropzone.is-dragging {
    border-color: var(--hype-orange);
    background: var(--surface-cream);
}

.nc-file-input:focus-visible + .nc-link-btn,
.nc-dropzone:focus-within {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.nc-dropzone.has-image {
    border-style: solid;
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.nc-dropzone img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nc-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 20px;
}

.nc-dropzone-empty[hidden] {
    display: none;
}

.nc-dropzone-icon {
    font-size: 28px;
    margin-bottom: 4px;
}

.nc-dropzone-empty strong {
    color: var(--dark-text);
    font-size: 15px;
}

.nc-dropzone-empty small {
    color: var(--text-muted);
    font-size: 13px;
}

.nc-link-btn {
    margin-top: 10px;
    padding: 0;

    border: 0;
    background: none;

    color: var(--red-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.nc-link-btn[hidden] {
    display: none;
}


/* ---------- Koppla till restaurang ---------- */

.nc-search {
    display: flex;
    align-items: center;
    gap: 8px;

    height: 44px;
    padding: 0 14px;

    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-radius: 12px;
    background: var(--soft-gray);

    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.nc-search:focus-within {
    border-color: var(--hype-orange);
    background: var(--pure-white);
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .12);
}

.nc-search[hidden] {
    display: none;
}

.nc-search .nav-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-faint);
}

.nc-search input {
    flex: 1;
    min-width: 0;

    border: 0;
    outline: 0;
    background: transparent;

    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
}

.nc-results {
    margin: 8px 0 0;
    padding: 6px;
    list-style: none;

    max-height: 320px;
    overflow-y: auto;

    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 14px;
    background: var(--pure-white);
    box-shadow: 0 12px 30px rgba(30, 42, 68, .1);
}

.nc-result {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    padding: 8px 10px;

    border: 0;
    border-radius: 10px;
    background: none;

    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nc-result:hover,
.nc-result:focus-visible {
    background: var(--orange-soft);
    outline: none;
}

.nc-result-thumb {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;

    background: var(--surface-warm);
    font-size: 20px;
}

.nc-result-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nc-result-text strong {
    font-size: 14px;
}

.nc-result-text small,
.nc-results-empty {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-muted);
    font-size: 12px;
}

.nc-results-empty {
    padding: 10px;
    font-size: 14px;
}

.nc-picked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 10px 10px 14px;

    border: 1px solid rgba(255, 111, 0, .35);
    border-radius: 12px;
    background: var(--surface-cream);
}

.nc-picked[hidden],
.nc-foods[hidden],
.nc-results[hidden] {
    display: none;
}

.nc-picked-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nc-picked-remove {
    flex-shrink: 0;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: rgb(var(--ink-rgb) / .08);

    color: var(--text-2);
    cursor: pointer;
}

.nc-picked-remove:hover {
    background: rgb(var(--ink-rgb) / .14);
}


/* ---------- Fäst: strömbrytare ---------- */

.nc-switch {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    cursor: pointer;
}

.nc-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.nc-switch-track {
    position: relative;
    flex-shrink: 0;

    width: 44px;
    height: 26px;
    margin-top: 1px;
    border-radius: 999px;

    background: var(--surface-4);
    transition: background .2s ease;
}

.nc-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;

    width: 20px;
    height: 20px;
    border-radius: 50%;

    background: var(--pure-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}

.nc-switch input:checked + .nc-switch-track {
    background: var(--hype-orange);
}

.nc-switch input:checked + .nc-switch-track::after {
    transform: translateX(18px);
}

.nc-switch input:focus-visible + .nc-switch-track {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.nc-switch strong {
    display: block;
    color: var(--dark-text);
    font-size: 15px;
}

.nc-switch small {
    color: var(--text-muted);
    font-size: 13px;
}


/* ---------- Knappar ---------- */

.nc-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.nc-cancel {
    color: var(--text-muted);
    font-weight: 700;
}

/* Ta bort (bara vid redigering) — längst till vänster, långt från Spara */
.nc-delete {
    margin-right: auto;
    padding: 0;

    border: 0;
    background: none;

    color: var(--red-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.nc-delete:hover {
    text-decoration: underline;
}

/* Arkivet (admin): "✏️ Redigera" uppe till höger på bilden */
.news-grid-cell {
    position: relative;
    min-width: 0;
}

.news-card-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;

    padding: 4px 10px;
    border-radius: 999px;

    background: rgb(var(--surface-rgb) / .94);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);

    color: var(--dark-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;

    transition: background .2s ease, color .2s ease;
}

.news-card-edit:hover {
    background: var(--hype-orange);
    color: #fff;
}

.news-card-edit:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Raderna i panelen (desktop): rund ✏️ till höger, syns när man pekar på raden */
@media (min-width: 901px) {

    .news-panel .news-grid-cell .news-item:not(.is-featured) {
        padding-right: 44px;
    }

    .news-panel .news-item:not(.is-featured) + .news-card-edit {
        top: 50%;
        right: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;

        opacity: 0;
        transform: translateY(-50%);
        transition: opacity .2s ease, background .2s ease;
    }

    .news-panel .news-item:not(.is-featured) + .news-card-edit .news-card-edit-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .news-panel .news-grid-cell:hover .news-card-edit,
    .news-panel .news-grid-cell:focus-within .news-card-edit {
        opacity: 1;
    }
}

.nc-cancel:hover {
    color: var(--dark-text);
}

.nc-submit {
    padding: 12px 24px;
    border: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}


/* ---------- Förhandsvisning ---------- */

.news-create-preview {
    position: sticky;
    top: 90px;
}

.nc-preview-card {
    padding: 16px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.nc-preview-label {
    display: block;
    margin-bottom: 12px;

    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nc-preview-card .news-item-media img[hidden],
.nc-preview-card .news-item-emoji[hidden] {
    display: none;
}


@media (max-width: 900px) {

    .news-create {
        padding: 16px 16px 40px;
    }

    .news-create-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-create-preview {
        position: static;
        order: 1;
    }

    .nc-card {
        padding: 18px 16px;
    }

    .nc-actions {
        position: sticky;
        bottom: calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom));   /* ovanför bottenmenyn */
        z-index: 5;

        padding: 12px 14px;
        border-radius: 16px;
        background: rgb(var(--surface-rgb) / .94);
        box-shadow: 0 6px 24px rgba(30, 42, 68, .14);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .nc-submit {
        flex: 1;
    }
}

/* ===== main/css/restaurant_cards.css ===== */
/* =====================================================
   RESTAURANGKORT — tillägg till .mh-card (food_cards.css)
   partials/restaurant_card.html
===================================================== */

.mh-card--restaurant .mh-card-media {
    aspect-ratio: 16 / 10;
}


/* ---------- Populäraste rätten (egen länk ovanpå kortlänken) ---------- */

.mh-featured {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 14px;

    background: var(--orange-soft);
    border: 1px solid rgba(255, 111, 0, .15);

    color: inherit;
    text-decoration: none;

    transition: background .2s ease, border-color .2s ease;
}

.mh-featured:hover {
    background: var(--orange-soft-2);
    border-color: rgba(255, 111, 0, .3);
}

.mh-featured:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.mh-featured-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: var(--pure-white);
    font-size: 16px;
}

.mh-featured-text {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mh-featured-text small {
    color: var(--orange-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mh-featured-text strong {
    color: var(--dark-text);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mh-featured-hype {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}


/* ---------- "Visa restaurang →" (text, hela kortet är länken) ---------- */

.mh-card-more {
    margin-left: auto;

    color: var(--social-blue);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;

    transition: color .2s ease;
}

@media (hover: hover) {

    .mh-card:hover .mh-card-more {
        color: var(--hype-orange);
    }

}

/* 🌍 Importerat ställe som ingen rört än (main/osm.py → Restaurant.is_listing) */
.mh-chip--listing {
    background: rgba(255, 111, 0, 0.12);
    color: var(--hype-orange);
    border: 1px solid rgba(255, 111, 0, 0.3);
    font-weight: 700;
}

.rd-listing {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    line-height: 1.5;
    font-size: 0.92rem;
    background: rgba(255, 111, 0, 0.08);
}

.rd-listing a {
    font-weight: 800;
    color: var(--hype-orange);
}

/* © OpenStreetMap-bidragsgivare under restaurangkortet */
.rd-source {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.rd-source a {
    color: inherit;
    text-decoration: underline;
}

/* ===== main/css/cards.css ===== */
/* =====================================================
   🃏 KORTENS NYA LOOK (partials/food_card.html + restaurant_card.html)
   Bilden i en rundad ram, glas-etiketter på bilden, 🔥 hajpen som ett
   piller nere på bilden, en bred Hajpa-knapp. Tre storlekar:
     - stora kort (rutnätet: Rätter, Restauranger, Sparat, Upptäck …)
     - små kort  (.mh-card--compact, raderna på Hem) — 🔥-pillret är Hajpa-knappen
     - listrader (.layout-list, ☰ Lista på Rätter/Restauranger/Sparat)
   Allt här gäller bara inne i .mh-card, så knapparna (.mh-hype, .mh-chip …)
   på rätt- och restaurangsidorna ser ut som förut.
===================================================== */

.mh-card {
    --hajpad-glow: linear-gradient(135deg, #ff7a1a 0%, #e8520c 45%, #d4430b 100%);

    padding: 8px;
    border-radius: 24px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 1px 2px rgba(16, 24, 40, .05),
        0 12px 32px rgba(16, 24, 40, .1);
}

@media (hover: hover) {
    .mh-card:hover {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .05) inset,
            0 2px 4px rgba(16, 24, 40, .06),
            0 20px 44px rgba(16, 24, 40, .18);
    }
}


/* ---------- Bilden i en ram ---------- */

/* isolation gör ramen till ett eget lager. Utan z-index hamnar det UNDER kortlänken
   (.mh-card-link, z-index 1) — då tog länken trycken på ❤️ och 🔥. Ramen ligger därför
   ovanpå länken men släpper igenom tryck; bara knapparna i den tar emot dem. */
.mh-card .mh-card-media {
    z-index: 2;
    border-radius: 17px;
    isolation: isolate;   /* rundningen klipper även bilden när den zoomar */
    pointer-events: none;
}

.mh-card .mh-card-media .save-btn,
.mh-card .mh-card-media .mh-heat--button {
    pointer-events: auto;
}

/* Mörkt upptill (etiketterna) och nertill (🔥-pillret) — syns på ljusa bilder */
.mh-card .mh-card-media::after {
    inset: 0;
    height: auto;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .3) 0%,
        rgba(0, 0, 0, 0) 32%,
        rgba(0, 0, 0, 0) 55%,
        rgba(0, 0, 0, .55) 100%);
}


/* ---------- Etiketter: glas, högst en status ---------- */

.mh-card .mh-card-chips {
    top: 12px;
    left: 12px;
    right: 66px;
}

.mh-card .mh-chip {
    height: 28px;
    padding: 0 11px;
    box-sizing: border-box;
    font-size: 12.5px;
    box-shadow: none;
}

/* Vanliga (kategori, ort, kedja): mörkt glas */
.mh-card .mh-chip:not([class*="mh-chip--"]),
.mh-card .mh-chip.mh-chip--rank:not(.mh-chip--rank1):not(.mh-chip--rank2):not(.mh-chip--rank3) {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(18, 19, 22, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
}

/* #1 guld, #2 silver, #3 brons */
.mh-card .mh-chip--rank1 { background: #f5c451; color: #1f1600; }
.mh-card .mh-chip--rank2 { background: #d6dae0; color: #16181c; }
.mh-card .mh-chip--rank3 { background: #d79a6b; color: #1f1205; }

/* ✨ Ny: vit text på samma glöd som Hajpad */
.mh-card .mh-chip.mh-chip--new {
    background: var(--hajpad-glow);
    box-shadow: 0 4px 12px rgba(232, 82, 12, .35);
    color: #fff;
    font-weight: 800;
}

.mh-card .mh-chip.mh-chip--listing {
    border-color: rgba(255, 138, 61, .5);
    background: rgba(18, 19, 22, .62);
    color: #ffb27a;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


/* ---------- ❤️ Spara: rund glasknapp ---------- */

.mh-card .save-btn.mh-save {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(18, 19, 22, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
    color: #fff;
}

.mh-card .save-btn.mh-save.active {
    background: rgba(18, 19, 22, .62);
    box-shadow: none;
    color: #ff4d6d;
}

.mh-card .save-btn.mh-save.active.tried,
.mh-card .save-btn.mh-save.active.tried:hover {
    color: #5fd99a;
}


/* ---------- 🔥 Hajpen på bilden ---------- */

.mh-heat {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px 0 10px;
    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(18, 19, 22, .66);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    color: #fff;
    font: inherit;
    line-height: 1;
    pointer-events: none;   /* bara siffran — trycket går till kortlänken */
}

.mh-heat strong {
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.mh-heat-label {
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    font-weight: 600;
}

.mh-flame {
    flex: none;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.mh-heat .mh-flame {
    fill: var(--hype-orange);
}

/* Små kort: pillret är Hajpa-knappen */
.mh-heat--button {
    pointer-events: auto;
    font-size: 14px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.mh-heat--button:hover {
    background: rgba(18, 19, 22, .82);
    color: #fff;
}

.mh-heat--button:active {
    transform: scale(.95);
}

/* 🔥 Hajpad: vit text på en djupare orange glöd (ca 4:1 mot den vita texten) */
.mh-heat--button.active,
.mh-heat--button.active:hover {
    border-color: transparent;
    background: var(--hajpad-glow);
    box-shadow: 0 4px 14px rgba(232, 82, 12, .4);
    color: #fff;
}

.mh-heat--button.active .mh-flame {
    fill: #fff;
}

.mh-heat--button.pop .mh-flame {
    animation: mh-pop .45s cubic-bezier(.3, 1.6, .5, 1);
}

.mh-heat--button:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* 📸 Besökarens bild: nere till höger, 🔥 sitter till vänster */
.mh-card .mh-photo-credit {
    left: auto;
    right: 12px;
    bottom: 17px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(18, 19, 22, .55);
}


/* ---------- Text ---------- */

.mh-card .mh-card-body {
    gap: 8px;
    padding: 14px 8px 6px;
}

.mh-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mh-card-head .mh-card-title {
    flex: 1;
    min-width: 0;
}

/* 🌱🌿🌾🥛 Kost / 🐕 egenskaper bredvid namnet (main/diet.py) */
.mh-card .mh-diet {
    flex-shrink: 0;
    padding-top: 2px;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 1px;
    white-space: nowrap;
}

.mh-card--compact .mh-diet {
    display: none;   /* små kort: namnet behöver platsen */
}

.mh-card .mh-price {
    flex-shrink: 0;
    padding: 2px 0 0;
    background: none;
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mh-card .mh-card-meta {
    color: var(--text-2);
    font-size: 13.5px;
}

.mh-card .mh-card-restaurant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* 📍 "800 m" bredvid stället (partials/food_distance.html, distance.js) */
.mh-card .mh-card-meta:has(.mh-card-distance:not([hidden])) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.mh-card-distance {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-text);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.mh-card-distance[hidden] {
    display: none;
}

.mh-card-initial {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--dark-text);
    font-size: 11px;
    font-weight: 900;
}

.mh-card .mh-card-restaurant:hover .mh-card-initial {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.mh-card .mh-card-verified {
    color: var(--orange-text);
}

/* 💰 Prisnivå: en påse, grå → guld (partials/price_bag.html). Linjeikon som sidomenyns. */
.mh-price-bag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px 0 6px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.mh-price-bag svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mh-price-bag--2 { background: var(--yellow-soft); color: var(--amber-text); }
.mh-price-bag--2 .f { fill: rgba(245, 183, 10, .35); }

.mh-price-bag--3 { background: #fde68a; color: #6b4400; }
.mh-price-bag--3 .f { fill: #f5b70a; }

.mh-price-bag--4 {
    background: linear-gradient(135deg, #ffd54a, #e0a100);
    box-shadow: 0 3px 10px rgba(224, 161, 0, .35);
    color: #3a2a00;
}
.mh-price-bag--4 .f { fill: #fff3c4; }

:root[data-theme="dark"] .mh-price-bag--3 { background: #4a3a12; color: #ffe08a; }


/* ---------- 🔥 Värt hajpen? som en mätare ---------- */

.mh-card .mh-verdict {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--surface-2);
}

.mh-verdict-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.mh-card .mh-verdict strong {
    color: var(--orange-text);
    font-weight: 900;
}

.mh-card .mh-verdict-count {
    margin-left: auto;
    font-size: 12px;
}

.mh-verdict-bar {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(var(--ink-rgb) / .12);
}

.mh-verdict-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--hype-orange);
}

.mh-verdict-bar.is-cold > span {
    background: #60a5fa;
}


/* ---------- Populäraste rätten (restaurangkortet) ---------- */

.mh-card .mh-featured {
    margin-top: 0;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 16px;
    background: var(--surface-2);
}

.mh-card .mh-featured:hover {
    border-color: rgba(255, 111, 0, .35);
    background: var(--surface-2);
}

.mh-featured-img,
.mh-card .mh-featured-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
}

.mh-card .mh-featured-icon {
    background: var(--pure-white);
    font-size: 22px;
}

.mh-card .mh-featured-text small {
    color: var(--text-muted);
}

.mh-card .mh-featured-hype {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--orange-text);
    font-weight: 900;
}

.mh-featured-hype .mh-flame {
    width: 13px;
    height: 13px;
}


/* ---------- Knappar: bred Hajpa, fyrkantiga ikonknappar ---------- */

.mh-card .mh-card-actions {
    gap: 8px;
    padding-top: 4px;
}

.mh-card .mh-hype {
    flex: 1;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 111, 0, .45);
    border-radius: 14px;
    background: rgba(255, 111, 0, .1);
    font-size: 14.5px;
    font-weight: 800;
}

.mh-card .mh-hype:hover {
    border-color: rgba(255, 111, 0, .7);
    background: rgba(255, 111, 0, .16);
}

.mh-card .mh-hype.active,
.mh-card .mh-hype.active:hover {
    border-color: transparent;
    background: var(--hajpad-glow);
    box-shadow: 0 6px 18px rgba(232, 82, 12, .35);
    color: #fff;
}

.mh-card .mh-hype-icon {
    width: auto;
    height: auto;
    margin: 0;
    background: none;
}

.mh-card .mh-hype.active .mh-hype-icon {
    background: none;
    box-shadow: none;
}

.mh-card .mh-hype-icon .mh-flame {
    width: 17px;
    height: 17px;
}

/* Siffran står redan på bilden — i listraderna syns den i knappen */
.mh-card .mh-hype-count {
    display: none;
}

.mh-card .mh-comment,
.mh-card .mh-share--icon,
.mh-card-more {
    height: 44px;
    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 14px;
    background: var(--surface-2);
}

.mh-card .mh-comment {
    padding: 0 14px;
}

.mh-card .mh-share--icon {
    width: 44px;
}

/* → Visa restaurangen: hela kortet är länken, pilen visar det */
.mh-card-more {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    margin-left: 0;
    box-sizing: border-box;
    border-color: transparent;
    background: var(--dark-text);
    color: var(--pure-white);
}

.mh-card-more svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (hover: hover) {
    .mh-card:hover .mh-card-more {
        background: var(--hype-orange);
        color: #1a0d00;
    }
}


/* ---------- Små kort (Hem) ---------- */

.mh-card--compact {
    padding: 6px;
    border-radius: 20px;
}

.mh-card--compact .mh-card-media,
.mh-card--restaurant.mh-card--compact .mh-card-media {
    aspect-ratio: 1;
    border-radius: 15px;
}

.mh-card--compact .mh-card-chips {
    top: 8px;
    left: 8px;
    right: 48px;
}

.mh-card--compact .mh-chip {
    height: 24px;
    padding: 0 8px;
    font-size: 11.5px;
}

/* Kedjans avstånd och "N ställen" får inte plats — orten räcker */
.mh-card--compact .mh-chip[data-points],
.mh-card--compact .mh-chip--offer ~ .mh-chip {
    display: none;
}

.mh-card--compact .save-btn.mh-save {
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
}

.mh-card--compact .save-btn.mh-save svg {
    width: 16px;
    height: 16px;
}

.mh-card--compact .mh-heat {
    left: 8px;
    bottom: 8px;
    height: 32px;
    padding: 0 11px 0 9px;
    gap: 6px;
}

.mh-card--compact .mh-flame {
    width: 14px;
    height: 14px;
}

.mh-card--compact .mh-photo-credit {
    right: 8px;
    bottom: 13px;
}

.mh-card--compact .mh-photo-credit-text {
    display: none;
}

/* Namnet på en egen rad, priset till höger på raden med restaurangen */
.mh-card--compact .mh-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 8px;
    padding: 10px 6px 6px;
}

.mh-card--compact .mh-card-head {
    display: contents;
}

.mh-card--compact .mh-card-title {
    grid-column: 1 / -1;
}

.mh-card--compact .mh-card-meta {
    grid-row: 2;
    grid-column: 1;
    min-width: 0;
}

.mh-card--compact .mh-card-meta-main {
    display: block;
}

.mh-card--compact .mh-card-title {
    font-size: 15px;
    -webkit-line-clamp: 1;
}

.mh-card--compact .mh-price {
    padding-top: 1px;
    font-size: 13px;
}

.mh-card--compact .mh-card-meta {
    font-size: 12.5px;
}

.mh-card--compact .mh-card-initial {
    display: none;
}

.mh-card--compact .mh-price-bag {
    height: 24px;
    padding: 0 5px;
}


/* ---------- Listrader (☰ Lista) ---------- */

.layout-list .mh-card {
    padding: 8px;
    border-radius: 20px;
}

/* Bilden: en rundad ruta till vänster (raden är ankare för ❤️ och etiketterna) */
.layout-list .mh-card .mh-card-media {
    flex: 0 0 96px;
    min-height: 96px;
    border-radius: 0;
    background: none;
}

.layout-list .mh-card .mh-card-media img {
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: 96px;
    height: calc(100% - 16px);
    border-radius: 14px;
    background: var(--surface-warm);
}

.layout-list .mh-card .mh-card-media::after,
.layout-list .mh-heat {
    display: none;
}

.layout-list .mh-card .mh-card-chips {
    top: 13px;
    left: 13px;
    max-width: 86px;
}

.layout-list .mh-card .mh-chip {
    height: 20px;
    padding: 0 6px;
    font-size: 10.5px;
}

.layout-list .mh-card .mh-photo-credit {
    left: 13px;
    right: auto;
    bottom: 13px;
}

.layout-list .mh-card .save-btn.mh-save {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 1px solid rgb(var(--ink-rgb) / .1);
    background: var(--surface-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--dark-text);
}

.layout-list .mh-card .save-btn.mh-save.active {
    color: #ff4d6d;
}

.layout-list .mh-card .save-btn.mh-save.active.tried {
    color: var(--green-text);
}

.layout-list .mh-card .mh-card-body {
    gap: 4px;
    padding: 4px 6px 2px 14px;
}

.layout-list .mh-card-head {
    padding-right: 40px;   /* plats för ❤️ */
}

.layout-list .mh-card-head .mh-card-title {
    padding-right: 0;
}

.layout-list .mh-card .mh-price {
    font-size: 13.5px;
}

.layout-list .mh-card .mh-verdict {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
}

.layout-list .mh-verdict-bar {
    flex: 0 0 56px;
}

.layout-list .mh-card .mh-verdict-count {
    display: none;
}

.layout-list .mh-card .mh-featured {
    padding: 6px 10px 6px 6px;
}

.layout-list .mh-featured-img,
.layout-list .mh-card .mh-featured-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 17px;
}

.layout-list .mh-card .mh-card-actions {
    gap: 6px;
    padding-top: 4px;
}

.layout-list .mh-card .mh-hype {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 12px;
    font-size: 13.5px;
}

.layout-list .mh-card .mh-hype-count {
    display: inline;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.layout-list .mh-card .mh-comment,
.layout-list .mh-card .mh-share--icon,
.layout-list .mh-card-more {
    height: 38px;
}

.layout-list .mh-card .mh-share--icon,
.layout-list .mh-card-more {
    flex-basis: 38px;
    width: 38px;
}

.layout-list .mh-card-more {
    display: none;
}


@media (max-width: 768px) {
    .mh-card {
        padding: 7px;
        border-radius: 22px;
    }

    .mh-card--compact {
        padding: 5px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mh-heat--button,
    .mh-heat--button.pop .mh-flame {
        transition: none;
        animation: none;
    }
}

/* ⚡ Telefoner: glaset (backdrop-filter) på bildernas etiketter kostar grafikkortet vid varje
   scrollsteg — tre per kort, ~150 på Trendigt. På en mörk ruta över ett foto syns suddet knappt,
   så där blir rutan bara lite mörkare i stället (samma läsbarhet). Datorn behåller glaset. */
@media (hover: none) {
    .mh-card .mh-chip:not([class*="mh-chip--"]),
    .mh-card .mh-chip.mh-chip--rank:not(.mh-chip--rank1):not(.mh-chip--rank2):not(.mh-chip--rank3),
    .mh-card .mh-chip.mh-chip--listing {
        background: rgba(18, 19, 22, .72);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* (Listläget har en ljus knapp utan glas — .layout-list väger tyngre och står kvar) */
    .mh-card .save-btn.mh-save {
        background: rgba(18, 19, 22, .66);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mh-heat {
        background: rgba(18, 19, 22, .76);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ===== main/css/home_rails.css ===== */
/* =====================================================
   STARTSIDAN — snabbval, upptäcktsrader i flödet, "Du är ikapp"
   partials/home_rail.html, community/post_feed.html, home.html
   Pilar på raderna: main/javascript/home_rails.js
===================================================== */


/* ---------- Snabbval (kategorichips) ---------- */

.home-chips {
    display: flex;
    gap: 8px;

    margin: 0 0 16px;
    padding: 2px 0 4px;

    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-chips::-webkit-scrollbar {
    display: none;
}

/* Med mus går det inte att svepa, och scrollbaren är dold — då skulle
   chipsen som inte får plats bli oåtkomliga. Låt dem hoppa ner i stället. */
@media (hover: hover) and (pointer: fine) {
    .home-chips {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.home-chip {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 8px 14px;
    border-radius: 999px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);

    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;

    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.home-chip:hover {
    border-color: rgba(255, 111, 0, .45);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.home-chip:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Sist i raden: en länk vidare, inte ett filter — därför ingen ram */
.home-chip-more {
    background: transparent;
    border-color: transparent;
    color: var(--hype-orange);
}


/* ---------- Rubrik + "Visa alla" ---------- */

.home-section-head,
.home-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.home-section-head .section-title {
    margin-bottom: 16px;
}

/* 📍 "🔥 Hajpat i [Sverige ▾] just nu": rubriken är en flexbox (main.css), så texten runt
   ortknappen klämdes ihop ("Hajpat / i", "just / nu") på mobil. Nu radbryts hela delar
   i stället, och länkarna (Karta, Visa alla) hamnar på egen rad när det inte får plats. */
.home-section-head {
    flex-wrap: wrap;
}

.home-section-head .section-title {
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}

/* Telefon: "Hela Sverige" i knappen gör raden för lång — "just nu" hamnade ensamt på en
   egen rad. "🔥 Hajpat i [Hela Sverige ▾]" säger samma sak. */
@media (max-width: 480px) {
    .home-title-now {
        display: none;
    }
}

.home-rail-head h2 {
    margin: 0;

    color: var(--dark-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.home-rail-more {
    flex-shrink: 0;

    color: var(--social-blue);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.home-rail-more:hover {
    color: var(--hype-orange);
}


/* ---------- Raden ---------- */

.home-rail {
    padding: 16px 0 16px 16px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.home-rail-head {
    padding-right: 16px;
    margin-bottom: 12px;
}

.home-rail-scroller {
    position: relative;
}

.home-rail-track {
    display: flex;
    gap: 12px;

    margin: 0;
    padding: 2px 16px 4px 0;
    list-style: none;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-rail-track::-webkit-scrollbar {
    display: none;
}

.home-rail-track > li {
    flex-shrink: 0;
    scroll-snap-align: start;
}


/* ---------- Litet kort (rätt / restaurang) ---------- */

.rail-card {
    display: flex;
    flex-direction: column;
    gap: 3px;

    width: 170px;

    color: inherit;
    text-decoration: none;
}

.rail-card--wide {
    width: 230px;
}

.rail-card-media {
    position: relative;
    display: block;

    aspect-ratio: 4 / 3;
    margin-bottom: 5px;
    border-radius: 14px;
    overflow: hidden;

    background: var(--surface-warm);
}

.rail-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .4s ease;
}

.rail-card:hover .rail-card-media img {
    transform: scale(1.05);
}

.rail-card-rank,
.rail-card-hype {
    position: absolute;

    padding: 3px 8px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.rail-card-rank {
    top: 8px;
    left: 8px;

    background: #1e2a44;
    color: #fff;
}

.rail-card-rank--new {
    background: var(--hype-orange);
}

/* 📡 📈 På väg upp (Upptäck) — Hajpad-glöden, som "Ny" på korten */
.rail-card-rank--rising {
    background: linear-gradient(135deg, #ff7a1a 0%, #e8520c 45%, #d4430b 100%);
}

/* ⏳ Begränsad tid (partials/rail_card_chip.html) — samma färger som .mh-chip--limited m.fl. */
.rail-card-rank--limited { background: #fde68a; color: #713f12; }
.rail-card-rank--last    { background: #dc2626; }
.rail-card-rank--soon    { background: #2563eb; }
.rail-card-rank--ended   { background: #4b5563; }

.rail-card-hype {
    bottom: 8px;
    right: 8px;

    background: rgb(var(--surface-rgb) / .92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    color: var(--dark-text);
}

/* Det man själv har hajpat (hajpas på mat-/restaurangsidan, inte här) */
.rail-card-hype.is-hyped {
    background: var(--hype-orange);
    color: #fff;
}

.rail-card-title {
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-card:hover .rail-card-title {
    color: var(--hype-orange);
}

.rail-card-sub {
    color: var(--text-muted);
    font-size: 13px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-card:focus-visible,
.rail-reel:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
    border-radius: 14px;
}


/* ---------- Reels (stående) ---------- */

.rail-reel {
    position: relative;
    display: block;

    width: 140px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;

    background: #111;
    color: #fff;
    text-decoration: none;
}

.rail-reel img,
.rail-reel video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rail-reel::after {
    content: "";
    position: absolute;
    inset: 50% 0 0 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
    pointer-events: none;
}

.rail-reel-play {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;

    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    font-size: 11px;
}

.rail-reel-title {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---------- Pilar (läggs till av home_rails.js, bara med mus) ---------- */

.home-rail-arrow {
    position: absolute;
    top: 38%;
    z-index: 3;

    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgb(var(--ink-rgb) / .12);
    border-radius: 50%;
    background: var(--pure-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);

    color: var(--dark-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;

    transform: translateY(-50%);
    transition: opacity .2s ease;
}

.home-rail-arrow[hidden] {
    display: none;
}

.home-rail-arrow--prev { left: -4px; }
.home-rail-arrow--next { right: 12px; }

.home-rail-arrow:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- 🍽️ Rätter / 🏪 Restauranger — flikar (home_rails.js → data-hajpat-tab) ----------
   "Hajpat just nu" (home.html, utloggad) och Veckans hajp-topplista. Som flikarna på Trendigt (explore.css). */

.hajpat-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 999px;
    background: rgb(var(--shade-rgb) / 0.05);
}

.hajpat-tab {
    padding: 7px 16px;
    border-radius: 999px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.hajpat-tab:hover {
    color: var(--dark-text);
}

.hajpat-tab.is-active {
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.hajpat-tab:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

[data-hajpat-panel][hidden] {
    display: none;
}


/* ---------- 🏆 Veckans hajp-topplista (partials/weekly_top.html) ---------- */

.weekly-top {
    padding-right: 16px;   /* ingen sidoscroll här, till skillnad från raderna */
}

.weekly-top .home-rail-head {
    padding-right: 0;
}

/* 📸 "Dela topp 10 på Stories" under listan (partials/share_image_button.html) */
.weekly-top-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 14px;
}

.weekly-top-share[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}

.weekly-top-sub {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* Startsidan: orten står överst i varje flik (rätterna och restaurangerna kan
   gälla olika områden), inte under rubriken */
.weekly-top [data-hajpat-panel] > .weekly-top-sub {
    margin: 0 0 6px;
}

/* 🍽️ Rätter | 🏪 Restauranger hela bredden i rutan */
.weekly-top .hajpat-tabs {
    display: flex;
}

.weekly-top .hajpat-tab {
    flex: 1;
    text-align: center;
}

/* Startsidan, utloggad: i sidospalten på dator, i flödet på mobil
   (spalten hamnar ovanför flödet där — weekly_top.html) */
.feed-news > * + .weekly-top--aside {
    margin-top: 24px;
}

.weekly-top-more {
    display: inline-block;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .weekly-top--aside {
        display: none;
    }
}

@media (min-width: 901px) {
    .weekly-top--mobile-only {
        display: none;
    }
}

.weekly-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.weekly-row {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 0;
}

.weekly-row + .weekly-row {
    border-top: 1px solid rgb(var(--ink-rgb) / .06);
}

.weekly-rank {
    flex-shrink: 0;

    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--surface-2);

    color: var(--text-muted);
    font-size: 14px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* Guld, silver, brons */
.weekly-row--top1 .weekly-rank { background: #fde68a; color: #92400e; }
.weekly-row--top2 .weekly-rank { background: var(--surface-3); color: var(--dark-text); }
.weekly-row--top3 .weekly-rank { background: #fed7aa; color: #9a3412; }

.weekly-row--top1 .weekly-thumb {
    box-shadow: 0 0 0 2px #fbbf24;
}

.weekly-link {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;

    color: inherit;
    text-decoration: none;
}

.weekly-thumb {
    flex-shrink: 0;

    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;

    background: var(--surface-warm);
}

.weekly-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.weekly-text strong {
    color: var(--dark-text);
    font-size: 15px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekly-link:hover strong {
    color: var(--hype-orange);
}

.weekly-link:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
    border-radius: 12px;
}

.weekly-text small {
    color: var(--text-muted);
    font-size: 13px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekly-move {
    flex-shrink: 0;

    min-width: 42px;
    padding: 4px 8px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.weekly-move--up   { background: rgba(0, 168, 101, .12); color: var(--green-text); }
.weekly-move--down { background: rgba(225, 29, 72, .1);  color: var(--red-text); }
.weekly-move--new  { background: var(--hype-orange);     color: #fff; }
.weekly-move--same { background: var(--surface-2);                color: var(--text-muted); }


/* ---------- "Har du testat den än?" (partials/tried_it_nudge.html) ---------- */

/* 🎆 Överst på startsidan under siffrorna (home.html → .home-top har redan avstånd mellan delarna) */
.home-top > .hype-year-banner {
    margin: 0;
}

/* 🎆 "Ditt hajp-år är klart!" (partials/hype_year_banner.html) */
.hype-year-banner {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;

    background: linear-gradient(135deg, #ff8a00, #ff3d00);
    box-shadow: 0 8px 24px rgba(255, 61, 0, .25);
    color: #fff;
    text-decoration: none;
}

.hype-year-banner:hover,
.hype-year-banner:focus-visible {
    filter: brightness(1.05);
}

.hype-year-banner-icon {
    font-size: 30px;
    line-height: 1;
}

.hype-year-banner-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hype-year-banner-text strong {
    font-size: 16px;
}

.hype-year-banner-text small {
    font-size: 13px;
    opacity: .9;
}

.hype-year-banner-arrow {
    font-size: 22px;
    font-weight: 800;
}

/* 🎆 Sidan Mitt hajp-år (hype_year.html): riktig text i kortets stil — bilden görs först vid "Dela som bild" */
.hype-year {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 760px;
}

.hype-year-hero {
    padding: 26px 24px 22px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgb(255 61 0 / .22), transparent 75%),
        var(--pure-white);
    border: 1px solid rgba(255, 111, 0, .22);
}

.hype-year-heading {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: clamp(30px, 6vw, 46px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.5px;
}

.hype-year-number {
    color: var(--hype-orange);
    font-size: clamp(76px, 18vw, 132px);
    line-height: .95;
    letter-spacing: -2px;
}

.hype-year-who {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hype-year-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hype-year-tiles li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid var(--border);
}

.hype-year-tiles strong {
    color: var(--orange-text);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
}

.hype-year-tiles span {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

.hype-year-label {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 800;
}

.hype-year-favorite,
.hype-year-dishes a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 16px;
    background: var(--pure-white);
    border: 1px solid var(--border);
    color: var(--dark-text);
    text-decoration: none;
}

.hype-year-favorite:hover,
.hype-year-dishes a:hover {
    border-color: rgba(255, 111, 0, .45);
}

.hype-year-favorite span,
.hype-year-dishes span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hype-year-favorite strong {
    font-size: 20px;
}

.hype-year-favorite small,
.hype-year-dishes small {
    color: var(--text-muted);
    font-size: 13px;
}

.hype-year-thumb {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--surface-2);
}

.hype-year-dishes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hype-year-share-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.hype-year-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hype-year-share[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}

.hype-year-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* Månadsknapparna: tomma månader syns men går inte att välja */
.hype-year-months {
    margin-top: 8px;
}

.hype-year-months .home-chip.is-empty {
    opacity: .4;
    cursor: default;
}

/* 🎯 Veckans utmaning (partials/weekly_challenge.html) — samma form som "Har du testat den än?" */
.weekly-challenge {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;

    background:
        radial-gradient(circle at top right, rgba(255, 111, 0, .12), transparent 60%),
        var(--pure-white);
    border: 1px solid rgba(255, 111, 0, .22);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.weekly-challenge.is-done {
    background:
        radial-gradient(circle at top right, rgb(0 168 101 / .14), transparent 60%),
        var(--pure-white);
    border-color: rgb(0 168 101 / .3);
}

.weekly-challenge-icon {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
}

.weekly-challenge-body {
    flex: 1 1 240px;   /* grundbredden gör att länken hamnar på en egen rad när det blir trångt */
    min-width: 0;
}

.weekly-challenge-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.weekly-challenge.is-done .weekly-challenge-title {
    color: var(--green-text);
}

.weekly-challenge-steps {
    display: flex;
    gap: 6px;
    margin: 8px 0 6px;
    padding: 0;
    list-style: none;
}

.weekly-challenge-step {
    flex: 1;
    max-width: 64px;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-3);
    transition: background .3s ease;
}

.weekly-challenge-step.is-done {
    background: var(--green-engaging);
}

.weekly-challenge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.weekly-challenge-meta [hidden] {
    display: none;
}

.weekly-challenge-streak {
    color: var(--orange-text);
    font-weight: 700;
}

/* 💡 "Säg om rätten var värd hajpen …" — egen rad under siffrorna */
.weekly-challenge-tip {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

.weekly-challenge-link {
    flex: 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
}

.weekly-challenge-link[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .weekly-challenge {
        flex-wrap: wrap;
    }

    .weekly-challenge-link {
        margin-left: 44px;   /* under texten, i linje med den */
    }
}

.tried-it {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 16px;
    padding: 14px;
    border-radius: 18px;

    background:
        radial-gradient(circle at top right, rgba(255, 111, 0, .12), transparent 60%),
        var(--pure-white);
    border: 1px solid rgba(255, 111, 0, .22);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);

    transition: opacity .25s ease, transform .25s ease;
}

.tried-it.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}

.tried-it-media {
    flex-shrink: 0;

    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;

    background: var(--surface-warm);
}

.tried-it-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tried-it-body {
    flex: 1;
    min-width: 0;
}

.tried-it-label {
    display: block;
    margin-bottom: 2px;

    color: var(--orange-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tried-it-title {
    margin: 0 0 10px;

    color: var(--dark-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.tried-it-title a {
    color: var(--dark-text);
    font-weight: 800;
    text-decoration: none;
}

.tried-it-title a:hover {
    color: var(--hype-orange);
}

.tried-it-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 🏅 "Var den värd hajpen?" (partials/verdict_nudge.html) — svarsknapparna direkt i kortet */
.verdict-nudge-choices {
    margin-top: 10px;
}

.verdict-nudge-choices[hidden],
.verdict-nudge [hidden] {
    display: none;
}

.verdict-nudge-skip {
    margin-top: 6px;
}

.verdict-nudge-thanks {
    align-self: center;
    font-weight: 900;
}

.tried-it-actions form {
    margin: 0;
}

@media (max-width: 520px) {

    .tried-it {
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
    }

    .tried-it-media {
        width: 72px;
        height: 72px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .tried-it {
        transition: none;
    }

}


/* ---------- "Du är ikapp" ---------- */

.feed-caught-up {
    padding: 28px 20px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px dashed rgb(var(--ink-rgb) / .18);

    text-align: center;
}

.feed-caught-up-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0, 168, 101, .12);
    color: var(--green-engaging);
    font-size: 22px;
    font-weight: 900;
}

.feed-caught-up p {
    margin: 2px 0;
    color: var(--text-muted);
}

.feed-caught-up p strong {
    color: var(--dark-text);
    font-size: 1.05rem;
}

.feed-caught-up-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 16px;
}


@media (max-width: 520px) {

    .home-rail {
        padding: 14px 0 14px 12px;
        border-radius: 16px;
    }

    .home-rail-head {
        padding-right: 12px;
    }

    .weekly-top {
        padding-right: 12px;
    }

    .weekly-row,
    .weekly-link {
        gap: 10px;
    }

    .weekly-thumb {
        width: 42px;
        height: 42px;
    }

    .rail-card {
        width: 150px;
    }

    .rail-card--wide {
        width: 200px;
    }

    .rail-reel {
        width: 120px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .home-rail-track {
        scroll-behavior: auto;
    }

    .rail-card-media img {
        transition: none;
    }

    .rail-card:hover .rail-card-media img {
        transform: none;
    }

}

/* 🏷️ "Erbjudanden nära dig" (home_rail.html, kind="offers") */
.rail-card-rank--offer { background: #15803d; }

/* ===== main/css/rings.css ===== */
/* =====================================================
   ⭕ STORY-RINGAR — samma runda ikon överallt där man väljer ett sug eller en kategori
   (som Instagram-stories/höjdpunkter):
     - startsidans hero, utloggad           cravings/_rings.html (via sugen_hero_rings)
     - Sugen-kortet, inloggad               cravings/_home_tiles.html → cravings/_rings.html
     - Upptäck: populära kategorier         discover/discover.html
     - Mat/Restauranger: kategorifiltret    partials/category_menu.html (tiles=True)
     - Sugen?-frågorna, steg 1              cravings/quiz.html (radioknappar)
   Restaurangsidans höjdpunkter (detail.css) och profilens märken (profile.css) är egna ringar.

   Markup:
     <div class="home-rail-scroller mh-rings-scroller">   ‹ › med mus (home_rails.js)
       <nav class="mh-rings" data-rail-track>
         <a class="mh-ring [is-empty|is-quiet|is-active]">
           <span class="mh-ring-face">img / emoji / svg <span class="mh-ring-pill">3</span></span>
           <span class="mh-ring-name">Pizza</span>

   Ringens springa ska ha bakgrundens färg: sätt --ring-gap där raden ligger.
   Knappens orange (#C2410C) i stället för --hype-orange där det är text eller ikon:
   vit/orange på ljust måste gå att läsa.
   ===================================================== */

.mh-ring {
    --ring-size: 64px;
    --ring-gradient: conic-gradient(#FF6F00, #FFC107, #FF6F00);
    --ring-icon: #C2410C;

    flex: 0 0 calc(var(--ring-size) + 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;                /* plats för pillret under ringen */
    min-width: 0;
    border-radius: 12px;
    color: var(--dark-text);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

:root[data-theme="dark"] .mh-ring {
    --ring-icon: var(--orange-text);
}

.mh-ring:hover {
    color: var(--dark-text);
}

/* Ringen: gradient i kanten, en tunn springa i bakgrundens färg och sedan bilden */
.mh-ring-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ring-size);
    height: var(--ring-size);
    box-sizing: border-box;
    border: 3px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--orange-soft), var(--orange-soft)) padding-box,
        var(--ring-gradient) border-box;
    box-shadow: inset 0 0 0 3px var(--ring-gap, var(--pure-white));
    font-size: calc(var(--ring-size) * 0.4);
    line-height: 1;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mh-ring-face img {
    width: 66%;
    height: 66%;
    object-fit: contain;
}

.mh-ring-face svg {
    width: 40%;
    height: 40%;
    color: var(--ring-icon);
}

/* Inget i området / Överraska mig: grå ring, lite dämpad */
.mh-ring.is-empty .mh-ring-face,
.mh-ring.is-quiet .mh-ring-face {
    background:
        linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
        linear-gradient(var(--border-strong), var(--border-strong)) border-box;
}

.mh-ring.is-empty .mh-ring-face > :not(.mh-ring-pill) {
    opacity: .75;
}

/* Vald (kategorifiltret, frågornas radioknapp): gradient + glöd, namnet i orange */
.mh-ring.is-active .mh-ring-face,
.mh-ring:has(input:checked) .mh-ring-face {
    background:
        linear-gradient(var(--orange-soft-2), var(--orange-soft-2)) padding-box,
        var(--ring-gradient) border-box;
    box-shadow:
        inset 0 0 0 3px var(--ring-gap, var(--pure-white)),
        0 6px 18px rgba(255, 111, 0, .28);
}

.mh-ring.is-active,
.mh-ring:has(input:checked) {
    color: var(--orange-text);
}

.mh-ring.is-active .mh-ring-name,
.mh-ring:has(input:checked) .mh-ring-name {
    font-weight: 800;
}

.mh-ring:hover .mh-ring-face {
    transform: scale(1.06);
}

.mh-ring:focus-visible {
    outline: none;
}

.mh-ring:focus-visible .mh-ring-face,
.mh-ring:has(input:focus-visible) .mh-ring-face {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}

/* Pillret som överlappar ringens nederkant (som Instagrams LIVE) */
.mh-ring-pill {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    min-width: 22px;
    padding: 2px 7px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 2px solid var(--ring-gap, var(--pure-white));
    background: var(--pure-white);
    color: var(--orange-text);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
}

.mh-ring-pill--hot {
    background: #C2410C;
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Bocken på frågornas valda ring — bara när den är vald */
.mh-ring-pill--check {
    display: none;
    background: #C2410C;
    color: #fff;
}

.mh-ring:has(input:checked) .mh-ring-pill--check {
    display: block;
}

.mh-ring:has(input:checked) .mh-ring-pill:not(.mh-ring-pill--check) {
    display: none;
}

.mh-ring-name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}

/* Radioknappen i frågorna syns inte — hela ringen är valet */
.mh-ring input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Raden ---------- */

.mh-rings-scroller {
    min-width: 0;
}

.mh-rings {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 4px 6px;
    margin: 0 -4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mh-rings::-webkit-scrollbar {
    display: none;
}

/* ‹ › mitt på ringarna (home_rails.js, bara med mus) */
.mh-rings-scroller .home-rail-arrow {
    top: 18px;
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.mh-rings-scroller .home-rail-arrow--prev { left: -12px; }
.mh-rings-scroller .home-rail-arrow--next { right: -12px; }

@media (prefers-reduced-motion: reduce) {
    .mh-ring-face {
        transition: none;
    }

    .mh-rings {
        scroll-behavior: auto;
    }
}

/* ===== main/css/home_hero.css ===== */
/* =====================================================
   👋 STARTSIDANS HERO FÖR UTLOGGADE (partials/home_hero.html)

   Dator  — A · Flödet: text till vänster; Sugen-ringarna och två lutande
            matkort (de mest hajpade rätterna) till höger.
   Mobil  — B · Stories: ringarna överst som Instagram-stories, frågan och
            Gå med / Logga in. Korten döljs — "Hajpat i … just nu" kommer direkt under.

   Knappens orange är mörkare (#C2410C) än --hype-orange: vit text på
   #FF6F00 är för svag att läsa (2,9:1). Ljusa orangen finns kvar i ringarna.
   ===================================================== */

.mh-hero {
    --hero-cta: #C2410C;
    --hero-cta-hover: #9A3412;
    --hero-accent: #E8590C;          /* rubrikens färgade ord (stor text: 3:1 räcker) */
    --hero-eyebrow-text: #9A3412;
    --hero-ring: conic-gradient(#FF6F00, #FFC107, #FF6F00);
    --ring-gap: var(--surface-cream);   /* ringarnas springa (main/css/rings.css) */

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
        "text rings"
        "text cards";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    row-gap: 18px;

    margin: 8px 0;
    padding: 44px 52px;
    border-radius: 28px;
    background: var(--surface-cream);
    border: 1px solid rgb(var(--shade-rgb) / 0.06);
    color: var(--dark-text);
    overflow: hidden;
}

:root[data-theme="dark"] .mh-hero {
    --hero-accent: #FF8A3D;
    --hero-eyebrow-text: var(--orange-text);
}

/* Samma markup, olika text på dator och mobil (dubbla klasser: väger tyngre än .mh-hero-btn) */
.mh-hero-mobile,
.mh-hero-btn.mh-hero-mobile {
    display: none;
}

/* ---------- Text ---------- */

.mh-hero-text {
    grid-area: text;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.mh-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--orange-soft-2);
    color: var(--hero-eyebrow-text);
    font-size: 13.5px;
    font-weight: 700;
}

.mh-hero-eyebrow .nav-icon {
    width: 15px;
    height: 15px;
}

.mh-hero-title {
    margin: 0;
    font-size: clamp(2.5rem, 4.2vw, 3.9rem);
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.mh-hero-title em {
    font-style: normal;
    color: var(--hero-accent);
}

.mh-hero-lead {
    margin: 0;
    max-width: 30em;
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--text-2);
}

.mh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mh-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.mh-hero-btn:hover {
    color: var(--dark-text);
    border-color: var(--border-strong);
}

.mh-hero-btn--primary {
    border-color: transparent;
    background: var(--hero-cta);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(194, 65, 12, 0.25);
}

.mh-hero-btn--primary:hover {
    color: #fff;
    background: var(--hero-cta-hover);
    transform: translateY(-1px);
}

.mh-hero-btn:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}

/* 👋 "elin, ahmed och 21 till hajpade mat idag" */
.mh-hero-people {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 0;
    font-size: 14.5px;
    color: var(--text-2);
}

.mh-hero-people strong {
    color: var(--dark-text);
}

.mh-hero-faces {
    display: flex;
    flex-shrink: 0;
    padding-left: 9px;
}

.mh-hero-faces a {
    margin-left: -9px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--surface-cream);
}

.mh-hero-faces .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 13px;
}

.mh-hero-facts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.mh-hero-facts .nav-icon {
    width: 15px;
    height: 15px;
    color: var(--orange-text);
}

/* ---------- ⭕ Sugen? som story-ringar (stilen: main/css/rings.css) ---------- */

.mh-hero .mh-rings-scroller {
    grid-area: rings;
}

/* ---------- 🍽️ Två matkort som i ett flöde (bara dator) ---------- */

.mh-hero-cards {
    grid-area: cards;
    position: relative;
    min-height: 410px;
}

.mh-hero-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: var(--pure-white);
    color: var(--dark-text);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 24px 56px rgb(0 0 0 / 0.14);
    transition: transform .25s ease;
}

.mh-hero-card:hover {
    color: var(--dark-text);
}

.mh-hero-card img {
    display: block;
    width: 100%;
    object-fit: cover;
    background: var(--surface-warm);
}

.mh-hero-card--back {
    top: 6px;
    left: 0;
    width: 56%;
    transform: rotate(-4deg);
}

.mh-hero-card--back img {
    height: 220px;
}

.mh-hero-card--front {
    top: 52px;
    right: 0;
    width: 54%;
    transform: rotate(3deg);
}

.mh-hero-card--front:hover {
    transform: rotate(3deg) translateY(-4px);
}

.mh-hero-card--back:hover {
    transform: rotate(-4deg) translateY(-4px);
}

.mh-hero-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    min-width: 0;
}

.mh-hero-card-head > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mh-hero-card-head strong,
.mh-hero-card-body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.mh-hero-card-head small,
.mh-hero-card-body small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-muted);
}

.mh-hero-card-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--orange-soft-2), var(--orange-soft-2)) padding-box,
        var(--hero-ring) border-box;
    color: var(--hero-eyebrow-text);
    font-size: 13px;
    font-weight: 800;
}

.mh-hero-card-foot,
.mh-hero-card-hype {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--orange-text);
}

.mh-hero-card-foot {
    padding: 11px 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mh-hero-card-foot .nav-icon,
.mh-hero-card-hype .nav-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.mh-hero-card-media {
    position: relative;
}

.mh-hero-card-media img {
    height: 200px;
}

.mh-hero-card-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFC107;
    color: #1f1600;
    font-size: 12px;
    font-weight: 800;
}

.mh-hero-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 14px;
    min-width: 0;
}

.mh-hero-card-hype {
    margin-top: 4px;
}

.mh-hero-pill {
    position: absolute;
    left: 8%;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--pure-white);
    color: var(--dark-text);
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.12);
}

.mh-hero-pill:hover {
    color: var(--dark-text);
}

/* Smal dator / surfplatta: korten får för lite plats — bara ringarna bredvid texten */
@media (max-width: 1100px) and (min-width: 769px) {
    .mh-hero {
        column-gap: 32px;
        padding: 36px 36px;
    }

    .mh-hero-card--back {
        display: none;
    }

    .mh-hero-card--front {
        left: 8%;
        right: auto;
        width: 76%;
        top: 12px;
    }
}

/* ---------- 📱 Mobil: B · Stories ---------- */

@media (max-width: 768px) {
    .mh-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "rings"
            "text";
        grid-template-rows: auto auto;
        row-gap: 16px;
        margin: 0 0 4px;
        padding: 6px 0 18px;
        border: none;
        border-radius: 0;
        background: none;
        overflow: visible;
    }

    .mh-hero-desktop {
        display: none;
    }

    .mh-hero-mobile {
        display: inline;
    }

    /* Svep i full bredd, ända ut i kanten; ringens springa i sidans färg */
    .mh-hero .mh-rings-scroller {
        --ring-gap: var(--page-bg);
    }

    .mh-hero .mh-rings {
        margin: 0 -16px;
        padding: 4px 16px 10px;
        border-bottom: 1px solid var(--border);
    }

    .mh-hero-text {
        align-items: stretch;
        gap: 14px;
        text-align: center;
    }

    .mh-hero-eyebrow,
    .mh-hero-facts,
    .mh-hero-cards {
        display: none;
    }

    .mh-hero-title {
        font-size: clamp(2rem, 9vw, 2.5rem);
    }

    .mh-hero-lead {
        max-width: none;
        font-size: 1rem;
    }

    .mh-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mh-hero-btn {
        display: flex;
        border-radius: 999px;
        padding: 0 16px;
    }

    .mh-hero-btn.mh-hero-desktop {
        display: none;
    }

    /* Logga in: vit med orange kant — grått smälte ihop med sidans gråa bakgrund */
    .mh-hero-btn.mh-hero-mobile {
        display: flex;
        background: var(--pure-white);
        border: 1.5px solid rgba(255, 111, 0, .5);
        color: var(--orange-text);
        font-weight: 800;
        box-shadow: 0 4px 12px rgba(30, 42, 68, .06);
    }

    .mh-hero-btn.mh-hero-mobile:hover {
        border-color: var(--hype-orange);
        background: var(--orange-soft);
        color: var(--orange-text);
    }

    .mh-hero-people {
        justify-content: center;
        font-size: 13.5px;
        text-align: left;
    }

    .mh-hero-faces a {
        box-shadow: 0 0 0 3px var(--page-bg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mh-hero-btn,
    .mh-hero-card {
        transition: none;
    }
}

/* ===== main/css/explore.css ===== */
/* =====================================================
   TRENDIGT + UPPTÄCK (trending.html, discover/discover.html)
   Samma formspråk som startsidan: vita kort, rundade hörn, chips.
   Återanvänder .home-chip, .home-rail, .home-section-head
   (home_rails.css) och korten (.mh-card, food_cards.css).
===================================================== */

.explore-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 90px;
}


/* ---------- Rubrik ---------- */

.explore-hero {
    margin-bottom: 28px;
    padding: 28px 28px 22px;
    border-radius: 20px;

    background:
        radial-gradient(circle at top right, rgba(255, 111, 0, .1), transparent 55%),
        var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.explore-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 5px 12px;
    border-radius: 999px;

    background: rgba(255, 111, 0, .1);
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 800;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-engaging);
    box-shadow: 0 0 0 0 rgba(0, 168, 101, .5);
    animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 168, 101, .5); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 168, 101, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 168, 101, 0); }
}

.explore-hero h1 {
    margin: 12px 0 6px;

    color: var(--dark-text);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.explore-hero p {
    max-width: 640px;
    margin: 0;

    color: var(--text-muted);
    line-height: 1.5;
}

.explore-hero .explore-note {
    margin-top: 8px;
    color: var(--orange-text);
    font-weight: 600;
}

.explore-chips {
    margin: 18px 0 0;
}


/* ---------- 🗺️ Kartkortet + 📈 Trendigt / 🎬 Reels (Upptäck) ---------- */

.explore-shortcuts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}

.explore-shortcuts.no-map {
    grid-template-columns: 1fr;
}

.explore-shortcut-tiles {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 12px;
}

.no-map .explore-shortcut-tiles {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.explore-shortcut {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;

    padding: 14px 16px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    color: var(--dark-text);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.explore-shortcut:hover {
    border-color: rgba(255, 111, 0, .35);
    transform: translateY(-2px);
}

.explore-shortcut-emoji {
    font-size: 22px;
}

.explore-shortcut small {
    color: var(--text-muted);
    font-size: 13px;
}

.map-teaser {
    position: relative;
    isolation: isolate;   /* Leaflets z-index stannar i kortet */
    overflow: hidden;
    min-height: 190px;
    border-radius: 18px;

    background: var(--surface-warm);   /* syns tills kartbilderna laddat */
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

.map-teaser[hidden] {
    display: none;
}

.map-teaser-canvas {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--surface-warm);
}

.map-teaser .leaflet-container {
    cursor: inherit;
    font: inherit;
}

[data-theme="dark"] .map-teaser .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.6);
}

.map-teaser .leaflet-control-attribution {
    background: rgb(var(--surface-rgb) / .85);
    color: var(--text-muted);
    font-size: 10px;
}

/* Texten som en remsa längst ner, ovanför kartan */
.map-teaser-text {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 22px;   /* ovanför OSM-krediten */
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 14px;
    border-radius: 14px;
    background: var(--pure-white);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);

    color: var(--dark-text);
    text-decoration: none;
}

.map-teaser-text > span:first-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.map-teaser-text small {
    color: var(--text-muted);
    font-size: 13px;
}

.map-teaser-open {
    flex-shrink: 0;
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 800;
}

.map-teaser-text:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .explore-shortcuts {
        grid-template-columns: 1fr;
    }

    .explore-shortcut-tiles {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        grid-auto-rows: auto;
    }

    .map-teaser {
        min-height: 170px;
    }
}

/* Trendigt: 🍽️ Mat | 🏪 Restauranger — ett val av lista, inte ett filter,
   därför en egen reglage-stil ovanför kategorichipsen */
.explore-tabs {
    display: inline-flex;
    gap: 4px;
    max-width: 100%;
    box-sizing: border-box;

    margin: 18px 0 0;
    padding: 4px;
    border-radius: 999px;
    overflow-x: auto;   /* 📡 fem flikar på Trendigt: sveps i sidled på mobil */
    scrollbar-width: none;

    background: rgb(var(--ink-rgb) / .06);
}

.explore-tabs::-webkit-scrollbar {
    display: none;
}

.explore-tab {
    padding: 8px 18px;
    border-radius: 999px;

    color: var(--text-muted);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;

    transition: background .2s ease, color .2s ease;
}

.explore-tab:hover {
    color: var(--dark-text);
}

.explore-tab.is-active {
    background: var(--pure-white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    color: var(--dark-text);
}

.explore-tab:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.explore-tabs + .explore-chips {
    margin-top: 12px;
}

/* Valt filter/område */
.home-chip.is-active {
    border-color: var(--hype-orange);
    background: var(--hype-orange);
    color: #fff;
}


/* ---------- Trendigt: lista + sidopanel ---------- */

.explore-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 28px;
}

.explore-main {
    min-width: 0;
}

/* Bredvid sidopanelen: två kort i bredd i stället för ett stort */
.explore-grid {
    --feed-card-min: 240px;
    --feed-gap: 18px;
}

/* ---------- 📡 Radar: 📈 På väg upp / 💎 Guldkorn (main/radar.py) ---------- */

/* Kortet + raden som förklarar varför det visas */
.radar-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.radar-item > .mh-card {
    flex: 1;
}

.radar-reason {
    margin: 0;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

.radar-empty-note {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--pure-white);
    border: 1px dashed rgb(var(--ink-rgb) / .18);
    color: var(--text-2);
    line-height: 1.5;
}

/* 🍽️ "Sugen på något sånt?" → Sugen? */
.radar-sugen {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--orange-soft);
    border: 1px solid rgba(255, 111, 0, .3);
    color: var(--dark-text);
    text-decoration: none;
    transition: border-color .15s ease;
}

.radar-sugen:hover {
    border-color: var(--hype-orange);
}

.radar-sugen:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.radar-sugen-icon {
    font-size: 28px;
    line-height: 1;
}

.radar-sugen-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.radar-sugen-text small {
    color: var(--text-muted);
    font-size: 13.5px;
}

.radar-sugen-arrow {
    color: var(--orange-text);
    font-size: 20px;
    font-weight: 800;
}

/* Inte sticky: panelen (restauranger + topplista + nyheter) är högre än
   skärmen, och då gick nederdelen inte att nå förrän listan tog slut */
.explore-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}


/* ---------- Upptäck: sektioner ---------- */

.explore-section {
    margin-top: 36px;
}

.explore-section-title {
    margin: 0 0 14px;

    color: var(--dark-text);
    font-size: 1.25rem;
    font-weight: 800;
}


/* Kategorierna på Upptäck: main/css/category_menu.css (.cat-popular, .cat-groups) */


/* Tomt läge */

.explore-empty {
    padding: 36px 20px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px dashed rgb(var(--ink-rgb) / .18);

    text-align: center;
}

.explore-empty-icon {
    margin-bottom: 8px;
    font-size: 36px;
}

.explore-empty h2 {
    margin: 0 0 4px;
    color: var(--dark-text);
    font-size: 1.1rem;
}

.explore-empty p {
    margin: 0 0 16px;
    color: var(--text-muted);
}


/* ---------- 404 / 403 (404.html, 403.html) ---------- */

.error-page {
    display: grid;
    place-items: center;
    min-height: 60vh;
}

.error-card {
    width: 100%;
    max-width: 520px;
    padding: 36px 24px;
    border-radius: 24px;
    background: var(--pure-white);
    text-align: center;
}

.error-plate {
    font-size: 64px;
    line-height: 1;
}

.error-code {
    margin: 10px 0 0;
    color: var(--hype-orange);
    font-weight: 800;
    letter-spacing: .12em;
}

.error-card h1 {
    margin: 4px 0 8px;
    color: var(--dark-text);
    font-size: 1.7rem;
}

.error-lead {
    margin: 0 0 20px;
    color: var(--text-muted);
    line-height: 1.5;
}

.error-search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.error-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
}

.error-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.error-help {
    margin: 20px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.error-help a {
    color: var(--social-blue);
}


/* Vidare-kort längst ner på Upptäck */

.explore-more {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.explore-more-card {
    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 18px;
    border-radius: 16px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);

    color: inherit;
    text-decoration: none;

    transition: border-color .2s ease, transform .2s ease;
}

.explore-more-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 111, 0, .4);
}

.explore-more-card span {
    margin-bottom: 4px;
    font-size: 24px;
}

.explore-more-card strong {
    color: var(--dark-text);
    font-size: 16px;
}

.explore-more-card small {
    color: var(--text-muted);
    font-size: 13px;
}


/* ---------- Profil (profile.html) ---------- */

.profile-hero-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 20px;
}

/* Stor avatar med orange ring */
.profile-avatar-ring {
    flex-shrink: 0;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hype-orange), #fdba74);
}

.profile-avatar-ring .avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;
    border: 4px solid var(--pure-white);
    border-radius: 50%;
    object-fit: cover;

    font-size: 36px;
}

.profile-identity {
    flex: 1;
    min-width: 0;
}

.profile-identity h1 {
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}

.profile-hero .profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.profile-follows-you {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 168, 101, .12);
    color: var(--green-text);
    font-size: 13px;
    font-weight: 700;
}

.profile-blocked-note {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--soft-gray);
    color: var(--text-2);
}

.explore-hero + .profile-section,
.explore-hero + .profile-posts {
    margin-top: 0;
}

/* ---------- 📸 Bildrutnätet (partials/profile_photo_grid.html) ----------
   Som Instagram: stående 3:4-rutor (mat fotas oftast stående) och nästan inget
   mellanrum. Fyra i bredd, tre på telefonen. Profilen, restaurangens bilder och bildsidan. */

.profile-photos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-photo {
    position: relative;   /* märkena i hörnet (partials/photo_tile_marks.html) */
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 2px;
    background: var(--soft-gray);
}

.profile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lätt mörkare vid hover, som på Instagram (ingen zoom) */
.profile-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0);
    transition: background .15s ease;
    pointer-events: none;
}

.profile-photo:hover::after,
.profile-photo:focus-visible::after {
    background: rgb(0 0 0 / .38);
}

/* 🔥 hajp · 💬 kommentarer mitt på bilden vid hover/fokus (som Instagram). Inte på touch —
   där finns ingen hover, och ett tryck öppnar inlägget med siffrorna direkt. */
.photo-tile-stats {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px;

    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgb(0 0 0 / .5);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.photo-tile-stats > span {
    white-space: nowrap;
}

.profile-photo:hover .photo-tile-stats,
.profile-photo:focus-visible .photo-tile-stats {
    opacity: 1;
}

@media (hover: none) {
    .photo-tile-stats { display: none; }
}

/* 📌 fäst · 🖼️ flera bilder — i övre hörnen, som på Instagram */
.photo-tile-mark {
    position: absolute;
    z-index: 1;   /* över hover-tonen */
    top: 6px;
    display: grid;
    place-items: center;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6));
    pointer-events: none;
}

.photo-tile-mark.is-multi { right: 6px; }
.photo-tile-mark.is-pin { left: 6px; font-size: 15px; }

.profile-photo:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: -3px;   /* inne i rutan — mellanrummet är bara 2 px */
}

/* Telefonen: tre i bredd (fyra blir för små). "Senaste bilderna" och restaurangens
   förhandstitt har 8 = två rader med fyra — här två hela rader med tre. */
@media (max-width: 600px) {
    .profile-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .profile-photo-strip .profile-photos li:nth-child(n+7),
    .restaurant-detail-page .rd-media .profile-photos li:nth-child(n+7) { display: none; }
}

/* Bildsidan (/restaurang/<slug>/bilder/): lagom bred, som Instagrams profil */
.restaurant-photos-page .rd-media {
    max-width: 935px;
}

.profile-photos-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

/* Bildvisaren (main/javascript/photo_viewer.js) */
.photo-viewer {
    width: min(720px, calc(100vw - 128px));   /* plats för ‹ › utanför */
    max-height: calc(100dvh - 110px);   /* plats ovanför för ✕ (dialogen centreras) */
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    overflow: visible;
}

.photo-viewer::backdrop {
    background: rgb(0 0 0 / .78);
}

.photo-viewer-body {
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
}

.photo-viewer-body .feed-post {
    margin: 0;
}


/* ---------- Skrivrutan alltid synlig längst ner (som Facebook) ----------
   Kortet blir en kolumn och kommentarstrådens delar blir egna rader i
   den (display: contents). Då kan skrivrutan fästas mot popupens
   nederkant medan inlägget och kommentarerna rullar ovanför. */

/* En ny kommentar rullas fram ovanför skrivrutan (comments.js).
   Inte scroll-padding på hela rutan — då ligger skrivrutan i den
   "dolda" kanten och webbläsaren rullar ner vid varje tangent. */
.photo-viewer-body .cmt {
    scroll-margin-bottom: 84px;
}

.photo-viewer-body .feed-post {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 20px;
}

.photo-viewer-body .feed-post-comments,
.photo-viewer-body .feed-post-comments .cthread:not([hidden]) {
    display: contents;
}

.photo-viewer-body .cthread-list {
    margin: 0;
    padding: 16px 18px 10px;
    border-top: 1px solid rgb(var(--ink-rgb) / .06);
}

.photo-viewer-body .cthread-error {
    margin: 8px 18px 0;
}

.photo-viewer-body .cthread-more {
    align-self: flex-start;
    margin: 0 18px 12px 60px;   /* i linje med bubblorna */
}

.photo-viewer-body .cthread > .cthread-form,
.photo-viewer-body .cthread > .cthread-login {
    order: 1;   /* sist i kortet, efter kommentarerna */
    position: sticky;
    bottom: 0;
    z-index: 3;

    margin: 0;
    padding: 12px 16px;

    background: rgb(var(--surface-rgb) / .88);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow: 0 -8px 24px rgb(0 0 0 / .06);
}

.photo-viewer-body .cthread > .cthread-login {
    text-align: center;
}

.photo-viewer-body .cthread > .cthread-form input[type=text] {
    padding-top: 11px;
    padding-bottom: 11px;
    background: var(--surface-2);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.photo-viewer-body .cthread > .cthread-form input[type=text]:focus {
    background: var(--pure-white);
    border-color: rgba(255, 111, 0, .45);
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .12);
}

.photo-viewer-body .cthread > .cthread-form .cthread-send {
    width: 40px;
    height: 40px;
}

.photo-viewer-body .cthread-send {
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.photo-viewer-body .cthread-send:not(:disabled):active {
    transform: scale(.9);
}

/* Grå skicka-knapp tills man skrivit något */
.photo-viewer-body .cthread-form:has(input:placeholder-shown) .cthread-send {
    background: var(--surface-3);
    color: var(--text-faint);
}

.photo-viewer-body[aria-busy="true"]:empty {
    min-height: 240px;
    background: var(--pure-white);
}

.photo-viewer-close,
.photo-viewer-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    /* Ljusa knappar: syns mot den mörka bakgrunden runt kortet (även i mörkt tema)
       och ovanpå bilden på mobil — svarta försvann i mörkret */
    background: rgb(255 255 255 / .92);
    color: #111827;
    box-shadow: 0 4px 14px rgb(0 0 0 / .35);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.photo-viewer-close:hover,
.photo-viewer-nav:hover {
    background: #fff;
}

.photo-viewer-close:focus-visible,
.photo-viewer-nav:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.photo-viewer-close:active { transform: scale(.92); }
.photo-viewer-nav:active { transform: translateY(-50%) scale(.92); }

/* Ovanför kortet, så att den inte täcker inläggets ⋯-meny */
.photo-viewer-close { top: -50px; right: 0; }
.photo-viewer-nav { top: 50%; transform: translateY(-50%); font-size: 32px; }
.photo-viewer-prev { left: -52px; }
.photo-viewer-next { right: -52px; }
.photo-viewer-nav[hidden] { display: none; }

.photo-viewer-count {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ---------- 🖼️ Bildinlägg bredvid kommentarerna (dator, som Instagram) ----------
   Gäller bara det ÖPPNADE inlägget — popupen ovan och inläggets sida (post_detail.html) —
   och bara inlägg med bild (.post-media). Flödet, mobilen, textinlägg och videolänkar
   ser ut som förut. Samma post_card.html: bilden (.post-media) läggs absolut i en
   vänsterkolumn som inte rullar, och resten av kortet blir kolumnen till höger, som
   rullar för sig med skrivrutan fäst i botten.

   Bildkolumnens bredd = rutans bredd − SIDE (procent mot rutan, som är positionerad). */
@media (min-width: 1024px) {

    .photo-viewer:has(.post-media) {
        width: min(1200px, calc(100vw - 128px));
    }

    .post-detail-page:has(.post-media) {
        max-width: 1200px;
        padding: 0 24px;
    }

    .photo-viewer-body:has(.post-media),
    .post-detail-page .post-feed:has(.post-media) {
        --side: 400px;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
    }

    .photo-viewer-body .feed-post:has(.post-media),
    .post-detail-page .feed-post:has(.post-media) {
        display: flex;
        flex-direction: column;
        height: min(860px, calc(100dvh - 110px));
        padding-left: calc(100% - var(--side));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 20px;
    }

    .post-detail-page .feed-post:has(.post-media) {
        height: min(820px, 80dvh);
    }

    .photo-viewer-body .feed-post:has(.post-media) .post-media,
    .post-detail-page .feed-post:has(.post-media) .post-media {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        display: flex;
        width: calc(100% - var(--side));
        margin: 0;   /* i flödet är bilden infälld (feed.css, Inläggskortet 2026) — här fyller den kolumnen */
        overflow: hidden;
        background: #000;
        border-radius: 20px 0 0 20px;
    }

    :is(.photo-viewer-body, .post-detail-page) .post-media > .post-image,
    :is(.photo-viewer-body, .post-detail-page) .post-media > .post-carousel {
        flex: 1;
        min-width: 0;
        height: 100%;
        margin: 0;
    }

    :is(.photo-viewer-body, .post-detail-page) .post-media .post-image {
        align-items: center;
        max-height: none;   /* flödets has-ratio-gräns — här fyller bilden hela höjden */
        border-radius: 0;
        background: #000;
    }

    :is(.photo-viewer-body, .post-detail-page) .post-media .post-carousel-track {
        border-radius: 0;
    }

    :is(.photo-viewer-body, .post-detail-page) .post-media .post-image-main {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
    }

    :is(.photo-viewer-body, .post-detail-page) .post-media .post-carousel-track,
    :is(.photo-viewer-body, .post-detail-page) .post-media .post-carousel-slide {
        height: 100%;
    }

    :is(.photo-viewer-body, .post-detail-page) .post-media .post-carousel-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 14px;
        padding: 0;
    }

    :is(.photo-viewer-body, .post-detail-page) .post-media .post-carousel-dots span {
        background: rgb(255 255 255 / .5);
    }

    :is(.photo-viewer-body, .post-detail-page) .post-media .post-carousel-dots span.is-active {
        background: #fff;
    }

    /* Högerkolumnen: rubriken överst medan resten rullar */
    :is(.photo-viewer-body, .post-detail-page) .feed-post:has(.post-media) .post-header {
        position: sticky;
        top: 0;
        z-index: 4;
        padding-bottom: 14px;
        background: var(--pure-white);
        border-bottom: 1px solid rgb(var(--ink-rgb) / .06);
    }

    /* Hajpa/Dela precis ovanför skrivrutan, som på Instagram */
    :is(.photo-viewer-body, .post-detail-page) .feed-post:has(.post-media) .feed-post-actions {
        order: 1;
        margin-top: auto;
    }

    .photo-viewer-body .feed-post:has(.post-media) .cthread > .cthread-form,
    .photo-viewer-body .feed-post:has(.post-media) .cthread > .cthread-login {
        order: 2;
    }

    /* Inläggets sida: samma kommentarsrader som i popupen (där står reglerna ovan) */
    .post-detail-page .feed-post:has(.post-media) .feed-post-comments,
    .post-detail-page .feed-post:has(.post-media) .feed-post-comments .cthread:not([hidden]) {
        display: contents;
    }

    .post-detail-page .feed-post:has(.post-media) .cthread-list {
        margin: 0;
        padding: 16px 18px 10px;
        border-top: 1px solid rgb(var(--ink-rgb) / .06);
    }

    .post-detail-page .feed-post:has(.post-media) .cthread > .cthread-form,
    .post-detail-page .feed-post:has(.post-media) .cthread > .cthread-login {
        order: 2;
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 0;
        padding: 12px 16px;
        background: rgb(var(--surface-rgb) / .92);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        backdrop-filter: blur(14px) saturate(1.4);
        border-top: 1px solid rgb(var(--ink-rgb) / .08);
    }
}

/* 📱 Tangentbordet uppe (keyboard_fit.js): popupen fyller ytan ovanför det, så att
   skrivrutan (sticky längst ner) hamnar precis ovanför tangentbordet */
html.kb-open .photo-viewer {
    position: fixed;
    inset: auto;
    top: calc(var(--vv-top, 0px) + 6px);
    left: 12px;
    right: 12px;
    width: auto;
    margin: 0;
    max-height: calc(var(--vv-h, 100dvh) - 12px);
}

html.kb-open .photo-viewer-body {
    max-height: calc(var(--vv-h, 100dvh) - 12px);
}

html.kb-open .photo-viewer-close {
    top: 8px;
    right: 8px;
}

html.kb-open .photo-viewer-nav,
html.kb-open .photo-viewer-count {
    display: none;
}

/* Mobil: pilarna ovanpå kortet, och man sveper */
@media (max-width: 680px) {
    .photo-viewer { width: calc(100vw - 24px); }
    .photo-viewer-prev { left: 6px; }
    .photo-viewer-next { right: 6px; }
    .photo-viewer-nav { width: 36px; height: 36px; font-size: 26px; }
    .photo-viewer-count { bottom: auto; top: -38px; right: auto; text-align: left; }
}


@media (max-width: 600px) {
    .profile-avatar-ring .avatar {
        width: 68px;
        height: 68px;
        font-size: 28px;
    }
}


/* ---------- Sparat (saved_page.html) ---------- */

.saved-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;

    background: rgb(var(--ink-rgb) / .08);
    font-size: 12px;
    text-align: center;
}

.home-chip.is-active .saved-count {
    background: rgb(var(--surface-rgb) / .3);
}

/* Första listan direkt under rubriken / "Har du testat den än?" */
.explore-hero + .saved-section,
.tried-it + .saved-section {
    margin-top: 0;
}

.saved-section-count {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.saved-tip {
    margin: 28px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}


/* ---------- Mat- och Restauranglistan (food_page.html, restaurants_page.html) ---------- */

.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;

    margin-bottom: 14px;
}

.list-toolbar .location-scope {
    margin: 0;
}

.list-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.list-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.list-sort select {
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .14);

    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.list-sort select:hover {
    border-color: rgba(255, 111, 0, .45);
}

.list-sort select:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* 🗺️ Restauranger → Karta (samma form som sorteringen bredvid) */
.list-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    height: 38px;
    padding: 0 14px 0 11px;
    border-radius: 999px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .14);

    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.list-map-link .nav-icon {
    width: 18px;
    height: 18px;
    color: var(--orange-text);
}

.list-map-link:hover {
    border-color: rgba(255, 111, 0, .45);
}

.list-map-link:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* 📋 ▦ Stora / ☰ Lista (partials/card_layout_toggle.html, card_layout.js) */
.layout-toggle {
    display: inline-flex;
    padding: 3px;
    gap: 2px;

    border-radius: 999px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .14);
}

.layout-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    height: 30px;
    padding: 0 12px 0 10px;
    border: none;
    border-radius: 999px;
    background: none;

    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.layout-toggle-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.layout-toggle-btn svg circle {
    fill: currentColor;
    stroke: none;
}

.layout-toggle-btn:hover {
    color: var(--dark-text);
}

.layout-toggle-btn[aria-pressed="true"] {
    background: var(--orange-soft-2);
    color: var(--orange-text);
}

.layout-toggle-btn:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Smal mobil: bara ikonerna (texten finns kvar för skärmläsare) */
@media (max-width: 480px) {

    .layout-toggle-btn {
        padding: 0 9px;
    }

    .layout-toggle-btn span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

}

/* Sparat/Testat: knapparna under flikarna, till höger */
.saved-layout-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}


/* ---------- Mindre skärmar ---------- */

@media (max-width: 850px) {

    .list-sort > span {
        display: none;   /* "Sortera" — väljaren talar för sig själv */
    }

    .list-toolbar-actions {
        width: 100%;
        margin-left: 0;
    }

    .list-sort {
        flex: 1;
    }

    .list-sort select {
        width: 100%;
    }

}

@media (max-width: 1000px) {

    .explore-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Sidopanelen hamnar under 50 rätter här — lyft ut restaurangerna
       ovanför listan (order). Raderna går hela bredden, som topplistan
       (max 5 st, så det blir inte långt) */
    .explore-aside {
        display: contents;
    }

    .trending-restaurants {
        order: -1;
    }

}

/* ---------- Upptäck på mobil: rätter och restauranger som svep-rader ----------
   Staplade blev de ~2500px var, och restaurangerna (som inte finns i
   bottenmenyn) hamnade fyra skärmar ner. Bara touch — med mus går det
   inte att svepa, så där står rutnätet kvar. */
@media (max-width: 768px) and (pointer: coarse) {

    .food-card-feed-grid.discover-rail {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;   /* nästa kort sticker fram = "svep mig" */

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .discover-rail::-webkit-scrollbar {
        display: none;
    }

    .discover-rail > * {
        scroll-snap-align: start;
    }

}

.discover-types {
    margin-bottom: 14px;
}


/* ---------- 🔎 Kategorisidor: "Pizza i Malmö" (discover/category.html) ---------- */

.category-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;

    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.category-crumbs a {
    color: inherit;
    text-decoration: none;
}

.category-crumbs a:hover {
    color: var(--hype-orange);
}

.category-chip-count {
    margin-left: 2px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.category-ranking {
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-ranking-item {
    min-width: 0;
}

@media (max-width: 600px) {

    .explore-page {
        padding: 16px 12px 90px;
    }

    .explore-hero {
        padding: 20px 16px 16px;
        border-radius: 18px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .live-dot {
        animation: none;
    }

    .cat-tile,
    .explore-more-card {
        transition: none;
    }

    .cat-tile:hover,
    .explore-more-card:hover {
        transform: none;
    }

}


/* =========================================================
   🏷️ ERBJUDANDEN (partials/offer_box.html) på restaurang- och rättsidan,
   och 📣 det sponsrade kortet på områdessidan (discover.html)
   ========================================================= */

.offer-box {
    display: grid;
    gap: 8px;
    margin: 14px 0 4px;
    scroll-margin-top: 90px;
}

.offer-box-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 12px 14px;
    border-radius: 16px;
    background: rgb(0 168 101 / .08);
    border: 1px solid rgb(0 168 101 / .28);
}

.offer-box-icon {
    font-size: 22px;
    line-height: 1.2;
}

.offer-box-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.offer-box-text strong {
    color: var(--green-text);
    font-size: 16px;
    overflow-wrap: anywhere;
}

.offer-box-text p {
    margin: 0;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.offer-box-text small {
    color: var(--text-muted);
}

.offer-box-text a {
    color: inherit;
    text-decoration: underline;
}

.discover-sponsored {
    max-width: 560px;
}


/* 📅 Månadens topp: main/css/monthly.css */

.explore-empty-text {
    color: var(--text-muted);
}

/* 🏆 "Månadens #1 i Nacka" på restaurangsidan (partials/monthly_badge.html) */
.mh-chip--monthly {
    background: #fde68a;
    color: #92400e;
    font-weight: 800;
    text-decoration: none;
}

/* ---------- 🏆 Utmärkelser (partials/awards.html, main/awards.py) ---------- */

.awards {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.awards-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.awards-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.awards-summary {
    display: flex;
    gap: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.awards-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.awards-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.awards-link:hover {
    background: var(--surface-2);
}

.awards-medal {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
}

.awards-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.awards-text small {
    color: var(--text-muted);
}

.awards-all summary {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 700;
}

.awards-year {
    margin: 10px 0 2px;
    font-size: 14px;
    color: var(--text-muted);
}

.owner-award {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.owner-award .awards-link {
    flex: 1;
    min-width: 0;
}

.owner-award .share-image-btn {
    flex-shrink: 0;
}

/* ===== main/css/profile.css ===== */
/* =====================================================
   👤 PROFILEN (profile.html, main/profile_page.py)
   Lite Instagram (bild + siffror på rad, märken som runda
   höjdpunkter, understrukna flikar) och lite Facebook
   (omslag, knappar, sidokolumn bredvid inläggen).
   Märkena: partials/profile_badges.html + main/javascript/profile.js.
   ===================================================== */

.profile-top {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgb(var(--ink-rgb) / .08);
    background: var(--pure-white);
    box-shadow: 0 6px 24px rgba(30, 42, 68, .06);
}


/* ---------- 🖼️ Omslaget: de senaste matbilderna ---------- */

.profile-cover {
    position: relative;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-rows: minmax(0, 1fr);
    height: 200px;
    overflow: hidden;
    background: var(--orange-soft);
}

.profile-cover img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

/* Tonas ut nertill, så namnet och bilden står lugnt */
.profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--surface-rgb) / 0) 40%, rgb(var(--surface-rgb) / .92) 100%);
    pointer-events: none;
}

/* Inga bilder än: MatHajps orange */
.profile-cover.is-empty {
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 111, 0, .32), transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(253, 186, 116, .3), transparent 50%),
        var(--orange-soft);
}


/* ---------- Bild, namn och siffror ---------- */

.profile-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "pic who numbers";
    align-items: start;
    gap: 16px 24px;
    margin-top: -68px;
    padding: 0 28px;
}

.profile-pic {
    grid-area: pic;
    align-self: start;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* 🎆 Mitt hajp-år (december–januari): banderollen från startsidan (home_rails.css), under knapparna */
.profile-top > .hype-year-banner {
    margin: 14px 0 0;
}

/* 📸 Egna profilen: tryck på bilden för att byta (profile.html → data-avatar-form, profile.js) */
.profile-pic-form {
    margin: 0;
}

.profile-pic-edit {
    position: relative;
    display: block;
    cursor: pointer;
}

.profile-pic-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Kameraknappen nere till höger, som på Instagram */
.profile-pic-badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 3px solid var(--pure-white);
    border-radius: 50%;
    background: #C2410C;
    color: #fff;
    box-shadow: 0 4px 10px rgb(0 0 0 / .2);
    transition: transform .15s ease;
}

.profile-pic-badge .nav-icon {
    width: 17px;
    height: 17px;
}

.profile-pic-edit:hover .profile-pic-badge {
    transform: scale(1.08);
}

.profile-pic-edit:has(.profile-pic-input:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}

/* Medan bilden laddas upp */
.profile-pic-form.is-uploading .profile-pic-edit {
    opacity: .55;
    pointer-events: none;
}

.profile-pic-save {
    margin-top: 8px;
}

.profile-top .profile-pic .avatar {
    width: 132px;
    height: 132px;
    border-width: 5px;
    font-size: 52px;
}

.profile-who {
    grid-area: who;
    min-width: 0;
    padding-top: 76px;
}

.profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.profile-who h1 {
    margin: 0;
    color: var(--dark-text);
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.profile-who h1 .name-badge {
    font-size: .8em;
    vertical-align: .05em;
}

.profile-who > .role-chip {
    max-width: 100%;
    margin: 8px 0 0;
    font-size: 13px;
}

.profile-top .profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.profile-meta-item svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* ✍️ Om mig */
.profile-bio {
    max-width: 620px;
    margin: 10px 0 0;
    color: var(--dark-text);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.profile-who .profile-regular {
    margin-top: 8px;
}

.profile-who .social-links {
    margin-top: 10px;
}

/* Siffrorna på rad, utan rutor (som Instagram) */
.profile-numbers {
    grid-area: numbers;
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 82px 0 0;
    list-style: none;
}

.profile-numbers a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: inherit;
    text-decoration: none;
}

.profile-numbers strong {
    color: var(--dark-text);
    font-size: 1.35rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.profile-numbers span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.profile-numbers a:hover strong {
    color: var(--orange-text);
}

.profile-top .profile-blocked-note {
    margin: 16px 28px 0;
}


/* ---------- Knapparna (+ ⋯) ---------- */

.profile-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 28px 0;
}

.profile-buttons form {
    margin: 0;
}

.profile-buttons .follow-btn {
    min-height: 42px;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 15px;
}

.profile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 16px;
    box-sizing: border-box;

    border: 1px solid rgb(var(--ink-rgb) / .12);
    border-radius: 12px;
    background: var(--surface-2);

    color: var(--dark-text);
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.profile-action:hover {
    border-color: rgba(255, 111, 0, .5);
    color: var(--dark-text);
}

.profile-action:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* 🤝 Bjud in har redan sin emoji */
.profile-buttons > .mh-share .mh-share-icon {
    display: none;
}

/* ⋯ Mer */
.profile-more {
    position: relative;
}

.profile-more > summary {
    list-style: none;
}

.profile-more > summary::-webkit-details-marker {
    display: none;
}

.profile-more-btn {
    width: 42px;
    padding: 0;
}

.profile-more-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.profile-more[open] .profile-more-btn {
    border-color: var(--hype-orange);
}

.profile-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;

    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    padding: 6px;

    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 14px;
    background: var(--pure-white);
    box-shadow: 0 16px 40px rgba(17, 24, 39, .18);
}

.profile-more-menu form {
    margin: 0;
}

.profile-more-menu a,
.profile-more-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;

    border: none;
    border-radius: 10px;
    background: none;

    color: var(--dark-text);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.profile-more-menu a:hover,
.profile-more-item:hover {
    background: var(--surface-2);
    color: var(--dark-text);
}

.profile-more-item.is-danger {
    color: var(--red-text);
}

.profile-more-item .mh-share-icon {
    width: 17px;
    height: 17px;
}

/* 👥 Följs av … du följer */
.profile-known {
    margin: 12px 28px 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

.profile-known a {
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: none;
}

.profile-known a:hover {
    color: var(--orange-text);
}


/* ---------- 🏅 Märken: EN rad, runda som Instagrams höjdpunkter ---------- */

.profile-badges {
    margin-top: 20px;
    padding: 0 28px;
    scroll-margin-top: 90px;
}

.profile-badges-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.profile-badges-head h2 {
    margin: 0;
    color: var(--dark-text);
    font-size: 1rem;
    font-weight: 800;
}

.profile-badges-count {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.profile-badges-all {
    margin-left: auto;
    color: var(--orange-text);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.profile-badges-all:hover {
    text-decoration: underline;
}

.badge-row {
    display: flex;
    gap: 14px;
    margin: 0 -28px;
    padding: 6px 28px 4px;
    list-style: none;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.badge-row::-webkit-scrollbar {
    display: none;
}

.badge-chip {
    flex: 0 0 76px;
    scroll-snap-align: start;
}

.badge-chip-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

/* Ringen runt märket: grå (upplåst), orange (att hämta), fylls efter hur långt man kommit (låst) */
.badge-chip-circle {
    position: relative;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgb(var(--ink-rgb) / .14);
    transition: transform .15s ease;
}

.badge-chip.is-claimable .badge-chip-circle {
    background: conic-gradient(var(--hype-orange), #fdba74, var(--hype-orange));
}

.badge-chip.is-locked .badge-chip-circle {
    background: conic-gradient(var(--hype-orange) var(--progress, 0%), rgb(var(--ink-rgb) / .12) 0);
}

/* ⭕ Ring-märken ritar sin egen ring (feed.css → .avatar-ring) */
.badge-chip-circle:has(.avatar-ring) {
    padding: 8px;
    background: none;
}

.badge-chip .badge-chip-emoji {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 3px solid var(--pure-white);
    border-radius: 50%;
    background: var(--surface-2);
    font-size: 26px;
    line-height: 1;
}

.badge-chip .badge-chip-emoji.avatar-ring {
    border: none;
    font-size: 22px;
}

.badge-chip.is-locked .badge-chip-emoji {
    filter: grayscale(1);
    opacity: .55;
}

.badge-chip-tag {
    position: absolute;
    top: -5px;
    right: -8px;
    padding: 2px 7px;
    border: 2px solid var(--pure-white);
    border-radius: 999px;
    background: var(--hype-orange);
    color: #1a0d00;
    font-size: 10.5px;
    font-weight: 900;
}

.badge-chip-name {
    width: 100%;
    overflow: hidden;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-chip.is-locked .badge-chip-name {
    color: var(--text-muted);
}

.badge-chip-progress {
    margin-top: -4px;
    color: var(--orange-text);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.badge-chip-link:hover .badge-chip-circle {
    transform: translateY(-2px);
}

.badge-chip-link:focus-visible {
    outline: none;
}

.badge-chip-link:focus-visible .badge-chip-circle {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}


/* ---------- Alla märken (dialogen) ---------- */

.badge-sheet {
    width: min(460px, calc(100vw - 32px));
    max-height: min(760px, calc(100dvh - 48px));
    padding: 0;
    overflow: hidden;

    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 24px;
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.badge-sheet[open] {
    display: flex;
    flex-direction: column;
}

.badge-sheet::backdrop {
    background: rgba(10, 10, 12, .55);
}

.badge-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 12px;
}

.badge-sheet-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
}

.badge-sheet-count {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.badge-sheet-head form {
    margin: 0 0 0 auto;
}

.badge-sheet-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(var(--ink-rgb) / .12);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.badge-sheet-close:hover {
    border-color: var(--hype-orange);
}

.badge-sheet-bar {
    height: 6px;
    margin: 0 20px 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(var(--ink-rgb) / .1);
}

.badge-sheet-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--hype-orange);
}

.badge-sheet-body {
    min-height: 0;
    padding: 0 12px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.badge-sheet-group {
    margin: 16px 8px 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.badge-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-badge {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    scroll-margin: 80px 0;
}

.profile-badge.is-claimable {
    border-color: rgba(255, 111, 0, .35);
    background: var(--orange-soft);
}

/* Märket man kom hit för (#marken-<kod>) blinkar till */
.profile-badge.is-highlighted {
    animation: badge-highlight 1.6s ease-out 2;
}

@keyframes badge-highlight {
    0%   { box-shadow: 0 0 0 0 rgba(255, 111, 0, .55); }
    100% { box-shadow: 0 0 0 12px rgba(255, 111, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .profile-badge.is-highlighted {
        animation: none;
        outline: 3px solid var(--hype-orange);
    }
}

.profile-badge-emoji {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: 23px;
    line-height: 1;
}

.profile-badge.is-locked .profile-badge-emoji {
    filter: grayscale(1);
    opacity: .5;
}

/* ⭕ Ring-märken: emojin i ringen (ringen själv: feed.css → .avatar-ring) */
.profile-badge-emoji.badge-ring-preview {
    width: 38px;
    height: 38px;
    margin: 5px;
    font-size: 19px;
}

.profile-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-badge-name {
    color: var(--dark-text);
    font-size: 14.5px;
    font-weight: 800;
}

.profile-badge.is-locked .profile-badge-name {
    color: var(--text-2);
}

.profile-badge-how {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.35;
}

.profile-badge-reward {
    display: block;
    margin-top: 2px;
    color: var(--orange-text);
    font-weight: 700;
}

.profile-badge-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Hur långt man kommit (bara låsta märken på den egna profilen) */
.profile-badge-meta progress {
    flex: 1;
    min-width: 0;
    max-width: 180px;
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: rgb(var(--ink-rgb) / .1);
    overflow: hidden;
    appearance: none;
}

.profile-badge-meta progress::-webkit-progress-bar {
    background: rgb(var(--ink-rgb) / .1);
}

.profile-badge-meta progress::-webkit-progress-value {
    background: var(--hype-orange);
    border-radius: 999px;
}

.profile-badge-meta progress::-moz-progress-bar {
    background: var(--hype-orange);
    border-radius: 999px;
}

.profile-badge .show-badge-form,
.profile-badge .claim-badge-form {
    margin: 0;
}


/* ---------- Flikar: understrukna ---------- */

.profile-tabs {
    display: flex;
    gap: 2px;
    margin-top: 16px;
    padding: 0 18px;
    overflow-x: auto;
    border-top: 1px solid rgb(var(--ink-rgb) / .08);
    scrollbar-width: none;
    scroll-margin-top: 80px;
}

.profile-tabs::-webkit-scrollbar {
    display: none;
}

/* Länkar till #profile-tabs (t.ex. "hajpat" på startsidan) ger den scrollbara raden fokus —
   utan detta fick den webbläsarens svarta fokusram tills man rörde något. Flikarna har egen ring. */
.profile-tabs:focus {
    outline: none;
}

.profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 52px;
    padding: 0 14px;
    box-sizing: border-box;

    border-bottom: 3px solid transparent;
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;

    transition: color .15s ease, border-color .15s ease;
}

.profile-tab:hover {
    color: var(--dark-text);
}

.profile-tab.is-active {
    border-bottom-color: var(--hype-orange);
    color: var(--orange-text);
    font-weight: 800;
}

.profile-tab:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: -3px;
    border-radius: 10px;
}

.profile-tab-count {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.profile-tab.is-active .profile-tab-count {
    color: var(--orange-text);
}


/* ---------- Inläggen + sidokolumnen (som Facebook) ---------- */

.profile-main {
    min-width: 0;
}

.profile-main > :first-child {
    margin-top: 0;
}

.profile-aside {
    display: none;   /* bara när det finns plats bredvid (nedan) */
}

@media (min-width: 1100px) {
    .profile-body.has-aside {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
        gap: 20px;
    }

    .profile-aside {
        position: sticky;
        top: 84px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

.profile-aside-card {
    padding: 18px;
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 20px;
    background: var(--pure-white);
}

.profile-aside-card h2 {
    margin: 0;
    color: var(--dark-text);
    font-size: 1rem;
    font-weight: 800;
}

.profile-aside-note {
    margin: 2px 0 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.profile-taste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-taste a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--dark-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.profile-taste a:hover {
    border-color: rgba(255, 111, 0, .5);
}

.profile-taste strong {
    color: var(--orange-text);
    font-weight: 800;
}

.profile-aside-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.profile-aside-lists {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-aside-lists a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.profile-aside-lists img,
.profile-aside-list-icon {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--surface-2);
    object-fit: cover;
    font-size: 22px;
}

.profile-aside-list-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-aside-list-text strong {
    overflow: hidden;
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-aside-list-text small {
    color: var(--text-muted);
    font-size: 12.5px;
}

.profile-aside-lists a:hover strong {
    color: var(--orange-text);
}


/* ---------- Mobilen: bild + siffror på samma rad (Instagram) ---------- */

@media (max-width: 680px) {

    .profile-top {
        border-radius: 20px;
    }

    .profile-cover {
        height: 124px;
    }

    .profile-head {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "pic numbers"
            "who who";
        gap: 12px 14px;
        margin-top: -46px;
        padding: 0 16px;
    }

    .profile-top .profile-pic .avatar {
        width: 92px;
        height: 92px;
        border-width: 4px;
        font-size: 36px;
    }

    .profile-pic-badge {
        right: 0;
        bottom: 0;
        width: 30px;
        height: 30px;
    }

    .profile-pic-badge .nav-icon {
        width: 14px;
        height: 14px;
    }

    .profile-who {
        padding-top: 0;
    }

    .profile-numbers {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2px;
        align-self: end;
        padding: 0 0 6px;
    }

    .profile-numbers strong {
        font-size: 1.1rem;
    }

    .profile-numbers span {
        font-size: 12px;
    }

    .profile-top .profile-blocked-note {
        margin: 14px 16px 0;
    }

    .profile-buttons {
        padding: 14px 16px 0;
    }

    /* Knapparna delar på bredden, ⋯ är en ruta */
    .profile-buttons > *,
    .profile-buttons .friend-actions form {
        flex: 1 1 0;
    }

    .profile-buttons .follow-btn,
    .profile-buttons .friend-actions button,
    .profile-buttons > form > button,
    .profile-buttons > .profile-action {
        width: 100%;
        padding: 0 10px;
    }

    .profile-buttons > .profile-more {
        flex: 0 0 auto;
    }

    .profile-more-menu {
        left: auto;
        right: 0;
    }

    .profile-known {
        margin: 10px 16px 0;
    }

    .profile-badges {
        padding: 0 16px;
    }

    .badge-row {
        gap: 12px;
        margin: 0 -16px;
        padding: 6px 16px 4px;
    }

    .badge-chip {
        flex-basis: 68px;
    }

    .badge-chip-circle {
        width: 62px;
        height: 62px;
    }

    .profile-tabs {
        padding: 0 6px;
    }

    .profile-tab {
        min-height: 48px;
        padding: 0 12px;
    }

    /* Alla märken: en panel nerifrån */
    .badge-sheet {
        width: 100%;
        max-width: 100%;
        max-height: 86dvh;
        margin: auto 0 0;
        border-bottom: none;
        border-radius: 24px 24px 0 0;
        animation: badge-sheet-up .22s ease-out;
    }

    @keyframes badge-sheet-up {
        from { transform: translateY(40px); opacity: .4; }
        to   { transform: none; opacity: 1; }
    }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
    .badge-sheet {
        animation: none;
    }
}

/* ===== main/css/detail.css ===== */
/* =====================================================
   RÄTT- OCH RESTAURANGSIDAN (food/food_detail.html, restaurant_detail.html)
   Samma formspråk som profilen: ett stort kort överst (bild/omslag, namn,
   siffrorna på rad, knappar, flikar) och under det flödet + en sidokolumn.
   Bygger vidare på fd- och rd-klasserna (food_detail.css, restaurant_detail.css) och
   knapparna i food_cards.css. Bara temafärger (main.css), så ljust och
   mörkt tema följer med; vit text bara på den mörkare orange glöden.
===================================================== */

.dp-page {
    --dp-hajpad: linear-gradient(135deg, #ff7a1a 0%, #e8520c 45%, #d4430b 100%);   /* = korten (cards.css --hajpad-glow) */
    --dp-radius: 28px;
}


/* ---------- Kortet överst ---------- */

.dp-card {
    overflow: hidden;
    border-radius: var(--dp-radius);
    background: var(--pure-white);
    border: 1px solid var(--border);
    box-shadow: 0 6px 24px rgb(var(--shade-rgb) / .04);
}

.dp-top {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 24px;
}


/* Rättens bild: 4:5 som ett Instagram-inlägg + besökarnas bilder under */

.dp-media-col {
    flex: 1 1 360px;
    max-width: 470px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dp-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 22px;
    background: var(--surface-warm);
}

.dp-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dp-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dp-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.dp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.dp-thumb:hover img {
    transform: scale(1.06);
}

.dp-thumb-more:hover {
    background: var(--surface-3);
}


/* Informationen bredvid */

.dp-info {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 2px;
}

/* 🏪 Restaurangen överst, som avsändaren i ett inlägg */
.dp-from {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -6px;
    padding: 6px;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}

.dp-from:hover {
    background: var(--surface-2);
}

.dp-from-pic {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--surface-warm);
}

.dp-from-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dp-from-text strong {
    color: var(--dark-text);
    font-size: 15.5px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.dp-from-text small {
    color: var(--text-muted);
    font-size: 13.5px;
}

.dp-from-arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
}

.dp-open {
    color: var(--green-text);
    font-weight: 800;
}

.dp-closed {
    color: var(--red-text);
    font-weight: 800;
}

/* Kategorin är det första man ser — och en länk vidare */
.fd-chips .dp-category-chip {
    border: 1px solid rgba(255, 111, 0, .35);
    background: var(--orange-soft);
    color: var(--orange-text);
    font-weight: 800;
}

.fd-chips .dp-category-chip:hover {
    background: var(--orange-soft-2);
}

.dp-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dp-title-row .fd-title {
    flex: 1 1 auto;
}

.dp-price {
    flex: none;
    margin-top: 4px;
    padding: 6px 14px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--dark-text);
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* Siffrorna på rad, som på profilen */

.dp-numbers {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 0;
    padding: 14px 0;
    list-style: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.dp-number {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.dp-number strong {
    color: var(--dark-text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.dp-number > span:not(.mh-sr-only) {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

a.dp-number:hover strong {
    color: var(--orange-text);
}

.dp-info .friends-hyped,
.dp-place-body .friends-hyped {
    margin: 0;
}


/* ---------- Knapparna: stora överst, rutor under ---------- */

.fd-actions.dp-actions {
    gap: 10px;
    margin-top: 0;
    padding-top: 0;
}

.dp-actions .fd-actions-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
    gap: 10px;
}

.dp-actions .fd-actions-main > .mh-hype,
.dp-actions .fd-actions-main > .follow-btn,
.dp-actions .fd-actions-main > .save-btn.fd-save {
    width: 100%;
    height: 52px;
    min-width: 0;
    padding: 0 14px;
    box-sizing: border-box;
    justify-content: center;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 800;
}

/* 🔥 Flamman utan bubbla — knappen bär färgen */
.dp-actions .mh-hype-icon,
.dp-actions .mh-hype.active .mh-hype-icon {
    width: 20px;
    height: 20px;
    margin: 0;
    background: none;
    box-shadow: none;
}

.dp-actions .mh-flame {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

/* Hajpad: vit text och flamma på den djupare orange glöden */
.dp-actions .mh-hype.active {
    border-color: transparent;
    background: var(--dp-hajpad);
    box-shadow: 0 8px 22px rgba(212, 67, 11, .32);
    color: #fff;
}

.dp-actions .mh-hype.active:hover {
    background: var(--dp-hajpad);
    filter: brightness(.95);
}

/* Följ: neutral och tydlig, så att Hajpa är den enda orange */
.dp-actions .follow-btn:not(.is-following):not(.is-requested) {
    border-color: var(--dark-text);
    background: var(--dark-text);
    color: var(--pure-white);
}

.dp-actions .follow-btn:not(.is-following):not(.is-requested):hover {
    opacity: .88;
}

.dp-actions .save-btn.fd-save {
    border-color: var(--border);
    background: var(--surface-2);
}

.dp-actions .save-btn.fd-save.active {
    border-color: rgba(255, 45, 85, .35);
    background: var(--red-soft);
}

/* Rad 2: lika stora rutor */
.dp-actions .fd-actions-more {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
    gap: 8px;
}

.dp-actions .fd-actions-more > * {
    width: 100%;
    height: 46px;
    min-width: 0;
    padding: 0 10px;
    box-sizing: border-box;
    justify-content: center;
    border-radius: 14px;
    font-size: 14px;
}

.dp-actions .fd-actions-more > form {
    display: flex;
    padding: 0;
}


/* ---------- Flikar (hoppar till delarna under kortet) ---------- */

.dp-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    overflow-x: auto;
    border-top: 1px solid var(--border);
    scrollbar-width: none;
}

.dp-tabs::-webkit-scrollbar {
    display: none;
}

.dp-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    height: 54px;
    padding: 0 14px;
    box-sizing: border-box;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.dp-tab:first-child {
    border-bottom-color: var(--hype-orange);
    color: var(--dark-text);
    font-weight: 800;
}

.dp-tab:hover {
    color: var(--dark-text);
    border-bottom-color: var(--border-strong);
}

.dp-tab:first-child:hover {
    border-bottom-color: var(--hype-orange);
}

.dp-tab-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
}


/* ---------- Restaurangens kort: omslag + logga ---------- */

.dp-cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    height: 290px;
}

.dp-cover--2 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.dp-cover--4 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.dp-cover .dp-cover-main {
    grid-row: 1 / -1;
    position: relative;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;   /* inte .fd-media:s 4:3 på mobil — omslaget har fast höjd */
    overflow: hidden;
    background: var(--surface-warm);
}

.dp-cover-tile {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
    background: var(--surface-warm);
}

.dp-cover-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.dp-cover-tile:hover img {
    transform: scale(1.05);
}

.dp-cover-tile.is-more span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(17, 18, 20, .55);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.dp-place-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 24px;
    padding: 0 24px;
}

/* Ställen: rundad fyrkant (personer har runda bilder) */
.dp-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    margin-top: -52px;
    position: relative;
    box-sizing: border-box;
    border-radius: 32px;
    border: 5px solid var(--pure-white);
    background: var(--orange-soft);
    box-shadow: 0 6px 18px rgb(0 0 0 / .12);
    font-size: 50px;
    line-height: 1;
}

.dp-place-who {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 16px;
}

.dp-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.dp-place .fd-title {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
}

.dp-verified {
    display: inline-flex;
}

.dp-verified svg {
    width: 24px;
    height: 24px;
}

.dp-verified circle {
    fill: var(--hype-orange);
}

.dp-verified path {
    fill: none;
    stroke: #1a0d00;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    color: var(--text-2);
    font-size: 14.5px;
}

.dp-meta a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.dp-meta a:hover {
    color: var(--orange-text);
}

.dp-meta .price-level {
    vertical-align: baseline;
}

.dp-numbers--place {
    display: flex;
    gap: 26px;
    padding: 18px 0 0;
    border: 0;
}

.dp-numbers--place .dp-number {
    align-items: center;
}

.dp-place-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 24px 6px;
}


/* 🍽️ Rätternas kategorier som Instagrams höjdpunkter */

.dp-highlights {
    display: flex;
    gap: 16px;
    margin: 2px 0 0;
    padding: 4px 2px 8px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.dp-highlights::-webkit-scrollbar {
    display: none;
}

.dp-highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 78px;
    color: var(--dark-text);
    text-decoration: none;
}

.dp-highlight-ring {
    display: block;
    width: 70px;
    height: 70px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--border-strong);
    transition: transform .15s ease;
}

.dp-highlight.is-hot .dp-highlight-ring,
.dp-highlight.is-current .dp-highlight-ring {
    background: conic-gradient(#ff6f00, #ffb347, #ff6f00);
}

.dp-highlight:hover .dp-highlight-ring {
    transform: scale(1.05);
}

.dp-highlight-pic {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid var(--pure-white);
    background: var(--surface-2);
    object-fit: cover;
    font-size: 26px;
    line-height: 1;
}

.dp-highlight-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
}

.dp-highlight.is-current .dp-highlight-name {
    color: var(--orange-text);
}


/* Filtret ovanför rätterna (detail_page.js) */

.dp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.dp-filters[hidden] {
    display: none;
}

.dp-filter {
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.dp-filter span {
    margin-left: 3px;
    color: var(--text-muted);
    font-weight: 600;
}

.dp-filter:hover {
    border-color: var(--border-strong);
}

.dp-filter[aria-pressed="true"] {
    border-color: var(--dark-text);
    background: var(--dark-text);
    color: var(--pure-white);
}

.dp-filter[aria-pressed="true"] span {
    color: inherit;
    opacity: .75;
}

.dp-dish {
    display: contents;
}

.dp-dish[hidden] {
    display: none;
}


/* ---------- Flödet + sidokolumnen ---------- */

.dp-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    margin-top: 28px;
}

.dp-main {
    flex: 999 1 540px;
    min-width: 0;
}

.dp-main > :first-child {
    margin-top: 0;
}

.dp-main .fd-section.post-section {
    max-width: none;
    margin: 36px 0 0;
}

.dp-aside {
    flex: 1 1 300px;
    max-width: 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dp-aside > * {
    margin: 0;
    scroll-margin-top: 90px;
}

.dp-aside {
    scroll-margin-top: 90px;
}

.dp-side-card {
    overflow: hidden;
    border-radius: 22px;
    background: var(--pure-white);
    border: 1px solid var(--border);
}

.dp-side-pad,
.dp-served {
    padding: 18px 20px;
}

.dp-side-label {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dp-side-title {
    margin: 0 0 10px;
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 800;
}

.dp-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.dp-side-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    margin-top: 14px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.dp-side-btn:hover {
    background: var(--surface-3);
}

/* Serveras hos: raden i kortet, utan eget kort */
.dp-served .fd-restaurant {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.dp-served .fd-restaurant:hover {
    transform: none;
    box-shadow: none;
}

.dp-served .fd-restaurant-thumb {
    width: 64px;
    height: 64px;
}

.dp-served .fd-branches {
    grid-template-columns: minmax(0, 1fr);
}

/* Värt hajpen? som ett kort i kolumnen — färgerna kommer från food_detail.css (orange tonad) */
.dp-aside .verdict-box {
    padding: 18px;
    border-radius: 22px;
}

/* Restaurangen: kartan överst i "Hitta hit" */
.dp-where .rd-map {
    height: 170px;
    border-top: 0;
    border-bottom: 1px solid var(--border);
}

.dp-where .dp-side-pad {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dp-where .dp-side-title {
    margin: 0;
}

.dp-where .rd-facts .rd-map-actions {
    margin: 4px 0 0;
}

.dp-side-card .rd-hours {
    border: 0;
    background: none;
}

.dp-side-card .rd-hours summary {
    padding: 0 0 8px;
}

.dp-side-card .rd-hours-table {
    width: 100%;
    margin: 0;
}

.dp-side-card .rd-hours-note {
    margin: 8px 0 0;
}

.dp-side-card .rd-hours-now {
    font-size: 14px;
}

.dp-people {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dp-people > * {
    margin: 0;
}


/* ---------- Mindre skärmar ---------- */

@media (max-width: 900px) {

    .dp-aside {
        max-width: none;
    }

}

@media (max-width: 600px) {

    .dp-page {
        --dp-radius: 22px;
    }

    /* Rätten: bilden kant till kant i kortet */
    .dp-top {
        gap: 0;
        padding: 0;
    }

    .dp-media-col {
        max-width: none;
    }

    .dp-media {
        aspect-ratio: 1;   /* kvadrat: namnet och knapparna syns tidigare */
        border-radius: 0;
    }

    .dp-thumbs {
        padding: 0 12px;
        gap: 6px;
    }

    .dp-info {
        gap: 14px;
        padding: 16px;
    }

    .dp-number strong {
        font-size: 18px;
    }

    .dp-number > span:not(.mh-sr-only) {
        font-size: 12px;
    }

    .dp-actions .fd-actions-main > .mh-hype,
    .dp-actions .fd-actions-main > .follow-btn,
    .dp-actions .fd-actions-main > .save-btn.fd-save {
        height: 50px;
        font-size: 15px;
    }

    /* Restaurangen: Hajpa · Följ breda, hjärtat som ruta */
    .dp-actions--place .fd-actions-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 50px;
    }

    .dp-actions--place .fd-actions-main > .save-btn.fd-save {
        padding: 0;
    }

    .dp-actions--place .save-btn.fd-save .save-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Rad 2: en rad snabbval att svepa i, som chips */
    .dp-actions .fd-actions-more {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -16px;
        padding: 0 16px 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .dp-actions .fd-actions-more::-webkit-scrollbar {
        display: none;
    }

    .dp-actions .fd-actions-more > * {
        flex: none;
        width: auto;
        height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 13.5px;
    }

    .dp-tabs {
        padding: 0 6px;
    }

    .dp-tab {
        padding: 0 11px;
        font-size: 14px;
    }

    /* Restaurangen: omslaget utan småbilder, mindre logga */
    .dp-cover,
    .dp-cover--2,
    .dp-cover--4 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: 190px;
    }

    .dp-cover-tile {
        display: none;
    }

    .dp-place-head {
        gap: 10px 16px;
        padding: 0 16px;
    }

    .dp-logo {
        width: 88px;
        height: 88px;
        margin-top: -40px;
        border-radius: 24px;
        border-width: 4px;
        font-size: 38px;
    }

    .dp-place-who {
        flex-basis: 100%;
        order: 2;
        padding-top: 0;
    }

    .dp-numbers--place {
        flex: 1;
        justify-content: space-around;
        gap: 8px;
        padding-top: 10px;
    }

    .dp-place-body {
        padding: 14px 16px 4px;
    }

    .dp-highlights {
        gap: 12px;
    }

    .dp-highlight {
        width: 68px;
    }

    .dp-highlight-ring {
        width: 62px;
        height: 62px;
    }

    .dp-body {
        margin-top: 18px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .dp-thumb img,
    .dp-cover-tile img,
    .dp-highlight-ring {
        transition: none;
    }

    .dp-thumb:hover img,
    .dp-cover-tile:hover img,
    .dp-highlight:hover .dp-highlight-ring {
        transform: none;
    }

}

.dp-from:focus-visible,
.dp-thumb:focus-visible,
.dp-tab:focus-visible,
.dp-highlight:focus-visible,
.dp-filter:focus-visible,
.dp-side-btn:focus-visible,
.dp-cover-tile:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- 🌱 Passar för / Kost (partials/tag_card.html, main/diet.py) ---------- */

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mh-chip.tag-badge {
    border: 1px solid rgb(var(--ink-rgb) / .1);
    background: var(--surface-2);
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: none;
}

.mh-chip.tag-badge:hover {
    border-color: var(--hype-orange);
}

.tag-card-note,
.tag-card-empty,
.tag-tip-note {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.tag-tip {
    margin-top: 14px;
}

.tag-tip summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    list-style: none;
}

.tag-tip summary::-webkit-details-marker {
    display: none;
}

.tag-tip[open] summary {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.tag-tip-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.tag-tip-form fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.tag-tip-form legend {
    width: 100%;
    margin-bottom: 6px;
    padding: 0;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tag-tip-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.tag-tip-option:has(input:checked) {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
}

.tag-tip-option input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--hype-orange);
}

.tag-tip-note {
    margin: 0;
}

.tag-tip-send {
    justify-content: center;
    height: 44px;
}

.tag-tip summary:focus-visible,
.mh-chip.tag-badge:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* ===== main/css/category_menu.css ===== */
/* =====================================================
   🗂️ KATEGORIER NÄR DE ÄR MÅNGA
   - Trendigt (partials/category_menu.html): en rad med de populäraste +
     "Alla kategorier" — en panel under knappen på dator, ett ark nerifrån på mobil
   - Upptäck (discover.html): story-ringar för de populäraste (main/css/rings.css), resten i grupper
   - Mat, Restauranger (tiles=True): kategoriraden som story-ringar
   Chipsen är .home-chip (home_rails.css / explore.css).
===================================================== */

.cat-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.explore-tabs + .cat-bar {
    margin-top: 12px;
}

.cat-rail-scroller {
    flex: 1;
    min-width: 0;
}

/* En rad, aldrig radbrytning — tonas ut mot kanten där fler väntar */
.cat-rail {
    display: flex;
    gap: 8px;
    padding: 2px 40px 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.cat-rail::-webkit-scrollbar {
    display: none;
}

.cat-rail-scroller .home-rail-arrow {
    top: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.cat-rail-scroller .home-rail-arrow--prev { left: -6px; }
.cat-rail-scroller .home-rail-arrow--next { right: 2px; }


/* ---------- "Alla kategorier" ---------- */

.cat-all {
    flex: none;
}

.cat-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 111, 0, .35);
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease;
}

.cat-all-btn::-webkit-details-marker {
    display: none;
}

.cat-all-btn:hover,
.cat-all[open] .cat-all-btn {
    border-color: var(--hype-orange);
}

.cat-all-btn:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.cat-all-icon {
    width: 16px;
    height: 16px;
}

.cat-all-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--hype-orange);
    color: #fff;
    font-size: 12px;
}

/* Dator: en panel under knappen */
.cat-sheet {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(680px, 100%);
    max-height: min(70vh, 640px);
    padding: 18px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
    text-align: left;
}

.cat-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cat-sheet-title {
    margin: 0;
    color: var(--dark-text);
    font-size: 19px;
    font-weight: 900;
}

.cat-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--dark-text);
    cursor: pointer;
}

.cat-sheet-close svg {
    width: 18px;
    height: 18px;
}

.cat-sheet-search {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
}

.cat-sheet-search:focus {
    outline: 2px solid var(--hype-orange);
    outline-offset: 1px;
    background: var(--pure-white);
}

.cat-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cat-group-title {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cat-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cat-chip--hot:not(.is-active) {
    border-color: rgba(255, 111, 0, .35);
    background: var(--orange-soft);
    color: var(--orange-text);
}

/* Tomma: svagare, och dolda tills man ber om dem (category_menu.js) */
.cat-sheet .home-chip.is-empty:not(.is-active) {
    color: var(--text-muted);
    border-style: dashed;
}

.hide-empty:not(.is-searching) .home-chip.is-empty:not(.is-active),
.hide-empty:not(.is-searching) .cat-group.is-empty,
.is-filtered {
    display: none !important;
}

.cat-show-empty {
    align-self: flex-start;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px dashed var(--border-strong);
    background: var(--pure-white);
    color: var(--text-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.cat-sheet-none {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* ---------- Ringar (Mat, Restauranger): story-ringar med namn under (main/css/rings.css) ---------- */

.cat-bar--tiles {
    --ring-gap: var(--soft-gray);   /* ringens springa i innehållsytans grå */
    align-items: flex-start;
    gap: 4px;
    margin-top: 18px;
}

.cat-bar--tiles .cat-rail {
    gap: 6px;
    padding-top: 4px;
    padding-bottom: 6px;
}

.cat-bar--tiles .mh-ring {
    flex-basis: 76px;
}

/* "Alla kategorier": en <summary> — ingen pil, orange ikon; öppen = vald */
.cat-ring-all {
    list-style: none;
    margin-top: 4px;
}

.cat-ring-all::-webkit-details-marker {
    display: none;
}

.cat-all[open] .cat-ring-all .mh-ring-face {
    background:
        linear-gradient(var(--orange-soft-2), var(--orange-soft-2)) padding-box,
        var(--ring-gradient) border-box;
}

.cat-all[open] .cat-ring-all {
    color: var(--orange-text);
}

.cat-bar--tiles .cat-rail-scroller .home-rail-arrow {
    top: 20px;
}

@media (max-width: 768px) {
    .cat-bar--tiles .mh-ring {
        --ring-size: 58px;
        flex-basis: 68px;
    }

    .cat-bar--tiles .mh-ring-name {
        font-size: 11.5px;
    }
}

/* Mobil: ark nerifrån över bottenmenyn, mörkt bakom */
@media (max-width: 768px) {
    .cat-bar {
        gap: 8px;
    }

    .cat-all-btn {
        width: 40px;
        padding: 0;
        justify-content: center;
        font-size: 0;   /* bara ikonen + antalet */
        gap: 0;
        position: relative;
    }

    .cat-all-count {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .cat-all[open]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(17, 17, 17, .45);
    }

    .cat-sheet {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
        width: 100%;
        max-height: 82vh;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        border: none;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .2);
        animation: cat-sheet-up .22s ease;
    }

    .cat-sheet::before {
        content: "";
        align-self: center;
        width: 40px;
        height: 5px;
        margin: -4px 0 2px;
        border-radius: 999px;
        background: var(--border-strong);
    }

    .cat-sheet-close {
        width: 44px;
        height: 44px;
    }

    .cat-sheet .home-chip {
        min-height: 40px;
    }

    html.cat-sheet-open {
        overflow: hidden;
    }
}

@keyframes cat-sheet-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-sheet {
        animation: none;
    }
}


/* ---------- Upptäck: stora rutor + grupper ---------- */

/* Populärast: story-ringar (main/css/rings.css, discover.html). Springan i innehållsytans grå. */
.cat-popular {
    --ring-gap: var(--soft-gray);
}

.cat-popular .mh-ring {
    --ring-size: 68px;
    flex-basis: 78px;
}

.cat-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.cat-groups .cat-group-title {
    color: var(--dark-text);
    font-size: 14.5px;
    letter-spacing: 0;
    text-transform: none;
}

.cat-groups .home-chip.is-empty {
    color: var(--text-muted);
    border-style: dashed;
}

.cat-groups-more {
    margin-top: 16px;
}

@media (max-width: 768px) {
    /* Mobil: ringarna sveps ut i kanten */
    .cat-popular .mh-rings {
        margin-right: -16px;
        padding-right: 16px;
    }

    .cat-groups {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* ===== main/css/monthly.css ===== */
/* =====================================================
   🏆 MÅNADENS TOPP
   - Badgen i Upptäck (discover.html)
   - Alla månader (discover/monthly_archive.html): guldkort för den som pågår + rutnät
   - En månad (discover/monthly_top.html + _monthly_list.html): månadsväxlare,
     Rätter | Ställen (monthly.js), prispall för 1–3, rader för 4–10
   Guld/silver/brons bara på medaljerna och #1 — resten är sajtens vanliga ytor.
===================================================== */

:root {
    --gold-1: #FFD54A;
    --gold-2: #E6A100;
    --gold-edge: #F3D27A;
    --gold-soft: #FFF6D6;
    --gold-text: #8a5a00;
    --silver-1: #C9D1DA;
    --silver-2: #8E99A6;
    --silver-edge: #D5DBE2;
    --bronze-1: #E8A877;
    --bronze-2: #B9672F;
    --bronze-edge: #EBC7A8;
}

:root[data-theme="dark"] {
    --gold-edge: rgba(243, 210, 122, .45);
    --gold-soft: #2E2716;
    --gold-text: #F5CD6A;
    --silver-edge: rgba(201, 209, 218, .35);
    --bronze-edge: rgba(232, 168, 119, .4);
}

.monthly-medal {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    background: linear-gradient(145deg, var(--silver-1), var(--silver-2));
}

.monthly-medal--1 { background: linear-gradient(145deg, var(--gold-1), var(--gold-2)); }
.monthly-medal--3 { background: linear-gradient(145deg, var(--bronze-1), var(--bronze-2)); }

.monthly-medal--sm {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.monthly-hype {
    flex: none;
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.monthly-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.monthly-status svg {
    width: 14px;
    height: 14px;
}

.monthly-status--live {
    background: rgba(0, 168, 101, .12);
    color: var(--green-text);
}

.monthly-status--frozen {
    background: rgb(var(--ink-rgb) / .07);
    color: var(--title-text);
}


/* ---------- Badgen i Upptäck ---------- */

.monthly-badge {
    position: relative;   /* ovanför hjältens bakgrund */
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    margin: 4px 0 16px;
    padding: 10px 18px 10px 10px;
    border-radius: 999px;
    border: 1px solid var(--gold-edge);
    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--pure-white) 65%);
    box-shadow: 0 8px 24px rgba(214, 160, 0, .18);
    color: var(--dark-text);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.monthly-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(214, 160, 0, .26);
}

.monthly-badge:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}

.monthly-badge-trophy {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--gold-1), var(--gold-2));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 10px rgba(214, 160, 0, .35);
    color: #fff;
}

.monthly-badge-trophy svg {
    width: 23px;
    height: 23px;
}

.monthly-badge-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.monthly-badge-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-text);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.monthly-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--green-text);
    letter-spacing: 0;
    text-transform: none;
}

.monthly-badge-title {
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-badge-arrow {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--gold-text);
}


/* ---------- Rubriken ---------- */

.monthly-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.monthly-head h1 {
    margin: 0;
    color: var(--title-text);
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.monthly-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.monthly-head-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 640px;
}

.monthly-head-text p,
.monthly-lead {
    margin: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.55;
}

.monthly-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.monthly-head--center {
    align-items: center;
    text-align: center;
}

.monthly-head--center .category-crumbs {
    align-self: flex-start;
}

.monthly-lead {
    max-width: 620px;
}


/* ---------- Alla månader ---------- */

.monthly-live-card {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 28px;
    margin-bottom: 32px;
    padding: 26px 28px;
    border-radius: 26px;
    border: 1px solid var(--gold-edge);
    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--pure-white) 55%);
    box-shadow: 0 16px 40px rgba(214, 160, 0, .16);
    color: var(--dark-text);
    text-decoration: none;
}

.monthly-live-card:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}

.monthly-live-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.monthly-live-month {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
}

.monthly-live-when {
    color: var(--text-muted);
    font-size: 15px;
}

.monthly-live-cta {
    margin-top: auto;
}

.monthly-live-empty {
    align-self: center;
    color: var(--text-muted);
}

.monthly-leaders {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.monthly-leader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--pure-white);
}

.monthly-leader-img {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-warm);
}

.monthly-leader-text,
.monthly-row-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.monthly-leader-text strong,
.monthly-row-text strong {
    overflow: hidden;
    font-size: 15.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-leader-text small,
.monthly-row-text small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-section-title {
    margin: 0 0 14px;
    color: var(--dark-text);
    font-size: 22px;
    font-weight: 900;
}

.monthly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.monthly-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: var(--pure-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    color: var(--dark-text);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.monthly-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .1);
}

.monthly-card-media {
    position: relative;
    display: block;
    height: 130px;
    background: var(--surface-warm);
}

.monthly-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.monthly-card-month {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(17, 17, 17, .72);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.monthly-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
}

.monthly-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
}

.monthly-card-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-card-row small {
    flex: none;
    max-width: 45%;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-card-row--place {
    color: var(--text-2);
    font-size: 13.5px;
}


/* ---------- En månad ---------- */

.monthly-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border-radius: 999px;
    background: var(--pure-white);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.monthly-switch-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.monthly-switch-step:hover {
    background: var(--surface-2);
    color: var(--dark-text);
}

.monthly-switch-step svg {
    width: 16px;
    height: 16px;
}

.monthly-switch-step.is-off {
    visibility: hidden;
}

.monthly-switch-current {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--title-text);
    color: var(--pure-white);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.monthly-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-3);
}

.monthly-tabs[hidden] {
    display: none;
}

.monthly-tab {
    min-height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.monthly-tab[aria-selected="true"] {
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.monthly-tab:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.monthly-board {
    max-width: 900px;
    margin: 0 auto 32px;
}

.monthly-board[hidden] {
    display: none;
}

/* Med flikarna säger fliken vad listan är */
.monthly-tabbed .monthly-board > .monthly-section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Prispallen: 2 · 1 · 3 */
.monthly-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "two one three";
    align-items: end;
    gap: 18px;
    margin-bottom: 18px;
}

.podium-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    border: 2px solid var(--silver-edge);
    background: var(--pure-white);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
    color: var(--dark-text);
    text-align: center;
    text-decoration: none;
    transition: transform .15s ease;
}

.podium-card:hover {
    transform: translateY(-3px);
}

.podium-card--1 {
    grid-area: one;
    border-color: var(--gold-edge);
    box-shadow: 0 18px 40px rgba(214, 160, 0, .22);
}

.podium-card--2 { grid-area: two; }

.podium-card--3 {
    grid-area: three;
    border-color: var(--bronze-edge);
}

.podium-media {
    position: relative;
    display: block;
    height: 150px;
    background: var(--surface-warm);
}

.podium-card--1 .podium-media { height: 200px; }
.podium-card--3 .podium-media { height: 130px; }

.podium-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podium-medal {
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 44px;
    height: 44px;
    border: 3px solid var(--pure-white);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
    font-size: 18px;
    transform: translateX(-50%);
}

.podium-card--1 .podium-medal {
    width: 52px;
    height: 52px;
    bottom: -24px;
}

.podium-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 30px 14px 16px;
}

.podium-body strong {
    font-size: 16px;
    line-height: 1.25;
}

.podium-card--1 .podium-body strong {
    font-size: 19px;
}

.podium-body small {
    color: var(--text-muted);
    font-size: 13px;
}

.podium-body .monthly-hype {
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--orange-soft);
    font-size: 13px;
}

.monthly-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.monthly-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 12px;
    border-radius: 16px;
    background: var(--pure-white);
    color: var(--dark-text);
    text-decoration: none;
}

.monthly-row:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

.monthly-row-rank {
    flex: none;
    width: 30px;
    color: var(--text-faint);
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.monthly-row-img {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-warm);
}

.monthly-more {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 22px;
    border-radius: 20px;
    background: var(--pure-white);
}

.monthly-more-title {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
}

.monthly-more-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.monthly-more-areas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    color: var(--text-muted);
    font-size: 14px;
}

.monthly-more-chips + .monthly-more-areas {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.monthly-more-areas a {
    font-weight: 700;
}


/* ---------- Mobil ---------- */

@media (max-width: 768px) {
    .monthly-badge {
        display: flex;
        border-radius: 18px;
        padding: 10px 12px 10px 10px;
        gap: 12px;
    }

    .monthly-badge-text {
        flex: 1;
    }

    .monthly-live-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 18px 16px;
        border-radius: 22px;
    }

    .monthly-live-month {
        font-size: 32px;
    }

    .monthly-live-cta {
        display: none;   /* hela kortet är länken */
    }

    .monthly-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .monthly-card-media {
        height: 96px;
    }

    .monthly-card-month {
        left: 8px;
        bottom: 8px;
        padding: 4px 10px;
        font-size: 15px;
    }

    .monthly-card-body {
        padding: 10px 12px 12px;
    }

    .monthly-card-row small,
    .monthly-card-row--place {
        display: none;
    }

    /* Växlaren: bara pilar runt månaden */
    .monthly-switch {
        align-self: stretch;
        justify-content: space-between;
    }

    .monthly-switch-name {
        display: none;
    }

    .monthly-switch-step {
        padding: 0;
        justify-content: center;
    }

    .monthly-tabs {
        align-self: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Prispallen: #1 stor överst, 2 och 3 bredvid varandra */
    .monthly-podium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "one one" "two three";
        gap: 10px;
    }

    .podium-card {
        border-radius: 18px;
    }

    .podium-media,
    .podium-card--3 .podium-media {
        height: 90px;
    }

    .podium-card--1 .podium-media {
        height: 170px;
    }

    .podium-medal {
        width: 36px;
        height: 36px;
        bottom: -16px;
        font-size: 15px;
    }

    .podium-card--1 .podium-medal {
        width: 44px;
        height: 44px;
        bottom: -20px;
    }

    .podium-body {
        padding: 22px 10px 12px;
    }

    .podium-body strong {
        font-size: 14px;
    }

    .podium-card--1 .podium-body strong {
        font-size: 17px;
    }

    .monthly-row {
        gap: 10px;
        padding: 8px 12px 8px 8px;
    }

    .monthly-row-img {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .monthly-badge,
    .monthly-card,
    .podium-card {
        transition: none;
    }
}

/* ===== main/css/place_chip.css ===== */
/* =====================================================
   📍 ORTKNAPPEN (partials/place_chip.html) — samma överallt där man väljer plats.
   Rund bricka med egen ikon (⌖ nära mig, jordglob, nål) + namnet.
   Vald: orange kant och helt orange bricka med vit, ifylld ikon.
   Raden: .place-chips (sveps på smala skärmar, radbryts annars).
===================================================== */

.place-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

/* En rad att svepa (Hem, mobil överallt) */
.place-chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
}

.place-chips--scroll::-webkit-scrollbar {
    display: none;
}

.place-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.place-chip-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    transition: background .15s ease, color .15s ease;
}

.place-chip-icon .nav-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.1;
}

/* Nära mig: alltid orange ikon — den gör något (frågar efter position) */
.place-chip--near .place-chip-icon {
    background: var(--orange-soft);
    color: var(--hype-orange);
}

.place-chip:hover {
    border-color: rgba(255, 111, 0, .45);
    box-shadow: 0 4px 12px rgba(255, 111, 0, .12);
}

.place-chip:hover .place-chip-icon {
    background: var(--orange-soft);
    color: var(--hype-orange);
}

.place-chip:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.place-chip.is-active {
    border: 1.5px solid var(--hype-orange);
    background: var(--orange-soft);
    color: var(--orange-text);
    font-weight: 800;
    box-shadow: none;
}

span.place-chip.is-active {
    cursor: default;
}

.place-chip.is-active .place-chip-icon {
    background: var(--hype-orange);
    color: #fff;
}

.place-chip.is-active .place-chip-icon .nav-icon .f {
    fill: currentColor;
    fill-opacity: .3;
}

.place-chip-count {
    min-width: 20px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

/* "Byt ort ▾" — öppnar väljaren: fyrkantig orange bricka */
.place-chip--pick {
    padding-right: 12px;
    border-radius: 14px;
}

.place-chip--pick .place-chip-icon {
    border-radius: 10px;
    background: var(--hype-orange);
    color: #fff;
}

.place-chip--pick.is-active {
    border-radius: 999px;
}

.place-chip--pick.is-active .place-chip-icon {
    border-radius: 50%;
}

.place-chip-arrow {
    display: flex;
    color: var(--text-faint);
}

.place-chip-arrow .nav-icon {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
}

.place-chip.is-active .place-chip-arrow {
    color: currentColor;
}

/* I en rubrik ("Hajpat i [Nacka ▾] just nu") */
.section-title .place-chip,
h1 .place-chip,
h2 .place-chip {
    vertical-align: middle;
    font-size: inherit;
    font-weight: 900;
}


@media (max-width: 768px) {
    .place-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 0;
        scrollbar-width: none;
    }

    .place-chips::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .place-chip,
    .place-chip-icon {
        transition: none;
    }
}

/* ===== main/css/list_filters.css ===== */
/* =====================================================
   🍽️ 🏪 MAT- OCH RESTAURANGLISTAN (discover/food_page.html, restaurants_page.html)
   - Rubriken "Mat i [📍 Stockholm ▾]" + antal (partials/list_title.html)
   - Kategorierna som rutor: .cat-bar--tiles i category_menu.css
   - Filterkortet: pris (segment) · Populär/Erbjudanden | sortering · visning,
     och "Valda:" med ✕ under. Mobil: "Filter (2)" → ett ark nerifrån (list_pages.js).
   Sortering, karta och visning: .list-sort, .list-map-link, .layout-toggle (explore.css).
===================================================== */

.list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 8px 0 4px;
}

.list-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    color: var(--dark-text);
    font-size: clamp(1.7rem, 3.2vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.list-title-in {
    font-weight: 900;
}

.list-title .place-chip {
    height: 46px;
    padding-right: 14px;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}

.list-title .place-chip-icon {
    width: 34px;
    height: 34px;
}

.list-title .place-chip-icon .nav-icon {
    width: 18px;
    height: 18px;
}

.list-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 15px;
}

.list-sub strong {
    color: var(--dark-text);
}

.list-sub .place-chip {
    height: 34px;
    padding-right: 12px;
    font-size: 13px;
}

.list-sub .place-chip-icon {
    width: 24px;
    height: 24px;
}

.list-head .list-map-link {
    height: 44px;
    border-radius: 14px;
}


/* ---------- Filterkortet ---------- */

.list-filters {
    margin: 16px 0;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    box-shadow: 0 6px 18px rgba(17, 24, 39, .04);
}

.list-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.list-filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}

.list-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.list-filter-label {
    padding-left: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

/* Pris: en sammanhängande väljare */
.list-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--surface-2);
}

.list-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.list-seg-btn:hover {
    color: var(--dark-text);
}

.list-seg-btn.is-selected {
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), inset 0 0 0 1.5px var(--hype-orange);
}

.list-seg-btn:focus-visible,
.list-toggle:focus-visible,
.list-filter-open:focus-visible,
.list-chosen-chip:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* 🔥 Populär · 🏷️ Erbjudanden */
.list-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .15s ease;
}

.list-toggle:first-of-type {
    margin-left: 4px;
}

.list-toggle .list-icon {
    color: var(--orange-text);
}

.list-toggle:hover {
    border-color: rgba(255, 111, 0, .45);
}

.list-toggle.is-selected {
    border: 1.5px solid var(--hype-orange);
    background: var(--orange-soft);
    color: var(--orange-text);
    font-weight: 800;
}

.list-toggle.is-selected .list-icon {
    fill: var(--hype-orange);
    stroke: var(--hype-orange);
}

.list-filters .price-filter-note {
    margin: 8px 0 0 6px;
}

/* Sortering + visning längst till höger */
.list-filters .list-sort {
    margin-left: auto;
}

.list-filters .list-sort select,
.list-filters .layout-toggle {
    border-radius: 12px;
}

.list-filters .list-sort select {
    height: 40px;
}

.list-filters .layout-toggle-btn {
    padding: 0 9px;
    border-radius: 9px;
}

/* Bara ikonerna här (titeln och texten för skärmläsare finns kvar) — så får allt plats på en rad */
.list-filters .layout-toggle-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Bara på mobil */
.list-filter-open,
.filter-sheet-head,
.filter-sheet-foot {
    display: none;
}


/* ---------- 🌱 Kost · 🐕 Passar för (partials/tag_filter_group.html, main/diet.py) ---------- */

.tag-filter-group {
    flex-wrap: wrap;
}

.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.list-toggle.tag-chip {
    gap: 6px;
    margin-left: 0;
    padding: 0 12px;
}

.tag-filter-note,
.tag-remember {
    flex-basis: 100%;
    margin: 0;
    padding-left: 6px;
    font-size: 12.5px;
}

.tag-filter-note {
    color: var(--text-muted);
}

.tag-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-weight: 700;
    cursor: pointer;
}

.tag-remember[hidden] {
    display: none;
}

.tag-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--hype-orange);
}


/* ---------- Valda: [Café ✕] [Prisnivå 2 ✕] Rensa alla ---------- */

.list-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 6px 2px;
    border-top: 1px solid var(--border);
}

.list-chosen-label {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
}

.list-chosen-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 9px 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 111, 0, .35);
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.list-chosen-chip .list-icon {
    width: 13px;
    height: 13px;
    stroke-width: 2.8;
}

.list-chosen-chip:hover {
    border-color: var(--hype-orange);
}

.list-chosen-clear {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
}


/* ---------- Mobil: Filter-knapp + ark nerifrån ---------- */
@media (max-width: 768px) {

    .list-head {
        margin-top: 4px;
    }

    .list-head .list-map-link {
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .list-head {
        position: relative;
        padding-right: 52px;
    }

    .list-head .list-map-link span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .list-title .place-chip {
        height: 40px;
    }

    .list-title .place-chip-icon {
        width: 30px;
        height: 30px;
    }

    /* Kortet blir bara en rad knappar */
    .list-filters {
        padding: 0;
        border: none;
        background: none;
        box-shadow: none;
    }

    .list-filter-bar {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .list-filter-open {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: none;
        height: 44px;
        padding: 0 14px;
        border: none;
        border-radius: 14px;
        background: var(--dark-text);
        color: var(--pure-white);
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .list-filter-open .nav-icon {
        width: 18px;
        height: 18px;
    }

    .list-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--hype-orange);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
    }

    .list-filters .list-sort {
        flex: 1;
        min-width: 0;
        margin-left: 0;
    }

    .list-filters .list-sort > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .list-filters .list-sort select {
        width: 100%;
        height: 44px;
        border-radius: 14px;
    }

    .list-filters .layout-toggle {
        flex: none;
        border-radius: 14px;
    }

    .list-filters .layout-toggle-btn {
        height: 36px;
    }

    /* Arket: dolt tills man trycker (bara när JS finns — annars syns filtren som vanligt) */
    [data-filters-ready] .list-filter-panel {
        display: none;
    }

    [data-filters-ready].is-open .list-filter-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 16px;
        max-height: 85vh;
        overflow-y: auto;
        padding: 12px 18px calc(18px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        border-radius: 24px 24px 0 0;
        background: var(--pure-white);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .2);
        animation: filter-sheet-up .22s ease;
    }

    [data-filters-ready].is-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(17, 17, 17, .45);
    }

    [data-filters-ready] .filter-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .filter-sheet-head::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 5px;
        margin-left: -20px;
        border-radius: 999px;
        background: var(--border-strong);
    }

    .filter-sheet-title {
        margin: 8px 0 0;
        color: var(--dark-text);
        font-size: 20px;
        font-weight: 900;
    }

    .filter-sheet-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: var(--surface-2);
        color: var(--dark-text);
        cursor: pointer;
    }

    .filter-sheet-close .nav-icon {
        width: 18px;
        height: 18px;
    }

    .is-open .list-filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .is-open .list-filter-label {
        padding: 0;
        font-size: 12.5px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .is-open .list-seg {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 0;
        background: none;
    }

    .is-open .list-seg-btn {
        min-height: 48px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--pure-white);
        color: var(--dark-text);
    }

    .is-open .list-seg-btn.is-selected {
        border: 2px solid var(--hype-orange);
        background: var(--orange-soft);
        box-shadow: none;
    }

    .is-open .list-toggle {
        min-height: 52px;
        margin: 0;
        border-radius: 14px;
        font-size: 15px;
    }

    /* 🌱 Kostchipsen två och två i arket */
    .is-open .tag-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .is-open .tag-filter-note,
    .is-open .tag-remember {
        padding-left: 0;
        font-size: 13px;
    }

    [data-filters-ready] .filter-sheet-foot {
        display: flex;
        gap: 10px;
        padding-top: 4px;
    }

    .filter-sheet-clear {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        padding: 0 18px;
        border-radius: 14px;
        border: 1px solid var(--border);
        color: var(--dark-text);
        font-weight: 700;
        text-decoration: none;
    }

    .filter-sheet-done {
        flex: 1;
        justify-content: center;
        height: 50px;
        border-radius: 14px;
        font-size: 15px;
    }

    html.filter-sheet-open {
        overflow: hidden;
    }

    .list-chosen {
        margin-top: 10px;
        padding: 0;
        border: none;
    }
}

@keyframes filter-sheet-up {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    [data-filters-ready].is-open .list-filter-panel {
        animation: none;
    }
}

/* ===== main/css/settings.css ===== */
/* =====================================================
   KORT-SIDOR (ägarpanelen, listformuläret, guide_share)
   .settings-page / .settings-card / .settings-switch delas av flera sidor.
   Inställningarna (profile_settings.html) har egna klasser: .st-* längre ner.
===================================================== */

.settings-page {
    max-width: 820px;
}

/* Ankarlänkarna ska inte hamna under den fasta headern */
.settings-page [id] {
    scroll-margin-top: 100px;
}

.settings-page .profile-identity .explore-eyebrow {
    margin-bottom: 6px;
}

.settings-page .profile-identity h1 {
    margin: 4px 0 2px;
}

.settings-page .settings-card {
    margin-bottom: 16px;
    padding: 24px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 4px 14px rgba(16, 24, 40, .05);
}

.settings-page .settings-card h2 {
    margin: 0 0 4px;
    color: var(--dark-text);
    font-size: 1.15rem;
    font-weight: 800;
}

.settings-page .settings-card > p {
    margin: 0 0 18px;
    color: var(--text-muted);
    line-height: 1.5;
}

.settings-page .settings-card--danger {
    border-color: rgba(239, 68, 68, .25);
    background:
        linear-gradient(135deg, rgba(239, 68, 68, .06), transparent 60%),
        var(--pure-white);
}

.settings-page .settings-hint {
    display: block;
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Brytare (listformuläret) */
.settings-page .settings-switch {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
}

.settings-page .settings-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.settings-page .settings-switch-track {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    margin-top: 2px;
    border-radius: 999px;
    background: var(--surface-4);
    transition: background .2s ease;
}

.settings-page .settings-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pure-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}

.settings-page .settings-switch input:checked + .settings-switch-track {
    background: var(--hype-orange);
}

.settings-page .settings-switch input:checked + .settings-switch-track::after {
    transform: translateX(20px);
}

.settings-page .settings-switch input:focus-visible + .settings-switch-track {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.settings-page .settings-switch-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dark-text);
}

.settings-page .settings-switch-text small {
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .settings-page .settings-card {
        padding: 18px;
    }
}


/* =====================================================
   ⚙️ INSTÄLLNINGAR (profile_settings.html, account_settings.js)
   Bara MatHajps färger (main.css). Dator: meny till vänster som följer
   med. Mobil (≤760px): menyn är startvyn, en del i taget (.is-routed).
===================================================== */

/* Popupen och "Sparat"-rutan ligger utanför .st-page, så de får samma variabler */
.st-page,
.st-modal,
.st-toast {
    --st-glow: linear-gradient(135deg, #ff7a1a 0%, #e8520c 45%, #d4430b 100%);   /* = Hajpad (cards.css) */
    --st-danger: #dc2626;
    --st-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
}

.st-page {
    max-width: 1040px;
    margin: 0 auto;
    color: var(--dark-text);
}

:root[data-theme="dark"] .st-page {
    --st-shadow: 0 1px 0 rgba(255, 255, 255, .03);
}

.st-page [id] {
    scroll-margin-top: 96px;
}

.st-page .nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Ifyllda delar i ikonerna (partials/nav_icon.html) — svagt tonade */
.st-page .nav-icon .f,
.st-modal .nav-icon .f {
    fill: currentColor;
    fill-opacity: .2;
}

.st-page a {
    color: inherit;
    text-decoration: none;
}

.st-page :focus-visible,
.st-modal :focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- Kort ---------- */

.st-head,
.st-nav,
.st-section {
    box-sizing: border-box;
    border-radius: 24px;
    background: var(--pure-white);
    border: 1px solid var(--border);
    box-shadow: var(--st-shadow);
}


/* ---------- Toppkortet: vem du är + sök + läget ---------- */

.st-head {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px 28px;
}

.st-head-top {
    display: flex;
    align-items: center;
    gap: 20px;
}

.st-head-avatar {
    flex-shrink: 0;
    border-radius: 50%;
}

.st-head-avatar .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 32px;
}

/* Utan vald ring: en tunn orange ring, som på profilen */
.st-head-avatar > .avatar:not(.avatar-ring) {
    box-shadow: 0 0 0 3px var(--pure-white), 0 0 0 6px var(--hype-orange);
}

.st-head-id {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.st-eyebrow .nav-icon {
    width: 16px;
    height: 16px;
}

.st-head-id h1 {
    margin: 0;
    overflow: hidden;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-page .st-link {
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 700;
}

.st-search {
    position: relative;
    flex: 0 1 340px;
}

.st-search .nav-icon {
    position: absolute;
    top: 14px;
    left: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.st-page .st-search input {
    width: 100%;
    margin: 0;
    height: 48px;
    box-sizing: border-box;
    padding: 0 16px 0 46px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
}

.st-search input::placeholder {
    color: var(--text-faint);
}

.st-page .st-search input:focus {
    outline: none;
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .15);
}

/* Läget just nu — ett tryck tar en dit */
.st-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.st-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 600;
    transition: background .15s ease;
}

.st-status-chip:hover {
    background: var(--surface-3);
}

.st-status-label {
    color: var(--text-muted);
}

.st-status-chip strong {
    color: var(--dark-text);
    font-weight: 800;
}

.st-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface-4);
}

.st-tone--green .st-dot  { background: #00A865; }
.st-tone--orange .st-dot { background: var(--hype-orange); }
.st-tone--blue .st-dot   { background: #3B82F6; }
.st-tone--yellow .st-dot { background: #FFC107; }


/* ---------- Två kolumner: meny + innehåll ---------- */

.st-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.st-nav {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 22px;
}

.st-nav-group {
    margin: 10px 10px 4px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.st-nav-group:first-child {
    margin-top: 4px;
}

.st-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-nav-divider {
    height: 1px;
    margin: 8px 10px;
    background: var(--border);
}

.st-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 14px;
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.st-nav-link:hover {
    background: var(--surface-2);
}

.st-nav-link[aria-current="true"] {
    background: var(--orange-soft);
    color: var(--orange-text);
    font-weight: 800;
}

.st-nav-link--danger,
.st-nav-link--danger[aria-current="true"] {
    color: var(--red-text);
}

.st-nav-link--danger[aria-current="true"] {
    background: var(--red-soft);
}

.st-nav-link.is-filtered {
    opacity: .35;
}

/* På datorn: bara ikonen, ingen ruta */
.st-nav .st-tile {
    width: auto;
    height: auto;
    background: none;
    color: inherit;
}

.st-nav-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.st-nav-text small,
.st-nav-link > .nav-icon:last-child {
    display: none;   /* värdet och pilen syns bara i mobilens startvy */
}

.st-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 800;
}


/* ---------- Delarna ---------- */

.st-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.st-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px 24px;
}

.st-section.is-filtered {
    display: none;
}

.st-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-section-head > div {
    flex: 1;
    min-width: 0;
}

.st-section-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.st-section-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

/* Tonad ikonruta */
.st-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.st-tile .nav-icon {
    width: 22px;
    height: 22px;
}

.st-tile--small {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.st-tile--small .nav-icon {
    width: 18px;
    height: 18px;
}

.st-tile--orange { background: var(--orange-soft); color: var(--orange-text); }
.st-tile--yellow { background: var(--yellow-soft); color: var(--amber-text); }
.st-tile--blue   { background: var(--blue-soft);   color: var(--blue-text); }
.st-tile--purple { background: var(--purple-soft); color: var(--dark-text); }
.st-tile--gray   { background: var(--surface-2);   color: var(--dark-text); }
.st-tile--red    { background: var(--red-soft);    color: var(--red-text); }

/* "Sparas direkt" → "Sparat ✓" */
.st-chip,
.st-tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 700;
    white-space: nowrap;
}

.st-chip {
    height: 28px;
    padding: 0 12px;
    font-size: 12.5px;
    transition: background .2s ease, color .2s ease;
}

.st-chip.is-saved {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.st-tag {
    height: 22px;
    margin-left: 6px;
    padding: 0 8px;
    font-size: 11.5px;
    vertical-align: 2px;
}

.st-overline {
    margin: 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.st-overline--red {
    color: var(--red-text);
}

.st-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.st-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.st-form legend {
    margin-bottom: 10px;
}

.st-form .st-overline:not(:first-of-type) {
    margin-top: 8px;
}

.st-hint {
    display: block;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.st-empty-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.st-empty-note a {
    color: var(--orange-text) !important;
    font-weight: 700;
}

/* Mobilens "← Inställningar" (visas bara när en del är öppen) */
.st-back {
    display: none;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin: -6px 0 -4px -6px;
    padding: 6px 10px 6px 4px;
    border-radius: 999px;
    color: var(--orange-text) !important;
    font-size: 14.5px;
    font-weight: 800;
}


/* ---------- Rader (reglage, länkar, enheter) ---------- */

.st-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.st-rows > :first-child,
.st-rows > input[type="hidden"] + .st-row,
.st-rows > input[type="hidden"] + input[type="hidden"] + .st-row {
    border-top: 0;
}

.st-row--top-line {
    padding-bottom: 0;
}

.st-row.is-highlight {
    margin: 0 -12px;
    padding: 14px 12px;
    border-radius: 16px;
    background: var(--orange-soft);
}

.st-row-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    cursor: pointer;
}

.st-row-text strong {
    font-size: 15px;
    font-weight: 700;
}

.st-row-text small {
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

.st-row > .avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 16px;
}

.st-row form {
    margin: 0;
}

/* ⓘ och hela förklaringen */
.st-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.st-info:hover,
.st-info[aria-expanded="true"] {
    background: var(--surface-2);
    color: var(--dark-text);
}

.st-info .nav-icon {
    width: 18px;
    height: 18px;
}

.st-more {
    flex-basis: 100%;
    margin: 4px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.55;
}

.st-more[hidden] {
    display: none;
}

/* Brytare: riktig checkbox ovanpå, osynlig — banan ritas av .st-switch-track */
.st-switch {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 28px;
}

.st-switch input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.st-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--surface-4);
    transition: background .2s ease;
}

.st-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}

.st-switch input:checked + .st-switch-track {
    background: var(--hype-orange);
}

.st-switch input:checked + .st-switch-track::after {
    transform: translateX(20px);
}

.st-switch input:focus-visible + .st-switch-track {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.st-text-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--orange-text);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

[data-animations-note][hidden],
[data-animations-reset-note][hidden] {
    display: none;
}


/* ---------- Knappar ---------- */

.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, opacity .15s ease;
}

.st-btn .nav-icon {
    width: 18px;
    height: 18px;
}

.st-btn--small {
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
}

.st-btn--primary {
    border: 0;
    background: var(--st-glow);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(232, 82, 12, .3);
}

.st-btn--primary:hover {
    filter: brightness(1.06);
}

.st-btn--ghost {
    border-color: var(--border);
    background: var(--pure-white);
    color: var(--dark-text) !important;
}

.st-btn--ghost:hover {
    background: var(--surface-2);
}

.st-btn--danger-ghost {
    border-color: rgba(239, 68, 68, .45);
    background: var(--pure-white);
    color: var(--red-text);
}

.st-btn--danger-ghost:hover,
.st-btn--danger-soft {
    background: var(--red-soft);
}

.st-btn--danger-soft {
    border-color: rgba(239, 68, 68, .5);
    color: var(--red-text);
}

.st-btn--danger {
    border: 0;
    background: var(--st-danger);
    color: #FFFFFF;
}

.st-btn--danger:hover:not(:disabled) {
    filter: brightness(1.08);
}

.st-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.st-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* ---------- 👤 Profil ---------- */

.st-profile-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
}

.st-avatar-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.st-avatar-current {
    flex-shrink: 0;
}

.st-avatar-current .avatar,
.st-avatar-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 36px;
}

.st-avatar-current > span > .avatar:not(.avatar-ring),
.st-avatar-preview {
    box-shadow: 0 0 0 4px var(--orange-soft), 0 0 0 5px rgba(255, 111, 0, .35);
}

.st-avatar-preview[hidden],
.st-page [data-current-avatar][hidden] {
    display: none;
}

.st-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.st-upload {
    position: relative;
    overflow: hidden;
}

/* Filväljaren är osynlig men klickbar via etiketten (och nåbar med tangentbord) */
.st-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.st-upload:focus-within {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.st-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-field-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.st-field label,
.st-label {
    font-size: 14.5px;
    font-weight: 800;
}

.st-counter {
    color: var(--text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* :is(.st-page, .st-modal) väger mer än main.css regel för alla textfält (input[type="text"]) */
:is(.st-page, .st-modal) .st-input,
:is(.st-page, .st-modal) .st-textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
}

:is(.st-page, .st-modal) .st-input {
    height: 48px;
    padding: 0 16px;
    border-radius: 14px;
}

:is(.st-page, .st-modal) .st-textarea {
    min-height: 92px;
    padding: 14px 16px;
    border-radius: 16px;
    line-height: 1.45;
    resize: vertical;
}

.st-input::placeholder,
.st-textarea::placeholder {
    color: var(--text-faint);
}

:is(.st-page, .st-modal) .st-input:focus,
:is(.st-page, .st-modal) .st-textarea:focus {
    outline: none;
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .15);
}

.st-field-error {
    margin: 0;
    color: var(--red-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* 📱 Sociala medier: två och två (partials/social_fields.html) */
.st-page .social-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.st-page .social-field {
    grid-template-columns: minmax(0, 1fr);
}

.st-page .social-field-label {
    font-size: 14px;
}

.st-page .social-field-label .social-link {
    width: 26px;
    height: 26px;
}

.st-page .social-fields .social-field-input input {
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}

.st-page .social-field-error {
    grid-column: 1;
}

/* Spara-raden längst ner i kortet */
.st-profile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -24px -24px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 24px 24px;
    transition: background .2s ease;
}

.st-profile-bar-text {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.st-profile-bar.is-dirty {
    background: var(--orange-soft);
}

.st-profile-bar.is-dirty .st-profile-bar-text {
    color: var(--orange-text);
}


/* ---------- 🏅 Märke och ring ---------- */

.st-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.st-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--pure-white);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.st-choice--row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.st-choice:hover {
    border-color: rgba(255, 111, 0, .4);
}

.st-choice:has(input:checked) {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
    box-shadow: 0 0 0 1px var(--hype-orange);
}

.st-choice:has(input:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Rundknappen syns inte — hela rutan är valet */
.st-choice input,
.st-theme input,
.st-kind input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.st-choice-emoji {
    font-size: 24px;
    line-height: 1;
}

.st-choice-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.st-choice-text strong {
    font-size: 14px;
}

.st-choice-text small {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

/* "anna 🗺️" — långa namn kortas, men märket syns alltid */
.st-badge-preview {
    display: flex;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
}

.st-badge-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ⭕ Den egna bilden med ringen (partials/settings_ring_preview.html) */
.settings-ring-preview {
    display: inline-block;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 4px;
    font-size: 15px;
}

.settings-ring-preview.avatar-initial {
    display: inline-flex;
}


/* ---------- 📍 Område ---------- */

.st-page .area-search,
.st-page .area-search-field {
    position: relative;
}

.st-page .area-search-field > .nav-icon {
    position: absolute;
    top: 14px;
    left: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.st-page .st-input.st-input--search {
    padding: 0 52px 0 46px;
    border-radius: 999px;
    font-weight: 600;
}

.st-page .area-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-2);
    cursor: pointer;
}

.st-page .area-clear .nav-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

.st-page .area-clear[hidden],
.st-page .area-results[hidden] {
    display: none;
}

.st-page .area-results {
    position: absolute;
    top: 54px;
    right: 0;
    left: 0;
    z-index: 20;
    max-height: 280px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--pure-white);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.st-page .area-results li {
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}

.st-page .area-results li strong {
    display: block;
}

.st-page .area-results li small {
    color: var(--text-faint);
}

.st-page .area-results li:hover,
.st-page .area-results li.is-active {
    background: var(--orange-soft);
}

.st-page .area-results .area-empty {
    color: var(--text-faint);
    cursor: default;
}

.st-page .area-results .area-empty:hover {
    background: none;
}

.st-page #area-hint {
    margin-top: 8px;
    padding-left: 4px;
}


/* ---------- 🌙 Utseende ---------- */

.st-themes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.st-theme {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--pure-white);
    cursor: pointer;
    transition: border-color .15s ease;
}

.st-theme:hover {
    border-color: rgba(255, 111, 0, .4);
}

.st-theme:has(input:checked) {
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 1px var(--hype-orange);
}

.st-theme:has(input:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.st-theme strong {
    padding-left: 4px;
    font-size: 14.5px;
}

.st-theme-check {
    position: absolute;
    top: 16px;
    right: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hype-orange);
    color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--pure-white);
}

.st-theme-check .nav-icon {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.st-theme:has(input:checked) .st-theme-check {
    display: flex;
}

/* Liten bild av temat — fasta färger, så den ser likadan ut i båda teman */
.st-theme-preview {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 84px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 12px;
}

.st-theme-preview span {
    border-radius: 6px;
}

.st-theme-preview span:first-child {
    grid-row: span 2;
}

.st-theme-preview--light { background: #F7F7F7; border: 1px solid #e5e7eb; }
.st-theme-preview--light span { background: #FFFFFF; border: 1px solid #e5e7eb; }

.st-theme-preview--dark { background: #121314; border: 1px solid #34363B; }
.st-theme-preview--dark span { background: #1C1D20; border: 1px solid #34363B; }

/* 📱 Följ telefonen: halvt ljust, halvt mörkt */
.st-theme-preview--system { background: linear-gradient(135deg, #F7F7F7 50%, #121314 50%); border: 1px solid #9ca3af; }
.st-theme-preview--system span { background: #FFFFFF; border: 1px solid #e5e7eb; }
.st-theme-preview--system span:nth-child(2) { background: #1C1D20; border-color: #34363B; }

.st-theme-preview span:last-child { width: 60%; border-color: #FF6F00; background: #FF6F00; }


/* ---------- 🔔 Notiser ---------- */

.st-device {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--surface-2);
}

.st-device[hidden] {
    display: none;
}

.st-device-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-4);
}

.st-device[data-state="on"] .st-device-dot {
    background: #00A865;
    box-shadow: 0 0 0 4px rgba(0, 168, 101, .18);
}

.st-device[data-state="denied"] .st-device-dot,
.st-device[data-state="unsupported"] .st-device-dot {
    background: var(--red-text);
}

.st-device .push-status {
    flex: 1;
    min-width: 180px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
}

.st-device .st-btn-row button[hidden] {
    display: none;
}

.st-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.st-kind {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--pure-white);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.st-kind:has(input:checked) {
    border-color: rgba(255, 111, 0, .45);
    background: var(--orange-soft);
}

.st-kind:has(input:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.st-kind.is-required {
    cursor: not-allowed;
}

.st-kind-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    box-sizing: border-box;
    border: 2px solid var(--surface-4);
    border-radius: 7px;
    color: #FFFFFF;
}

.st-kind-box .nav-icon {
    width: 13px;
    height: 13px;
    stroke-width: 3.4;
    opacity: 0;
}

.st-kind:has(input:checked) .st-kind-box {
    border-color: var(--hype-orange);
    background: var(--hype-orange);
}

.st-kind.is-required .st-kind-box {
    border-color: var(--surface-4);
    background: var(--surface-4);
}

.st-kind:has(input:checked) .st-kind-box .nav-icon {
    opacity: 1;
}

.st-kind-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.st-kind-text strong {
    font-size: 14.5px;
}

.st-kind-text small {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.st-page .push-saved[hidden] {
    display: none;
}


/* ---------- 🔑 Konto och säkerhet ---------- */

.st-fold > summary {
    list-style: none;
    cursor: pointer;
}

.st-fold > summary::-webkit-details-marker {
    display: none;
}

.st-fold > summary > .nav-icon {
    color: var(--text-muted);
    transition: transform .2s ease;
}

.st-fold[open] > summary > .nav-icon {
    transform: rotate(90deg);
}

.st-rows > .st-fold + *,
.st-rows > * + .st-fold {
    border-top: 1px solid var(--border);
}

.st-rows > .st-fold > summary {
    border-top: 0;
}

.st-password-form,
.st-fold-body {
    display: grid;
    gap: 12px;
    max-width: 420px;
    padding: 2px 0 18px;
}

.st-password-form .st-btn,
.st-fold-body .st-btn {
    justify-self: start;
}

.st-fold-body p {
    margin: 0;
}

.st-install-how {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.5;
}


/* ---------- ⚠️ Radera konto ---------- */

.st-section--danger {
    padding: 20px 24px;
    border-color: rgba(239, 68, 68, .3);
}

.st-section--danger h2 {
    font-size: 17px;
}


/* ---------- Sök: inget hittat ---------- */

.st-search-result {
    margin: 0;
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

.st-search-result[hidden],
.st-empty[hidden] {
    display: none;
}

.st-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 24px;
    border: 1px dashed var(--surface-4);
    border-radius: 24px;
    background: var(--pure-white);
    text-align: center;
}

.st-empty strong {
    font-size: 16px;
}

.st-empty span {
    color: var(--text-muted);
    font-size: 14px;
}


/* ---------- "Sparat: … · Ångra" ---------- */

.st-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 10040;

    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px 12px 12px;
    box-sizing: border-box;
    border: 1px solid #34363B;
    border-radius: 16px;
    background: #232428;
    color: #F2F2F3;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    font-size: 14.5px;
    font-weight: 700;

    transform: translateX(-50%);
    animation: st-toast-in .2s ease;
}

.st-toast[hidden] {
    display: none;
}

@keyframes st-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.st-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #00A865;
    color: #FFFFFF;
}

.st-toast-icon .nav-icon {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.st-toast.is-error .st-toast-icon {
    background: var(--st-danger);
}

.st-toast-undo {
    margin-left: 6px;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #FF8A3D;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.st-toast-undo[hidden] {
    display: none;
}


/* ---------- Radera konto: popup i två steg ---------- */

.st-modal-open {
    overflow: hidden;
}

.st-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;   /* över mobilens nedre meny och FAB-menyn (9999) */

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;

    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
}

.st-modal[hidden] {
    display: none;
}

.st-modal-box {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 32px);
    padding: 24px 28px 28px;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 28px;
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 25px 80px rgba(0, 0, 0, .3);
    font-size: 15px;
    line-height: 1.45;

    animation: st-pop .2s ease;
}

@keyframes st-pop {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.st-modal a {
    color: inherit;
    text-decoration: none;
}

.st-modal .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.st-modal-grip {
    display: none;
    align-self: center;
    width: 44px;
    height: 5px;
    margin: -8px 0 -4px;
    border-radius: 999px;
    background: var(--surface-4);
}

.st-modal-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.st-steps-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.st-steps {
    display: flex;
    flex: 1;
    gap: 6px;
}

.st-steps span {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--surface-3);
    transition: background .2s ease;
}

.st-steps span.is-on {
    background: #dc2626;
}

.st-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--dark-text);
    cursor: pointer;
}

.st-modal-close .nav-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.6;
}

.st-step {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.st-step[hidden] {
    display: none;
}

.st-modal h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.st-modal h2:focus {
    outline: none;
}

.st-modal p {
    margin: 0;
}

.st-modal-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.st-modal-hero p,
.st-modal-intro p {
    color: var(--text-muted);
}

.st-modal-intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-modal-intro strong {
    color: var(--dark-text);
}

.st-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red-text);
}

.st-modal-icon .nav-icon {
    width: 30px;
    height: 30px;
}

.st-gone {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--surface-2);
}

.st-gone ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-gone li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.st-gone li .nav-icon {
    color: var(--red-text);
}

.st-stays {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px !important;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    font-size: 14px;
}

.st-stays .nav-icon {
    margin-top: 1px;
    color: var(--text-muted);
}

.st-instead {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-instead-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 14px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: background .15s ease;
}

.st-instead-link:hover {
    background: var(--surface-2);
}

.st-instead-link > .nav-icon {
    color: var(--text-faint);
}

.st-instead-link .st-row-text strong {
    font-size: 14.5px;
}

.st-instead-link .st-row-text small {
    font-size: 13px;
}

.st-modal-buttons {
    display: flex;
    gap: 10px;
}

.st-modal-buttons .st-btn {
    flex: 1;
    height: 50px;
}

.st-modal-buttons .st-btn--danger {
    flex: 1.4;
}

.st-confirm-field {
    position: relative;
    display: block;
}

.st-modal .st-confirm-field .st-input {
    height: 52px;
    padding-right: 48px;
    border: 2px solid var(--border);
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
}

.st-modal .st-confirm-field .st-input.is-ok {
    border-color: #00A865;
}

.st-confirm-ok {
    position: absolute;
    top: 15px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #00A865;
    color: #FFFFFF;
}

.st-confirm-ok[hidden] {
    display: none;
}

.st-confirm-ok .nav-icon {
    width: 13px;
    height: 13px;
    stroke-width: 3.4;
}

.st-modal .st-hint {
    font-weight: 600;
}

.st-modal .st-hint.is-ok {
    color: var(--green-text);
}

.st-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--red-soft);
    color: var(--red-text);
    font-size: 14px;
    font-weight: 600;
}

.st-alert .nav-icon {
    margin-top: 1px;
}


/* ---------- Mellanstor skärm ---------- */

@media (max-width: 1100px) {
    .st-head-top {
        flex-wrap: wrap;
    }

    .st-search {
        flex: 1 1 100%;
    }
}


/* ---------- 📱 Mobil: startvyn + en del i taget ---------- */

@media (max-width: 760px) {

    .st-layout {
        display: block;
    }

    .st-head {
        margin-bottom: 18px;
        padding: 18px;
        border: 0;
        background: transparent;
        box-shadow: none;
        gap: 16px;
    }

    .st-head-top {
        gap: 14px;
    }

    .st-head-avatar .avatar {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .st-head-id h1 {
        font-size: 24px;
    }

    .st-status {
        flex-wrap: nowrap;
        margin: 0 -18px;
        padding: 0 18px 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .st-status::-webkit-scrollbar {
        display: none;
    }

    .st-status-chip {
        flex-shrink: 0;
        background: var(--pure-white);
        border: 1px solid var(--border);
    }

    /* Menyn = startvyn: grupper av rader i vita kort */
    .st-nav {
        position: static;
        gap: 0;
        margin-bottom: 20px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .st-nav-group {
        margin: 18px 14px 8px;
    }

    .st-nav-group:first-child {
        margin-top: 0;
    }

    .st-nav-divider {
        height: 0;
        margin: 10px 0;
    }

    .st-nav-list {
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 20px;
        background: var(--pure-white);
        box-shadow: var(--st-shadow);
    }

    .st-nav-link {
        min-height: 60px;
        padding: 8px 14px;
        border-radius: 0;
        color: var(--dark-text);
        font-size: 15.5px;
    }

    .st-nav-link + .st-nav-link {
        border-top: 1px solid var(--border);
    }

    .st-nav-link[aria-current="true"] {
        background: transparent;
        color: var(--dark-text);
        font-weight: 600;
    }

    .st-nav-link--danger,
    .st-nav-link--danger[aria-current="true"] {
        color: var(--red-text);
        font-weight: 700;
    }

    .st-nav .st-tile {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .st-nav .st-tile--orange { background: var(--orange-soft); color: var(--orange-text); }
    .st-nav .st-tile--yellow { background: var(--yellow-soft); color: var(--amber-text); }
    .st-nav .st-tile--blue   { background: var(--blue-soft);   color: var(--blue-text); }
    .st-nav .st-tile--purple { background: var(--purple-soft); color: var(--dark-text); }
    .st-nav .st-tile--gray   { background: var(--surface-2);   color: var(--dark-text); }
    .st-nav .st-tile--red    { background: var(--red-soft);    color: var(--red-text); }

    .st-nav-text small {
        display: block;
        overflow: hidden;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .st-nav-text small:empty {
        display: none;
    }

    .st-nav-link > .nav-icon:last-child {
        display: block;
        width: 18px;
        height: 18px;
        color: var(--text-faint);
    }

    .st-nav-link.is-filtered {
        display: none;
    }

    .st-section {
        padding: 18px;
        border-radius: 20px;
    }

    .st-section-head {
        flex-wrap: wrap;
    }

    .st-section-head .st-chip {
        display: none;   /* rutan längst ner säger "Sparat" */
    }

    .st-section--danger .st-section-head .st-btn {
        width: 100%;
    }

    .st-profile-bar {
        margin: 0 -18px -18px;
        padding: 12px 18px;
        border-radius: 0 0 20px 20px;
    }

    .st-page .social-fields,
    .st-kinds,
    .st-choices {
        grid-template-columns: minmax(0, 1fr);
    }

    .st-themes {
        gap: 8px;
    }

    .st-theme strong {
        font-size: 13px;
    }

    .st-theme-preview {
        height: 64px;
    }

    .st-theme-check {
        top: 12px;
        right: 12px;
    }

    .st-avatar-row {
        align-items: flex-start;
        gap: 16px;
    }

    .st-avatar-current .avatar,
    .st-avatar-preview {
        width: 72px;
        height: 72px;
        font-size: 30px;
    }

    /* Med JS: startvyn, eller EN öppen del (account_settings.js → .is-routed / data-open) */
    .st-page.is-routed .st-section,
    .st-page.is-routed[data-open] .st-search-result,
    .st-page.is-routed[data-open] .st-empty {
        display: none;
    }

    .st-page.is-routed[data-open] .st-head,
    .st-page.is-routed[data-open] .st-nav {
        display: none;
    }

    .st-page.is-routed .st-section.is-open {
        display: flex;
    }

    .st-page.is-routed .st-back {
        display: inline-flex;
    }

    .st-toast {
        bottom: calc(86px + env(safe-area-inset-bottom));   /* ovanför bottenmenyn */
    }
}


/* ---------- 📱 Popupen blir ett ark underifrån ---------- */

@media (max-width: 600px) {

    .st-modal {
        align-items: flex-end;
        padding: 0;
    }

    .st-modal-box {
        max-width: none;
        max-height: 92dvh;
        padding: 22px 18px calc(26px + env(safe-area-inset-bottom));
        border-radius: 28px 28px 0 0;
        animation-name: st-sheet;
    }

    @keyframes st-sheet {
        from { transform: translateY(24px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .st-modal-grip {
        display: block;
    }

    .st-modal-buttons {
        flex-direction: column-reverse;
    }

    .st-modal-buttons .st-btn {
        flex: none;
        width: 100%;
    }
}


@media (prefers-reduced-motion: reduce) {

    .st-switch-track,
    .st-switch-track::after,
    .st-modal-box,
    .st-toast,
    .st-fold > summary > .nav-icon {
        transition: none;
        animation: none;
    }

}

/* ===== main/css/food_page.css ===== */
/* =========================================================
   FOOD PAGE (discover/food_page.html)
   Rubrik, chips (kategori + pris), verktygsrad och sortering kommer
   från explore.css (.explore-hero, .home-chip, .list-toolbar) — samma
   som Restauranger. Korten är samma som på Upptäck (food_cards.css,
   .list-grid: rutnät på dator, kompakta rader på mobilen). Här: tomläget.
========================================================= */

.food-empty {
    padding: 70px 20px;

    text-align: center;

    background: var(--pure-white);

    border: 1px dashed var(--border-strong);
    border-radius: 16px;
}

.food-empty-icon {
    margin-bottom: 12px;

    font-size: 40px;
}

.food-empty h2 {
    margin: 0 0 6px;

    color: var(--dark-text);

    font-size: 18px;
}

.food-empty p {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;
}

/* ===== main/css/restaurant_page.css ===== */
/* =========================================================
   RESTAURANTS PAGE (discover/restaurants_page.html)
   Rubrik, chips, verktygsrad och sortering kommer från explore.css
   (.explore-hero, .home-chip, .list-toolbar). Korten är samma som på
   Upptäck (food_cards.css, .list-grid). Här: filter, 📍 och tomläget.
========================================================= */

/* =========================================================
   PRISFILTER (chipsen under kategorierna, ?price=1,2)
   Vald nivå: ljus orange i stället för helorange, så
   guldpåsarna syns.
========================================================= */

.price-chips {
    margin-top: 8px;
}

.price-chip.is-selected {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
    box-shadow: inset 0 0 0 1px var(--hype-orange);
}

.price-filter-note {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}


/* =========================================================
   📍 NÄRMAST FÖRST (list_pages.js, main/nearby.py)
========================================================= */

/* "Hämtar din position…" / fel, under verktygsraden */
.list-sort-status {
    margin: -6px 0 14px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

.list-sort-status[hidden] {
    display: none;
}

/* ?sort=near utan position (delad länk, positionen glömd): en knapp i stället för en fråga */
.near-missing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 16px;

    background: rgba(59, 130, 246, .08);
    border: 1px solid rgba(59, 130, 246, .25);
}

.near-missing-icon {
    font-size: 22px;
}

.near-missing-text {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.near-missing-text strong {
    color: var(--dark-text);
    font-size: 15px;
}

.near-missing-text small {
    color: var(--text-muted);
    font-size: 13px;
}


/* =========================================================
   EMPTY
========================================================= */

.restaurants-empty {
    padding: 70px 20px;

    text-align: center;

    background: var(--pure-white);
    border: 1px dashed var(--border-strong);
    border-radius: 16px;
}

.restaurants-empty-icon {
    margin-bottom: 12px;
    font-size: 40px;
}

.restaurants-empty h2 {
    margin: 0 0 6px;
    color: var(--dark-text);
    font-size: 18px;
}

.restaurants-empty p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* ===== main/css/search.css ===== */
/* =====================================================
   SÖKFÄLTET I HEADERN (partials/header.html)
   Ikonen till vänster skickar formuläret, ✕ rensar,
   "/" är kortkommando (bara med tangentbord/mus).
===================================================== */

.search-bar {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    height: 46px;

    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--surface-2);

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.search-bar:hover {
    background: var(--surface-3);
}

.search-bar:focus-within {
    background: var(--pure-white);
    border-color: rgba(255, 111, 0, .45);
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .12), 0 8px 24px rgba(30, 42, 68, .08);
}

/* Fältet + tipsordet ovanpå (samma ruta) */
.search-bar-field {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
}

/* ✨ "Sök ”pizza”" → ”sushi” → … (header.html). Syns bara när fältet är tomt och
   inte har fokus — då döljs den vanliga platshållaren under. */
.search-bar-hint {
    position: absolute;
    inset: 0 8px 0 2px;

    display: none;
    align-items: center;
    gap: .28em;

    overflow: hidden;
    pointer-events: none;

    color: var(--text-faint);
    font-size: .95rem;
    white-space: nowrap;
}

.search-bar.has-hint:not(:focus-within):not(.has-value) .search-bar-hint {
    display: flex;
}

.search-bar.has-hint:not(:focus-within):not(.has-value) input::placeholder {
    color: transparent;
}

.search-bar-hint-word {
    display: inline-block;
    color: var(--text-2);
    font-weight: 600;
}

.search-bar-hint-word.is-new {
    animation: search-hint-in .45s cubic-bezier(.2, .8, .2, 1);
}

@keyframes search-hint-in {
    from {
        opacity: 0;
        transform: translateY(60%);
    }
}

.search-bar-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 42px;
    height: 100%;
    padding: 0 0 0 6px;

    border: 0;
    background: none;
    color: var(--text-faint);
    cursor: pointer;

    transition: color .2s ease;
}

.search-bar:focus-within .search-bar-submit,
.search-bar-submit:hover {
    color: var(--hype-orange);
}

.search-bar input {
    width: 100%;
    min-width: 0;   /* förhindrar att input tvingar ut bredden */
    height: 100%;
    padding: 0 8px 0 2px;

    border: 0;
    outline: 0;
    background: transparent;

    color: var(--dark-text);
    font: inherit;
    font-size: .95rem;
}

.search-bar input::placeholder {
    color: var(--text-faint);
}

/* Eget ✕ i stället för webbläsarens (ser olika ut överallt) */
.search-bar input::-webkit-search-cancel-button,
.sr-searchbox input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-bar-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 26px;
    height: 26px;
    margin-right: 9px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: rgb(var(--ink-rgb) / .08);
    color: var(--text-2);
    cursor: pointer;

    transition: background .2s ease;
}

.search-bar-clear:hover {
    background: rgb(var(--ink-rgb) / .14);
}

.search-bar-clear[hidden] {
    display: none;
}

.search-bar .search-bar-clear .nav-icon {
    width: 13px;
    height: 13px;
    stroke-width: 2.6;
}

.search-bar-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 22px;
    height: 22px;
    margin-right: 12px;

    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-radius: 6px;
    background: var(--pure-white);

    color: var(--text-faint);
    font: 700 12px/1 system-ui, sans-serif;
}

.search-bar:focus-within .search-bar-kbd,
.search-bar.has-value .search-bar-kbd {
    display: none;
}

@media (hover: none) {
    .search-bar-kbd {
        display: none;
    }
}

.search-bar-submit:focus-visible,
.search-bar-clear:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* =====================================================
   AUTOCOMPLETE (byggs av skriptet i partials/header.html)
===================================================== */

.autocomplete-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1000;

    display: none;

    max-height: min(72vh, 600px);
    margin: 0;
    padding: 6px 8px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;

    list-style: none;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(30, 42, 68, .18);

    animation: var(--header-pop);
    transform-origin: top center;
}

/* --- Gruppens rubrik: "Restauranger · Visa alla" --- */

.ac-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 10px 6px;

    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
}

.ac-heading:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid rgb(var(--ink-rgb) / .06);
    padding-top: 12px;
}

.ac-heading a,
.ac-heading button {
    padding: 0;
    border: 0;
    background: none;

    color: var(--hype-orange);
    font: inherit;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
}

.ac-heading a:hover,
.ac-heading button:hover {
    text-decoration: underline;
}

/* --- En rad --- */

.ac-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 10px;
    border-radius: 12px;

    color: var(--dark-text);
    text-decoration: none;
    cursor: pointer;
}

.ac-item:hover,
.ac-item.is-active {
    background: var(--orange-soft);
}

.ac-thumb {
    flex-shrink: 0;

    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;

    background: var(--surface-warm);
}

.ac-avatar {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    margin: 0 2px;
    border-radius: 50%;
    object-fit: cover;

    background: rgba(255, 111, 0, .12);
    color: var(--hype-orange);
    font-weight: 800;
}

/* Rund ikon för "senaste sökningar" och "visa alla resultat" */
.ac-icon {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    margin: 0 4px;
    border-radius: 50%;

    background: var(--surface-2);
    color: var(--text-muted);
}

.ac-icon .nav-icon {
    width: 17px;
    height: 17px;
}

.ac-text {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ac-title,
.ac-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.autocomplete-list mark {
    background: none;
    color: var(--hype-orange);
}

.ac-sub {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.ac-hype {
    flex-shrink: 0;

    padding: 3px 8px;
    border-radius: 999px;

    background: var(--soft-gray);
    color: var(--dark-text);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* "Visa alla resultat för …" längst ner */
.ac-item--all {
    margin-top: 4px;
}

.ac-item--all .ac-icon,
.ac-icon--suggest {
    background: rgba(255, 111, 0, .12);
    color: var(--hype-orange);
}

.ac-icon--suggest {
    font-size: 15px;
}

.ac-item--all .ac-title {
    color: var(--hype-orange);
}

.ac-empty {
    padding: 14px 12px 6px;

    color: var(--text-muted);
    font-size: 14px;
}


/* --- Startpanelen: chips (senaste sökningar, kategorier) --- */

.ac-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding: 2px 8px 8px;
}

.ac-item.ac-chip {
    gap: 6px;

    padding: 7px 13px;
    border-radius: 999px;

    background: var(--surface-2);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;

    transition: background .15s ease, color .15s ease;
}

.ac-item.ac-chip:hover,
.ac-item.ac-chip.is-active {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.ac-chip .nav-icon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--text-faint);
}

.ac-chip-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Senaste sökning: chipet + ✕ i samma pille */
.ac-chip-wrap {
    display: inline-flex;
    align-items: center;

    border-radius: 999px;
    background: var(--surface-2);
}

.ac-chip-wrap .ac-chip {
    padding-right: 4px;
    background: none;
}

.ac-chip-wrap:has(.is-active, .ac-chip:hover) {
    background: var(--orange-soft);
}

.ac-remove {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;
    margin-right: 4px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
}

.ac-remove:hover {
    background: rgb(var(--ink-rgb) / .08);
    color: var(--dark-text);
}

.ac-remove .nav-icon {
    width: 13px;
    height: 13px;
    stroke-width: 2.4;
}


/* --- 🔥 Hajpat just nu: placeringen framför bilden --- */

.ac-rank {
    flex: none;
    width: 18px;

    color: var(--hype-orange);
    font-size: 17px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* 1–3 orange, resten gråa */
.ac-item--top:not(.is-podium) .ac-rank {
    color: var(--text-faint);
}


/* --- ↑ ↓ ↵ Esc längst ner (bara med tangentbord och mus) --- */

.ac-keys {
    display: flex;
    justify-content: flex-end;
    gap: 14px;

    margin-top: 6px;
    padding: 10px 10px 2px;
    border-top: 1px solid rgb(var(--ink-rgb) / .06);

    color: var(--text-faint);
    font-size: 12px;
    font-weight: 600;
}

.ac-keys span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ac-keys kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;
    padding: 0 5px;

    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--pure-white);

    color: var(--text-muted);
    font: 700 11px/1 system-ui, sans-serif;
}

@media (hover: none), (max-width: 768px) {
    .ac-keys {
        display: none;
    }
}


/* =====================================================
   SÖKRESULTAT (search_results.html)
   Sektionerna återanvänder .home-rail och .rail-card från
   home_rails.css så att korten ser ut som på startsidan.
===================================================== */

.search-results-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    box-sizing: border-box;
}


/* ---------- Huvud: "Sökresultat / ”pizza” / 12 träffar · 📍 Nacka först" ---------- */

.sr-head {
    margin-bottom: 18px;
}

/* Sökrutan på sidan — bara på mobil, se nedan */
.sr-searchbox {
    display: none;
}

.sr-kicker {
    margin: 0 0 2px;

    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sr-title {
    margin: 0;

    color: var(--dark-text);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.sr-query {
    color: var(--hype-orange);
}

.sr-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;

    margin: 6px 0 0;

    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 600;
}

/* 📍 Byt område — öppnar headerns platsruta */
.sr-area {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 3px 10px 3px 7px;
    border: 0;
    border-radius: 999px;
    background: var(--orange-soft);

    color: var(--orange-text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease;
}

.sr-area:hover {
    background: var(--orange-soft-2);
}

.sr-area .nav-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.3;
}

.sr-area:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- Typflikar: segmenterad kontroll med antal (som Alla/Följer i flödet) ---------- */

.sr-tabs {
    display: flex;
    gap: 4px;
    width: max-content;
    max-width: 100%;

    margin-bottom: 18px;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-2);

    overflow-x: auto;
    scrollbar-width: none;
}

.sr-tabs::-webkit-scrollbar {
    display: none;
}

.sr-tab {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 14px;
    border-radius: 999px;

    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;

    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sr-tab .nav-icon {
    width: 18px;
    height: 18px;
}

.sr-tab:hover {
    color: var(--dark-text);
}

.sr-tab.is-active {
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 1px 4px rgba(30, 42, 68, .12);
}

.sr-tab.is-active .nav-icon {
    color: var(--hype-orange);
}

.sr-tab.is-active .nav-icon .f {
    fill: currentColor;
    fill-opacity: .2;
}

.sr-tab-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;

    background: rgb(var(--ink-rgb) / .07);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.sr-tab.is-active .sr-tab-count {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.sr-tab:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: -3px;
}


/* ---------- Kategorichips (.home-chip från home_rails.css) ---------- */

.sr-chips {
    margin-bottom: 18px;
}

.search-results-page .home-chip.is-active,
.search-results-page .home-chip.is-active:hover {
    background: var(--dark-text);
    border-color: var(--dark-text);
    color: var(--pure-white);
}


/* ---------- Sektioner ---------- */

.search-results-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sr-section .home-rail-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-count {
    padding: 2px 8px;
    border-radius: 999px;

    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

/* Rutnät (en typflik) och listorna har luft på båda sidor —
   raderna i "Alla" går ut i kanten för att visa att de kan svepas */
.search-results-content.is-grid .sr-section,
.sr-section--list {
    padding-right: 16px;
}

.search-results-content.is-grid .home-rail-head,
.sr-section--list .home-rail-head {
    padding-right: 0;
}

.sr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 18px 14px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.sr-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.sr-grid > li {
    min-width: 0;
}

.sr-grid .rail-card {
    width: auto;
}


/* ---------- ⭐ Toppträffen (partials/search_top_hit.html) ---------- */

.sr-top {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 20px;
    align-items: center;

    padding: 14px;
    border-radius: 22px;

    background:
        radial-gradient(120% 90% at 100% 0%, rgb(var(--orange-soft-rgb) / 1) 0%, transparent 60%),
        var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow: 0 10px 30px rgba(30, 42, 68, .07);

    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.sr-top:hover {
    border-color: rgba(255, 111, 0, .35);
    box-shadow: 0 16px 40px rgba(30, 42, 68, .11);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .sr-top:hover {
        transform: none;
    }
}

.sr-top-media {
    position: relative;

    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;

    background: var(--surface-warm);
}

.sr-top-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .5s ease;
}

.sr-top:hover .sr-top-media img {
    transform: scale(1.04);
}

/* Kategori: upp till fyra rätter i en mosaik, annars den stora emojin */
.sr-top-mosaic {
    display: grid;
    gap: 3px;
}

.sr-top-mosaic--2 { grid-template-columns: 1fr 1fr; }
.sr-top-mosaic--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sr-top-mosaic--3 img:first-child { grid-row: span 2; }
.sr-top-mosaic--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.sr-top-mosaic img {
    min-height: 0;
}

.sr-top-emoji {
    display: grid;
    place-items: center;
    height: 100%;

    background: var(--orange-soft);
    font-size: 4.2rem;
}

.sr-top-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 4px 8px 4px 0;
}

.sr-top-kicker {
    color: var(--orange-text);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

.sr-top-title {
    margin: 0;

    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.sr-top-link {
    color: var(--dark-text);
    text-decoration: none;
}

/* Hela kortet är länken (rätterna nedan ligger ovanpå) */
.sr-top-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.sr-top-link:focus-visible {
    outline: none;
}

.sr-top:has(.sr-top-link:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}

.sr-top-meta {
    margin: 0;

    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* Restaurangens populäraste rätter — egna länkar ovanpå kortets länk */
.sr-top-dishes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;

    width: 100%;
    margin: 6px 0 2px;
    padding: 0;
    list-style: none;
}

.sr-top-dish {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px;
    border-radius: 14px;

    background: rgb(var(--surface-rgb) / .8);
    border: 1px solid rgb(var(--ink-rgb) / .08);

    color: var(--dark-text);
    text-decoration: none;

    transition: border-color .15s ease, background .15s ease;
}

.sr-top-dish:hover {
    border-color: rgba(255, 111, 0, .45);
    background: var(--orange-soft);
}

.sr-top-dish:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.sr-top-dish img {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-warm);
}

.sr-top-dish span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sr-top-dish strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-top-dish small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.sr-top-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin-top: 4px;
    padding: 9px 14px 9px 16px;
    border-radius: 999px;

    background: var(--hype-orange);
    box-shadow: 0 6px 16px rgba(255, 111, 0, .25);

    color: #fff;
    font-size: 14px;
    font-weight: 800;

    transition: transform .2s ease;
}

.sr-top:hover .sr-top-cta {
    transform: translateX(2px);
}

.sr-top-cta .nav-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.6;
}

/* 🌱 Kost/egenskap (main/search.py → tag_hit): två riktiga länkar ovanpå kortlänken */
.sr-top-tag-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sr-top-tag-links .sr-top-cta {
    position: relative;
    z-index: 2;
    text-decoration: none;
}

.sr-top-cta--soft {
    background: var(--orange-soft);
    box-shadow: none;
    color: var(--orange-text);
}


/* ---------- Användare (raderna kommer från .follow-row i feed.css) ---------- */

.sr-section--list .home-rail-head {
    margin-bottom: 4px;
}

.search-user-list {
    margin: 0;
    padding: 0;
}


/* ---------- ✦ Saknas något? → Föreslå (partials/search_suggest.html) ---------- */

.sr-suggest {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px dashed rgb(var(--ink-rgb) / .18);
}

.sr-suggest-icon {
    flex: none;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    border-radius: 12px;

    background: var(--orange-soft);
    color: var(--hype-orange);
    font-size: 18px;
}

.sr-suggest-text {
    flex: 1;
    min-width: 0;
    margin: 0;

    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.4;
}

.sr-suggest-text strong {
    display: block;
    color: var(--dark-text);
    font-size: 15px;
}

.sr-suggest-btn {
    flex: none;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    max-width: 260px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;

    background: var(--dark-text);
    color: var(--pure-white);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;

    transition: transform .15s ease, background .15s ease;
}

.sr-suggest-btn:hover {
    background: var(--hype-orange);
    transform: translateY(-1px);
}

.sr-suggest-btn:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.sr-suggest-btn .nav-icon {
    flex: none;
    width: 17px;
    height: 17px;
    stroke-width: 2.4;
}

/* Inga träffar: mitt i tomma rutan, utan egen ram */
.sr-suggest--prominent {
    flex-direction: column;
    gap: 10px;

    width: min(100%, 420px);
    margin-top: 20px;
    padding: 18px;

    background: var(--orange-soft);
    border: 0;
    text-align: center;
}

.sr-suggest--prominent .sr-suggest-icon {
    display: none;
}

.sr-suggest--prominent .sr-suggest-btn {
    background: var(--hype-orange);
    box-shadow: 0 6px 16px rgba(255, 111, 0, .25);
}


/* ---------- Tomt läge ---------- */

.sr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 48px 24px;

    text-align: center;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.sr-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 50%;

    background: var(--orange-soft);
    font-size: 1.8rem;
}

.sr-empty h2 {
    margin: 0 0 6px;

    color: var(--dark-text);
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.sr-empty p {
    max-width: 42ch;
    margin: 0;

    color: var(--text-muted);
    line-height: 1.5;
}

/* 🔤 Menade du …? */
.sr-empty .sr-dym {
    color: var(--dark-text);
    font-size: 1.02rem;
    font-weight: 600;
}

.sr-dym-link {
    color: var(--hype-orange);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.sr-dym-link:hover {
    color: var(--orange-text);
}

/* Chipsen radbryts och centreras här i stället för att svepas */
.search-results-page .sr-empty-chips {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;

    margin: 22px 0 0;
}

.sr-empty-link {
    margin-top: 14px;

    color: var(--hype-orange);
    font-weight: 700;
}

.search-login-btn {
    display: inline-flex;
    margin-top: 18px;
}


/* ---------- Utan sökord: senaste sökningar + 🔥 Hajpat just nu ---------- */

.sr-start {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sr-recent {
    width: 100%;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgb(var(--ink-rgb) / .08);
}

.sr-recent h3 {
    margin: 0;

    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.search-results-page .sr-recent .sr-empty-chips {
    margin-top: 12px;
}

.sr-scope {
    color: var(--text-muted);
    font-weight: 700;
}

.sr-trend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 4px 16px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.sr-trend {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 10px 8px 4px;
    border-radius: 14px;

    color: var(--dark-text);
    text-decoration: none;

    transition: background .15s ease;
}

.sr-trend:hover {
    background: var(--orange-soft);
}

.sr-trend:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 1px;
}

.sr-trend-rank {
    flex: none;
    width: 26px;

    color: var(--text-faint);
    font-size: 22px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.sr-trend.is-podium .sr-trend-rank {
    color: var(--hype-orange);
}

.sr-trend img {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-warm);
}

.sr-trend-text {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.sr-trend-text strong,
.sr-trend-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-trend-text strong {
    font-size: 15px;
    font-weight: 800;
}

.sr-trend-text small {
    color: var(--text-muted);
    font-size: 13px;
}

.sr-trend-hype {
    flex: none;

    padding: 3px 9px;
    border-radius: 999px;

    background: var(--soft-gray);
    font-size: 12px;
    font-weight: 800;
}


/* =====================================================
   MOBIL (samma brytpunkt som headern byter till sökikon)
===================================================== */

@media (max-width: 768px) {

    .search-results-page {
        padding: 14px 16px 40px;
    }

    .sr-head {
        margin-bottom: 10px;
    }

    .sr-searchbox {
        display: flex;
        align-items: center;
        gap: 8px;

        height: 46px;
        padding: 0 16px;

        border-radius: 999px;
        border: 1px solid rgb(var(--ink-rgb) / .1);
        background: var(--pure-white);
        box-shadow: 0 2px 10px rgba(30, 42, 68, .05);

        transition: border-color .2s ease, box-shadow .2s ease;
    }

    .sr-searchbox:focus-within {
        border-color: rgba(255, 111, 0, .45);
        box-shadow: 0 0 0 4px rgba(255, 111, 0, .12);
    }

    .sr-searchbox .nav-icon {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        color: var(--text-faint);
    }

    .sr-searchbox input {
        flex: 1;
        min-width: 0;

        border: 0;
        outline: 0;
        background: transparent;

        color: var(--dark-text);
        font: inherit;
        font-size: 16px;   /* under 16px zoomar iOS in vid fokus */
    }

    /* Sökordet står redan i rutan — rubriken finns kvar för skärmläsare.
       Antalet och 📍-knappen syns under rutan. */
    .sr-kicker,
    .sr-title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sr-sub {
        margin-top: 10px;
        padding: 0 4px;
        font-size: .86rem;
    }

    /* Flikarna går kant i kant och kan svepas */
    .sr-tabs {
        width: auto;
        max-width: none;
        margin: 0 -16px 14px;
        padding: 4px;
        border-radius: 0;
        background: none;
        padding-left: 16px;
        padding-right: 16px;
    }

    .sr-tab {
        padding: 8px 13px;
        background: var(--surface-2);
    }

    .sr-tab.is-active {
        background: var(--dark-text);
        color: var(--pure-white);
        box-shadow: none;
    }

    .sr-tab.is-active .nav-icon {
        color: inherit;
    }

    .sr-tab.is-active .sr-tab-count {
        background: rgb(var(--surface-rgb) / .2);
        color: inherit;
    }

    .sr-chips {
        margin-bottom: 14px;
    }

    .search-results-content {
        gap: 14px;
    }

    .sr-grid,
    .sr-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }

    .sr-empty {
        padding: 36px 18px;
    }

    /* Toppträffen staplas: bild överst, texten under */
    .sr-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 10px;
        border-radius: 20px;
    }

    .sr-top-media {
        aspect-ratio: 16 / 9;
    }

    .sr-top-body {
        padding: 0 6px 6px;
    }

    /* Rätterna blir en rad att svepa i stället för tre rader på höjden */
    .sr-top-dishes {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(170px, 72%);
        gap: 8px;

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .sr-top-dishes::-webkit-scrollbar {
        display: none;
    }

    .sr-top-dishes > li {
        scroll-snap-align: start;
    }

    .sr-suggest {
        flex-wrap: wrap;
    }

    .sr-suggest:not(.sr-suggest--prominent) .sr-suggest-btn {
        width: 100%;
        max-width: none;
        justify-content: center;
    }

    .sr-trend-list {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* ===== main/css/suggest.css ===== */
/* =========================================================
   ✦ FÖRESLÅ (main/templates/suggest/, main/javascript/suggest.js)
   Sök först, korta formulär, kategori-chips, 🏪 "Jag jobbar här",
   Dina förslag. Sökrutor och listor återanvänder skrivrutans
   (.composer-searchbox, .composer-results i community/css/feed.css).
   ========================================================= */

.sg-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 16px 72px;
}

.sg-page [hidden] {
    display: none !important;
}

/* ---------- 🎉 Tackrutan efter ett skickat förslag ---------- */

.sg-sent {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px 18px;

    border: 1px solid rgb(0 168 101 / .28);
    border-radius: 18px;
    background: linear-gradient(135deg, rgb(0 168 101 / .1), rgb(0 168 101 / .03));

    animation: sg-pop .35s cubic-bezier(.2, .9, .3, 1.2);
}

.sg-sent-icon {
    font-size: 30px;
    line-height: 1;
}

.sg-sent strong {
    display: block;
    color: var(--dark-text);
    font-size: 16px;
}

.sg-sent p {
    margin: 4px 0 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.5;
}

@keyframes sg-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* ---------- Rubriken ---------- */

.sg-hero {
    margin: 18px 0 20px;
    text-align: center;
}

.sg-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 12px;

    border-radius: 18px;
    background: linear-gradient(135deg, #ff8a3d, var(--hype-orange));
    box-shadow: 0 12px 26px -12px rgb(255 111 0 / .7);
    color: #fff;

    font-size: 26px;
}

.sg-hero h1 {
    margin: 0;
    color: var(--dark-text);
    font-size: clamp(26px, 6vw, 34px);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.sg-hero p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 15.5px;
}

/* ---------- Sökkortet ---------- */

.sg-card,
.sg-form,
.sg-mine {
    padding: 16px;
    border: 1px solid rgb(var(--ink-rgb) / .08);
    border-radius: 22px;
    background: var(--pure-white);
    box-shadow: 0 18px 40px -28px rgb(var(--ink-rgb) / .45);
}

.sg-searchbox .composer-search {
    min-height: 52px;
    font-size: 16.5px;
}

.sg-results {
    margin-top: 10px;
}

.sg-results-label {
    margin: 12px 4px 4px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sg-results-empty {
    margin: 12px 4px 0;
    color: var(--text-2);
    font-size: 14px;
}

/* En rad: bild, namn, rad under, 🔥, › (samma känsla som taggkortet) */
.sg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;

    border-radius: 14px;
    color: var(--dark-text);
    text-decoration: none;

    transition: background-color .12s ease;
}

a.sg-row:hover,
a.sg-row:focus-visible {
    outline: none;
    background: var(--orange-soft);
}

.sg-row-media {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: var(--surface-warm);
    font-size: 21px;
}

.sg-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sg-row-text strong,
.sg-row-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-row-text strong {
    font-size: 15px;
    font-weight: 700;
}

.sg-row-text small {
    color: var(--text-muted);
    font-size: 12.5px;
}

.sg-row mark {
    background: none;
    color: var(--orange-text);
}

.sg-row-hype {
    flex: 0 0 auto;
    color: var(--orange-text);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sg-row-go {
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: 22px;
    line-height: 1;
}

/* "Lägg till ”X” som restaurang / rätt" */
.sg-choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* långa namn kortas med … i stället för att trycka ut kortet */
    gap: 10px;
    margin-top: 14px;
}

.sg-choice {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;

    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 16px;
    background: var(--pure-white);
    color: var(--dark-text);
    text-decoration: none;

    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sg-choice:hover {
    border-color: rgb(255 111 0 / .4);
    box-shadow: 0 10px 24px -16px rgb(255 111 0 / .55);
    transform: translateY(-1px);
}

.sg-choice:active {
    transform: scale(.985);
}

.sg-choice.is-named {
    border-style: dashed;
    border-color: rgb(255 111 0 / .45);
    background: var(--orange-soft);
}

.sg-choice-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    background: var(--surface-2);
    font-size: 22px;
}

.sg-choice-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Två rader: "Lägg till ”Ett långt namn” som restaurang" ska synas hela vägen till "som …" */
.sg-choice-text strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sg-choice-text small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-choice.is-named .sg-choice-text small {
    color: var(--orange-text);
    font-weight: 700;
}

.sg-choice-go {
    color: var(--orange-text);
    font-size: 24px;
    line-height: 1;
}

/* ---------- Dina förslag ---------- */

.sg-mine {
    margin-top: 20px;
}

.sg-mine h2 {
    margin: 0 0 8px;
    color: var(--dark-text);
    font-size: 17px;
    font-weight: 800;
}

.sg-mine-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-mine-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
}

.sg-mine-item + .sg-mine-item {
    border-top: 1px solid var(--border);
}

.sg-mine-media {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: var(--surface-warm);
    font-size: 19px;
}

.sg-mine-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-mine-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sg-mine-text strong,
.sg-mine-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-mine-text strong {
    color: var(--dark-text);
    font-size: 14.5px;
}

.sg-mine-text small {
    color: var(--text-muted);
    font-size: 12.5px;
}

.sg-status {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

.sg-status.is-pending {
    background: var(--yellow-soft);
    color: var(--amber-text);
}

.sg-status.is-approved {
    background: rgb(0 168 101 / .12);
    color: var(--green-text);
}

a.sg-status.is-approved:hover {
    background: rgb(0 168 101 / .2);
}

.sg-status.is-declined {
    background: var(--surface-2);
    color: var(--text-muted);
}

.sg-note {
    display: flex;
    gap: 8px;
    margin: 18px 6px 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   FORMULÄREN
   ========================================================= */

.sg-back {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.sg-back:hover {
    color: var(--orange-text);
}

.sg-form-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.sg-form-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;
    background: var(--orange-soft);
    font-size: 26px;
}

.sg-form-head h1 {
    margin: 0;
    color: var(--dark-text);
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 900;
    letter-spacing: -.01em;
}

.sg-form-head p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 14.5px;
}

.sg-form,
.sg-more-body,
.sg-owner-fields {
    grid-template-columns: minmax(0, 1fr);   /* som .sg-choices: inget långt innehåll trycker ut formuläret */
}

.sg-form {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.sg-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sg-field > label,
.sg-field > legend {
    display: block;
    margin-bottom: 7px;
    padding: 0;
    color: var(--dark-text);
    font-size: 14.5px;
    font-weight: 800;
}

.sg-input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;

    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--dark-text);

    font: inherit;
    font-size: 16px;   /* ingen autozoom på iPhone */

    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

textarea.sg-input {
    resize: vertical;
    line-height: 1.45;
}

.sg-input:focus {
    outline: none;
    border-color: rgb(255 111 0 / .45);
    background: var(--pure-white);
    box-shadow: 0 0 0 3px rgb(255 111 0 / .14);
}

.sg-hint {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.sg-hint a {
    color: var(--orange-text);
    font-weight: 700;
}

.sg-new-location .sg-input {
    margin-bottom: 0;
}

/* 🔎 Finns det redan? */
.sg-exists {
    margin-top: 8px;
    padding: 4px 6px 6px;
    border: 1px solid rgb(255 111 0 / .25);
    border-radius: 14px;
    background: var(--orange-soft);
}

.sg-exists .sg-results-label {
    margin-top: 6px;
}

.sg-row-open,
.sg-exists-link {
    color: var(--orange-text);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}

.sg-exists-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13.5px;
}

.sg-row-claim {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-radius: 999px;
    background: var(--pure-white);
    color: var(--dark-text);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.sg-row-claim:hover {
    border-color: rgb(255 111 0 / .45);
    color: var(--orange-text);
}

/* 🏷️ Kategori-chips (suggest/_category_chips.html) */
.sg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sg-chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.sg-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sg-chip span,
button.sg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 13px;

    border: 1px solid rgb(var(--ink-rgb) / .12);
    border-radius: 999px;
    background: var(--pure-white);
    color: var(--dark-text);

    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;

    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.sg-chip:hover span,
button.sg-chip:hover {
    border-color: rgb(255 111 0 / .45);
}

.sg-chip input:checked + span {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
    color: var(--orange-text);
    box-shadow: inset 0 0 0 1px var(--hype-orange);
}

.sg-chip input:focus-visible + span {
    outline: 3px solid rgb(255 111 0 / .4);
    outline-offset: 2px;
}

button.sg-chip-more {
    border-style: dashed;
    color: var(--text-muted);
    cursor: pointer;
}

/* Resten syns efter "Fler…" — en vald bland resten syns alltid */
.sg-chips:not(.is-open) .sg-chip.is-extra:not(:has(input:checked)) {
    display: none;
}

.sg-chips.is-open .sg-chip-more {
    display: none;
}

/* 🏪 Jag äger, driver eller jobbar här */
.sg-owner {
    padding: 14px;
    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 16px;
    background: var(--surface-cream);
}

.sg-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.sg-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sg-toggle-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--surface-4);
    transition: background-color .18s ease;
}

.sg-toggle-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / .25);
    transition: transform .18s ease;
}

.sg-toggle input:checked + .sg-toggle-switch {
    background: var(--hype-orange);
}

.sg-toggle input:checked + .sg-toggle-switch::after {
    transform: translateX(18px);
}

.sg-toggle input:focus-visible + .sg-toggle-switch {
    outline: 3px solid rgb(255 111 0 / .4);
    outline-offset: 2px;
}

.sg-toggle-text {
    display: flex;
    flex-direction: column;
}

.sg-toggle-text strong {
    color: var(--dark-text);
    font-size: 15px;
}

.sg-toggle-text small {
    color: var(--text-muted);
    font-size: 13px;
}

.sg-owner-fields {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgb(var(--ink-rgb) / .08);
}

.sg-owner-fields .sg-input {
    background: var(--pure-white);
}

.sg-owner-info {
    display: flex;
    gap: 6px;
    margin: 0;
}

/* ➕ Fler detaljer */
.sg-more {
    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 16px;
}

.sg-more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;

    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.sg-more summary::-webkit-details-marker {
    display: none;
}

.sg-more summary small {
    color: var(--text-faint);
    font-weight: 600;
}

.sg-more summary > span {
    flex: 0 0 auto;
    white-space: nowrap;   /* "(valfritt)" på samma rad — tipset bredvid kortas i stället */
}

.sg-more-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-more[open] summary {
    border-bottom: 1px solid rgb(var(--ink-rgb) / .08);
}

.sg-more[open] .sg-more-hint {
    display: none;
}

.sg-more-body {
    display: grid;
    gap: 18px;
    padding: 14px;
}

/* Vald restaurang (rättförslaget) — skrivrutans kort med "Byt" */
.sg-picked {
    margin-bottom: 0;
}

/* 🏪 Genväg för den som sköter restaurangen */
.sg-owner-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 14px;

    border: 1px solid rgb(0 168 101 / .3);
    border-radius: 14px;
    background: rgb(0 168 101 / .07);
    font-size: 22px;
}

.sg-owner-shortcut p {
    flex: 1;
    margin: 0;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.45;
}

.sg-owner-shortcut strong {
    color: var(--dark-text);
}

.sg-owner-shortcut-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--green-engaging);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

/* Skicka */
.sg-submit {
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;

    border: 0;
    border-radius: 999px;
    background: var(--hype-orange);
    box-shadow: 0 14px 28px -16px rgb(255 111 0 / .8);
    color: #fff;

    font: inherit;
    font-size: 16.5px;
    font-weight: 900;
    cursor: pointer;

    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.sg-submit:hover {
    background: #f06400;
    box-shadow: 0 16px 30px -14px rgb(255 111 0 / .85);
}

.sg-submit:active {
    transform: scale(.985);
}

.sg-submit-hint {
    margin-top: -8px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .sg-sent {
        animation: none;
    }

    .sg-choice,
    .sg-submit,
    .sg-toggle-switch,
    .sg-toggle-switch::after {
        transition: none;
    }
}

@media (max-width: 520px) {
    .sg-page {
        padding: 14px 12px 64px;
    }

    .sg-card,
    .sg-form,
    .sg-mine {
        padding: 14px;
        border-radius: 18px;
    }

    .sg-hero {
        margin-top: 8px;
    }

    .sg-row-claim {
        padding: 5px 8px;
    }
}


/* =========================
   FÖRSLAG: FEL + LOGIN (suggest/_field_errors.html, _login_cta.html)
   Används också av ägarpanelens formulär (owners/templates).
   ========================= */
.suggest-field-error {
    margin: 6px 0 0;
    color: var(--red-text);
    font-size: 13px;
    font-weight: 600;
}

.suggest-form-error {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--red-soft);
    border-left: 4px solid #c62828;
    color: var(--red-text);
    font-weight: 600;
}

.suggest-login-cta {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,111,0,0.06);
    border: 1px solid rgba(255,111,0,0.2);
    text-align: center;
}

.suggest-login-cta p {
    margin: 0 0 14px;
    color: var(--text-2);
}

.suggest-login-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.suggest-login-btn,
.suggest-signup-btn {
    padding: 11px 24px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
}

.suggest-login-btn {
    background: var(--hype-orange);
    color: white;
}

.suggest-signup-btn {
    background: var(--pure-white);
    color: var(--hype-orange);
    border: 1px solid rgba(255,111,0,0.35);
}


/* =========================
   LÄNKKNAPPAR (förslag + ägarpanelen)
   ========================= */

/* hidden-attributet måste vinna över klassernas display-regler */
.suggest-restaruant-form [hidden] {
    display: none !important;
}

.suggest-location-help {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.suggest-link-btn {
    padding: 0;
    border: none;
    background: none;
    color: var(--hype-orange);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.suggest-link-btn:hover {
    text-decoration: underline;
}

.suggest-food-restaurant-empty .suggest-link-btn {
    display: block;
    margin-top: 6px;
}

.suggest-food-restaurant-empty a.suggest-link-btn {
    display: block;
    margin-top: 6px;
    text-decoration: none;
}

/* ===== main/css/suggest_restaurant.css ===== */
/* =========================================================
   SUGGEST RESTAURANT
   ========================================================= */

.suggest-restaruant-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}


/* =========================================================
   HEADER
   ========================================================= */

.suggest-restaruant-header {
    text-align: center;
    margin-bottom: 32px;
}


.suggest-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 28px;

    color: var(--dark-text);
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: color 0.2s ease;
}


.suggest-back:hover {
    color: var(--hype-orange);
}


.suggest-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--marinblue-accent);

    border: 1px solid rgb(var(--ink-rgb) / 0.12);

    border-radius: 20px;

    font-size: 30px;
}


.suggest-restaruant-header h1 {
    margin: 0 0 10px;

    color: var(--dark-text);

    font-size: 30px;
    font-weight: 800;

    letter-spacing: -0.5px;
}


.suggest-restaruant-header p {
    max-width: 520px;

    margin: 0 auto;

    color: var(--dark-text);

    font-size: 15px;
    line-height: 1.6;

    opacity: 0.7;
}


/* =========================================================
   CARD
   ========================================================= */

.suggest-restaruant-card {
    background: var(--pure-white);

    border: 1px solid rgb(var(--ink-rgb) / 0.10);

    border-radius: 22px;

    padding: 30px;

    box-shadow: 0 12px 35px rgba(30, 42, 68, 0.08);
}


/* =========================================================
   FORM
   ========================================================= */

.suggest-restaruant-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.form-group label {
    color: var(--dark-text);

    font-size: 14px;
    font-weight: 700;
}


.optional {
    color: var(--dark-text);

    font-size: 12px;
    font-weight: 500;

    opacity: 0.55;
}


/* =========================================================
   PRISNIVÅ (radioknappar som piller med guldpåsar)
   ========================================================= */

.suggest-price {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.suggest-price legend {
    margin-bottom: 8px;
    padding: 0;

    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
}

.suggest-price-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.form-group .suggest-price-option {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 38px;
    box-sizing: border-box;
    padding: 0 13px;
    line-height: 1;
    border-radius: 999px;

    background: var(--soft-gray);
    border: 1px solid rgb(var(--ink-rgb) / 0.12);

    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.suggest-price-option small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

/* Själva rundknappen döljs; hela pillret är klickytan
   (.form-group input ger annars 100% bredd + padding) */
.form-group .suggest-price-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.suggest-price-option:hover {
    border-color: rgba(255, 111, 0, 0.45);
}

.suggest-price-option:has(input:checked) {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
    box-shadow: inset 0 0 0 1px var(--hype-orange);
}

.suggest-price-option:has(input:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* =========================================================
   INPUTS
   ========================================================= */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 13px 15px;

    background: var(--soft-gray);

    border: 1px solid rgb(var(--ink-rgb) / 0.12);

    border-radius: 12px;

    color: var(--dark-text);

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--dark-text);
    opacity: 0.45;
}


.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: rgb(var(--ink-rgb) / 0.25);
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--hype-orange);

    background: var(--pure-white);

    box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.12);
}


.form-group textarea {
    resize: vertical;

    min-height: 110px;

    line-height: 1.5;
}


.form-group select {
    cursor: pointer;
}


/* =========================================================
   IMAGE UPLOAD
   ========================================================= */

.suggest-restaruant-upload {
    position: relative;

    padding: 18px;

    background: var(--soft-gray);

    border: 1px dashed rgb(var(--ink-rgb) / 0.20);

    border-radius: 14px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.suggest-restaruant-upload:hover {
    border-color: var(--hype-orange);

    background: var(--pure-white);
}


.suggest-restaruant-upload input[type="file"] {
    width: 100%;

    color: var(--dark-text);

    font-family: inherit;
    font-size: 13px;

    cursor: pointer;
}


.suggest-restaruant-upload input[type="file"]::file-selector-button {
    margin-right: 12px;

    padding: 9px 14px;

    border: none;
    border-radius: 9px;

    background: var(--hype-orange);

    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: opacity 0.2s ease;
}


.suggest-restaruant-upload input[type="file"]::file-selector-button:hover {
    opacity: 0.9;
}


.suggest-restaruant-upload-info {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 12px;
}


.suggest-restaruant-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    background: var(--marinblue-accent);

    border-radius: 10px;

    font-size: 17px;
}


.suggest-restaruant-upload-info strong {
    display: block;

    color: var(--dark-text);

    font-size: 12px;
}


.suggest-restaruant-upload-info p {
    margin: 2px 0 0;

    color: var(--dark-text);

    font-size: 11px;

    opacity: 0.55;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.suggest-restaruant-submit {
    width: 100%;

    margin-top: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 14px 20px;

    border: none;
    border-radius: 12px;

    background: var(--hype-orange);

    color: #fff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease,
        box-shadow 0.15s ease;
}


.suggest-restaruant-submit:hover {
    opacity: 0.92;

    transform: translateY(-1px);

    box-shadow: 0 7px 20px rgba(255, 111, 0, 0.22);
}


.suggest-restaruant-submit:active {
    transform: translateY(0);
}


/* =========================================================
   INFO NOTE
   ========================================================= */

.suggest-restaruant-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 20px;

    padding: 17px 18px;

    background: var(--marinblue-accent);

    border: 1px solid rgb(var(--ink-rgb) / 0.10);

    border-radius: 15px;
}


.suggest-restaruant-note > span {
    flex-shrink: 0;

    font-size: 19px;
}


.suggest-restaruant-note strong {
    display: block;

    margin-bottom: 4px;

    color: var(--dark-text);

    font-size: 13px;
}


.suggest-restaruant-note p {
    margin: 0;

    color: var(--dark-text);

    font-size: 13px;
    line-height: 1.5;

    opacity: 0.7;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .suggest-restaruant-page {
        padding: 25px 16px 60px;
    }


    .suggest-restaruant-header {
        margin-bottom: 25px;
    }


    .suggest-back {
        margin-bottom: 22px;
    }


    .suggest-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 15px;

        border-radius: 18px;

        font-size: 27px;
    }


    .suggest-restaruant-header h1 {
        font-size: 25px;
    }


    .suggest-restaruant-header p {
        font-size: 14px;
    }


    .suggest-restaruant-card {
        padding: 21px 18px;

        border-radius: 18px;
    }


    .suggest-restaruant-form {
        gap: 19px;
    }


    .suggest-restaruant-submit {
        padding: 14px 16px;
    }


    .suggest-restaruant-note {
        padding: 15px;
    }
}

/* ===== main/css/suggest_food.css ===== */
/* =========================================================
   SUGGEST FOOD
   ========================================================= */

.suggest-food-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}


/* =========================================================
   HEADER
   ========================================================= */

.suggest-food-header {
    text-align: center;
    margin-bottom: 32px;
}


.suggest-food-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 28px;

    color: var(--dark-text);
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: color 0.2s ease;
}


.suggest-food-back:hover {
    color: var(--hype-orange);
}


.suggest-food-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--marinblue-accent);

    border: 1px solid rgb(var(--ink-rgb) / 0.12);

    border-radius: 20px;

    font-size: 30px;
}


.suggest-food-header h1 {
    margin: 0 0 10px;

    color: var(--dark-text);

    font-size: 30px;
    font-weight: 800;

    letter-spacing: -0.5px;
}


.suggest-food-header p {
    max-width: 520px;

    margin: 0 auto;

    color: var(--dark-text);

    font-size: 15px;
    line-height: 1.6;

    opacity: 0.7;
}


/* =========================================================
   CARD
   ========================================================= */

.suggest-food-card {
    background: var(--pure-white);

    border: 1px solid rgb(var(--ink-rgb) / 0.10);

    border-radius: 22px;

    padding: 30px;

    box-shadow: 0 12px 35px rgba(30, 42, 68, 0.08);
}


/* =========================================================
   FORM
   ========================================================= */

.suggest-food-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


.suggest-food-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.suggest-food-form-group label {
    color: var(--dark-text);

    font-size: 14px;
    font-weight: 700;
}


.suggest-food-optional {
    color: var(--dark-text);

    font-size: 12px;
    font-weight: 500;

    opacity: 0.55;
}


/* =========================================================
   INPUTS
   ========================================================= */

.suggest-food-form-group input,
.suggest-food-form-group select,
.suggest-food-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    background: var(--soft-gray);

    border: 1px solid rgb(var(--ink-rgb) / 0.12);

    border-radius: 12px;

    color: var(--dark-text);

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.suggest-food-form-group input::placeholder,
.suggest-food-form-group textarea::placeholder {
    color: var(--dark-text);

    opacity: 0.45;
}


.suggest-food-form-group input:hover,
.suggest-food-form-group select:hover,
.suggest-food-form-group textarea:hover {
    border-color: rgb(var(--ink-rgb) / 0.25);
}


.suggest-food-form-group input:focus,
.suggest-food-form-group select:focus,
.suggest-food-form-group textarea:focus {
    border-color: var(--hype-orange);

    background: var(--pure-white);

    box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.12);
}


.suggest-food-form-group textarea {
    resize: vertical;

    min-height: 110px;

    line-height: 1.5;
}


.suggest-food-form-group select {
    cursor: pointer;
}


/* Pris: [ 129 kr ] – [ 159 kr ] */

.suggest-food-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.suggest-food-price-field {
    position: relative;
}

.suggest-food-form-group .suggest-food-price-field input {
    padding-right: 38px;   /* plats för "kr" */
    -moz-appearance: textfield;
}

.suggest-food-price-field input::-webkit-outer-spin-button,
.suggest-food-price-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.suggest-food-price-field > span {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.suggest-food-price-dash {
    color: var(--text-faint);
    font-weight: 700;
}


/* =========================================================
   IMAGE UPLOAD
   ========================================================= */

.suggest-food-upload {
    position: relative;

    padding: 18px;

    background: var(--soft-gray);

    border: 1px dashed rgb(var(--ink-rgb) / 0.20);

    border-radius: 14px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.suggest-food-upload:hover {
    border-color: var(--hype-orange);

    background: var(--pure-white);
}


.suggest-food-upload input[type="file"] {
    width: 100%;

    color: var(--dark-text);

    font-family: inherit;
    font-size: 13px;

    cursor: pointer;
}


.suggest-food-upload input[type="file"]::file-selector-button {
    margin-right: 12px;

    padding: 9px 14px;

    border: none;
    border-radius: 9px;

    background: var(--hype-orange);

    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: opacity 0.2s ease;
}


.suggest-food-upload input[type="file"]::file-selector-button:hover {
    opacity: 0.9;
}


.suggest-food-upload-info {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: 12px;
}


.suggest-food-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    background: var(--marinblue-accent);

    border-radius: 10px;

    font-size: 17px;
}


.suggest-food-upload-info strong {
    display: block;

    color: var(--dark-text);

    font-size: 12px;
}


.suggest-food-upload-info p {
    margin: 2px 0 0;

    color: var(--dark-text);

    font-size: 11px;

    opacity: 0.55;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.suggest-food-submit {
    width: 100%;

    margin-top: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 14px 20px;

    border: none;
    border-radius: 12px;

    background: var(--hype-orange);

    color: #fff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease,
        box-shadow 0.15s ease;
}


.suggest-food-submit:hover {
    opacity: 0.92;

    transform: translateY(-1px);

    box-shadow: 0 7px 20px rgba(255, 111, 0, 0.22);
}


.suggest-food-submit:active {
    transform: translateY(0);
}


/* =========================================================
   INFO NOTE
   ========================================================= */

.suggest-food-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 20px;

    padding: 17px 18px;

    background: var(--marinblue-accent);

    border: 1px solid rgb(var(--ink-rgb) / 0.10);

    border-radius: 15px;
}


.suggest-food-note > span {
    flex-shrink: 0;

    font-size: 19px;
}


.suggest-food-note strong {
    display: block;

    margin-bottom: 4px;

    color: var(--dark-text);

    font-size: 13px;
}


.suggest-food-note p {
    margin: 0;

    color: var(--dark-text);

    font-size: 13px;
    line-height: 1.5;

    opacity: 0.7;
}


/* =========================================================
   RESTAURANT AUTOCOMPLETE
========================================================= */

.suggest-food-restaurant-search {
    position: relative;
}


.suggest-food-restaurant-results {
    position: absolute;

    top: calc(100% + 8px);

    left: 0;
    right: 0;

    margin: 0;

    padding: 8px 0;

    list-style: none;

    background: var(--pure-white);

    border-radius: 18px;

    border: 1px solid rgb(var(--shade-rgb) / 0.06);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.12);

    overflow: hidden;

    z-index: 1000;

    display: none;
}


.suggest-food-restaurant-results.active {
    display: block;
}


/* =========================================================
   RESTAURANT RESULT
========================================================= */

.suggest-food-restaurant-result {
    margin: 0;

    padding: 0;
}


.suggest-food-restaurant-main {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    cursor: pointer;

    transition:
        background 0.15s ease;
}


.suggest-food-restaurant-main:hover {
    background:
        rgb(var(--shade-rgb) / 0.04);
}


/* =========================================================
   IMAGE
========================================================= */

.suggest-food-restaurant-image {
    width: 48px;

    height: 48px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 10px;

    background: var(--soft-gray);
}


.suggest-food-restaurant-placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;
}


/* =========================================================
   TEXT
========================================================= */

.suggest-food-restaurant-text {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.suggest-food-restaurant-text strong {
    color: var(--dark-text);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.suggest-food-restaurant-text small {
    margin-top: 2px;

    color: var(--text-faint);

    font-size: 11px;

    line-height: 1.3;
}


.suggest-food-restaurant-text
.suggest-food-restaurant-hype {
    color: var(--hype-orange);

    font-weight: 700;
}


/* =========================================================
   EMPTY
========================================================= */

.suggest-food-restaurant-empty {
    padding: 14px 16px;

    color: var(--text-faint);

    font-size: 13px;
}


/* =========================================================
   HELP TEXT
========================================================= */

.suggest-food-restaurant-help {
    display: block;

    margin-top: 7px;

    color: var(--dark-text);

    font-size: 11px;

    opacity: 0.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .suggest-food-page {
        padding: 25px 16px 60px;
    }


    .suggest-food-header {
        margin-bottom: 25px;
    }


    .suggest-food-back {
        margin-bottom: 22px;
    }


    .suggest-food-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 15px;

        border-radius: 18px;

        font-size: 27px;
    }


    .suggest-food-header h1 {
        font-size: 25px;
    }


    .suggest-food-header p {
        font-size: 14px;
    }


    .suggest-food-card {
        padding: 21px 18px;

        border-radius: 18px;
    }


    .suggest-food-form {
        gap: 19px;
    }


    .suggest-food-submit {
        padding: 14px 16px;
    }


    .suggest-food-note {
        padding: 15px;
    }

}

/* ===== main/css/image_cropper.css ===== */
/* =====================================================
   ✂️ BESKÄR BILDEN (main/javascript/image_cropper.js)
   Rutan som öppnas när man valt en bild i ett fält med data-crop.
   ===================================================== */

html.crop-open {
    overflow: hidden;
}

.crop-modal {
    position: fixed;
    inset: 0;
    z-index: 100010;   /* över kommentarsrutan (100001) och bottenmenyn */

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
    background: rgb(0 0 0 / .6);
}

.crop-modal[hidden] {
    display: none;
}

.crop-sheet {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;

    background: var(--pure-white);
    color: var(--dark-text);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgb(0 0 0 / .35);
}


/* ---------- Rubrik ---------- */

.crop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 16px 12px 20px;
}

.crop-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.crop-close {
    flex-shrink: 0;

    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;

    background: var(--surface-2);
    color: var(--dark-text);
    font-size: 15px;
    cursor: pointer;
}

.crop-close:hover {
    background: var(--surface-3);
}


/* ---------- Bilden och ramen ---------- */

.crop-stage {
    position: relative;
    flex: 0 0 auto;

    height: min(58vh, 440px);
    min-height: 240px;
    overflow: hidden;

    background: #111;
    cursor: grab;
    touch-action: none;   /* dra/nyp flyttar bilden, inte sidan */
    user-select: none;
    -webkit-user-select: none;
}

.crop-stage.is-dragging {
    cursor: grabbing;
}

.crop-stage:focus {
    outline: none;
}

.crop-stage:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: -3px;
}

.crop-image {
    position: absolute;
    top: 0;
    left: 0;

    max-width: none;
    max-height: none;

    pointer-events: none;
    -webkit-user-drag: none;
}

/* Allt utanför ramen tonas ner med en stor skugga */
.crop-frame {
    position: absolute;
    overflow: hidden;   /* klipper hjälplinjerna i den runda ramen */

    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgb(0 0 0 / .55);
    pointer-events: none;
}

.crop-frame.is-round {
    border-radius: 50%;
}

/* Tredjedelslinjer medan man drar */
.crop-frame::before,
.crop-frame::after {
    content: "";
    position: absolute;

    border: 0 solid rgb(255 255 255 / .55);
    opacity: 0;
    transition: opacity .15s ease;
}

.crop-frame::before {
    top: 0;
    bottom: 0;
    left: 33.333%;
    right: 33.333%;
    border-left-width: 1px;
    border-right-width: 1px;
}

.crop-frame::after {
    left: 0;
    right: 0;
    top: 33.333%;
    bottom: 33.333%;
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.crop-stage.is-dragging .crop-frame::before,
.crop-stage.is-dragging .crop-frame::after {
    opacity: 1;
}

.crop-modal.is-loading .crop-frame {
    visibility: hidden;
}

.crop-spinner {
    position: absolute;
    top: 50%;
    left: 50%;

    display: none;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;

    border: 3px solid rgb(255 255 255 / .25);
    border-top-color: #fff;
    border-radius: 50%;

    animation: crop-spin .8s linear infinite;
}

.crop-modal.is-loading .crop-spinner {
    display: block;
}

@keyframes crop-spin {
    to { transform: rotate(360deg); }
}


/* ---------- Format och zoom ---------- */

.crop-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 14px 20px 4px;
}

.crop-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crop-formats[hidden] {
    display: none;
}

.crop-format {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 34px;
    padding: 0 12px;
    border: 1.5px solid rgb(var(--ink-rgb) / .12);
    border-radius: 999px;

    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.crop-format:hover {
    background: var(--soft-gray);
}

.crop-format[aria-pressed="true"] {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.crop-format-shape {
    display: inline-block;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.crop-format-shape.is-original {
    width: 18px;
    border-style: dashed;
}

.crop-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crop-zoom input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--hype-orange);
}

.crop-reset {
    padding: 6px 4px;
    border: 0;

    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.crop-reset:hover {
    color: var(--orange-text);
}

.crop-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}


/* ---------- Knappar ---------- */

.crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 14px 20px 18px;
}


/* ---------- Mobil: hela skärmen ---------- */

@media (max-width: 600px) {

    .crop-modal {
        padding: 0;
    }

    .crop-sheet {
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .crop-head {
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    .crop-stage {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    .crop-actions {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .crop-actions > * {
        flex: 1;
        justify-content: center;
    }
}


/* =====================================================
   Förhandsvisning av vald bild för fält utan egen
   (<img class="crop-preview" data-crop-preview-for="…">)
   ===================================================== */

.crop-preview {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-top: 12px;

    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .1);
}

.crop-preview[hidden] {
    display: none;
}

/* Restaurangbilder visas liggande (1200 × 600) */
.crop-preview--wide {
    aspect-ratio: 2 / 1;
}

/* Rätternas bilder är kvadratiska (1200 × 1200) */
.crop-preview--square {
    aspect-ratio: 1;
    max-width: 220px;
}

/* ===== main/css/photo_source.css ===== */
/* =====================================================
   📷 Ta foto / Välj från galleriet (photo_source.js) — bara mobil
   ===================================================== */

html.photo-source-open {
    overflow: hidden;
}

.photo-source {
    position: fixed;
    inset: 0;
    z-index: 100011;   /* över beskärningsrutan (100010) och bottenmenyn */

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgb(0 0 0 / .5);
}

.photo-source[hidden] {
    display: none;
}

.photo-source-sheet {
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 100%;
    max-width: 420px;
}

.photo-source-option,
.photo-source-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    min-height: 54px;
    padding: 12px 16px;

    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.photo-source-option span {
    font-size: 22px;
}

.photo-source-cancel {
    margin-top: 4px;
    background: var(--surface-2);
    color: var(--hype-orange);
}

.photo-source-option:active,
.photo-source-cancel:active {
    background: var(--surface-3);
}

.photo-source-option:focus-visible,
.photo-source-cancel:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 2px;
}

/* ===== main/css/pwa.css ===== */
/* 📲 "Lägg på hemskärmen": rutan (pwa.js) och knappen i Menyn (menu.html) */

.pwa-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    padding: 12px 12px 12px 14px;
    background: var(--pure-white);
    color: var(--dark-text);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgb(var(--shade-rgb) / .18);
}

/* Under bottenmenyn (.mobile-nav, navigation.css) → ovanför den */
@media (max-width: 768px) {
    .pwa-banner {
        bottom: calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom));
    }
}

.pwa-banner-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 11px;
}

.pwa-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .85rem;
    line-height: 1.35;
}

.pwa-banner-text strong {
    font-size: .95rem;
}

.pwa-banner-text span {
    color: var(--text-muted);
}

.pwa-banner-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pwa-banner-install {
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    background: var(--hype-orange);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pwa-banner-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.pwa-banner-install:focus-visible,
.pwa-banner-close:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Knappen i Menyn: ser ut som raderna i "Mer" */
.menu-list .menu-install {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.menu-list .menu-install:hover {
    background: var(--soft-gray);
}

.menu-list .menu-install:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 2px;
}

.menu-install-help {
    margin: 0;
    padding: 0 10px 12px 46px;
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.4;
}


/* ---------- 🔔 Push-notiser i Inställningar (profile_settings.html, push_settings.js) ---------- */
/* Knapparnas egen stil (display: flex) skulle annars gå före hidden-attributet */
[data-push] [hidden] {
    display: none !important;
}

.push-device {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--soft-gray);
}

.push-status {
    margin: 0 0 10px;
    color: var(--text-2);
    line-height: 1.45;
}

.push-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.push-kinds fieldset {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.push-kinds legend {
    margin-bottom: 8px;
    font-weight: 700;
}

.push-kind {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}

.push-kind.is-required {
    opacity: .75;
    cursor: default;
}

.push-kind input {
    margin-top: 4px;
    accent-color: var(--hype-orange);
}

.push-kind small {
    display: block;
    color: var(--text-muted);
    line-height: 1.35;
}

.push-saved {
    margin-left: 10px;
    color: var(--green-text);
}

.push-subtitle {
    margin: 18px 0 6px;
    font-size: 1rem;
}

.push-devices {
    list-style: none;
    margin: 0;
    padding: 0;
}

.push-devices li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.push-devices small {
    color: var(--text-muted);
}


/* ---------- 📲 Installera-kortet i Inställningar (profile_settings.html) ---------- */
/* Egen display-stil på knappar/kort skulle annars gå före hidden-attributet */
[data-install-item][hidden],
[data-install-help][hidden],
[data-install-message][hidden],
[data-install-status][hidden] {
    display: none !important;
}

/* Hopfällt: bara rubriken syns tills man trycker på den */
.settings-install > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.settings-install > summary::-webkit-details-marker {
    display: none;
}

.settings-install > summary h2 {
    margin: 0;
}

.settings-install-hint {
    margin-left: auto;
    color: var(--text-muted);
    font-size: .85rem;
}

/* Smal skärm: rubriken får plats på en rad */
@media (max-width: 480px) {
    .settings-install-hint { display: none; }
    .settings-install > summary::after { margin-left: auto; }
}

.settings-install > summary::after {
    content: "▸";
    color: var(--text-muted);
    transition: transform .15s ease;
}

.settings-install[open] > summary {
    margin-bottom: 12px;
}

.settings-install[open] > summary::after {
    transform: rotate(90deg);
}

.settings-install > summary:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 4px;
    border-radius: 8px;
}

.install-status {
    margin: 0 0 10px;
    color: var(--green-text);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .settings-install > summary::after { transition: none; }
}

.install-how {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--text-2);
    line-height: 1.55;
}

.install-how li + li {
    margin-top: 6px;
}

.install-help {
    padding-left: 0;
    margin-top: 8px;
}

/* ===== main/css/invite.css ===== */
/* 🤝 Inbjudningssidan (/bli-med/<namn>/) och rutan "Bjud in kompisar" (partials/invite_card.html) */

.invite {
    max-width: 520px;
    margin: 0 auto;
    padding: 32px 0 56px;
    text-align: center;
}

.invite-avatar {
    display: inline-block;
    margin-bottom: 12px;
}

.invite-avatar .avatar,
.invite-avatar img {
    width: 88px;
    height: 88px;
}

.invite h1 {
    margin: 0 0 8px;
    font-size: 1.55rem;
    line-height: 1.25;
    color: var(--title-text);
}

.invite-lead {
    margin: 0 0 20px;
    color: var(--text-2);
    line-height: 1.5;
}

.invite-points {
    list-style: none;
    margin: 0 auto 24px;
    padding: 14px 18px;
    max-width: 360px;
    text-align: left;
    background: var(--pure-white);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.invite-points li {
    padding: 6px 0;
    color: var(--dark-text);
}

.invite-points span {
    display: inline-block;
    width: 1.6em;
}

.invite-cta {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--hype-orange);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.invite-cta:hover,
.invite-cta:focus-visible {
    filter: brightness(.95);
}

.invite-login,
.invite-browse {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: .95rem;
}

/* På registreringssidan: "anna bjöd in dig" */
.signup-invited {
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--orange-soft);
    color: var(--orange-text);
}

/* "Dela med någon utanför MatHajp" längst ner i Ska vi?-formuläret */
.invite-share-out {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    text-align: center;
}

/* ---------- Rutan "Bjud in kompisar" (Vänner, välkomstguiden) ---------- */
.invite-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--orange-soft);
    border: 1px solid var(--orange-soft-2);
    border-radius: 16px;
}

.invite-card-text {
    flex: 1 1 220px;
    min-width: 0;
}

.invite-card-text strong {
    display: block;
    color: var(--dark-text);
}

.invite-card-text span {
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.4;
}

.invite-card-count {
    display: block;
    margin-top: 4px;
    color: var(--green-text);
    font-size: .85rem;
}

/* ===== reels/css/reels_page.css ===== */
.reels-modal {
    position: fixed;
    inset: 0;
    background: #2A7B9B;
    background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(74, 54, 54, 1) 50%, rgba(145, 95, 64, 1) 100%);    z-index: 9999;
  
    display: flex;
}

/* CLOSE BUTTON */
.reels-close {
    position: fixed;
    top: 20px;
    right: 20px;

    font-size: 28px;
    color: white;
    text-decoration: none;

    z-index: 10000;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.5);
    border-radius: 50%;
}

/* SCROLL CONTAINER */
.reels-page {
    width: 100%;
    height: 100vh;

    overflow-y: scroll;

    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* REEL ITEM */
.reel-item {
    position: relative;
    height: 100vh;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;

    scroll-snap-align: start;
}

/* VIDEO — 9:16-ram som följer skärmhöjden (förut fast 860px) */
.reel-frame {
    position: relative;

    height: min(860px, calc(100dvh - 40px));
    aspect-ratio: 9 / 16;
    max-width: 100vw;
}

.reel-video {
    display: block;
    width: 100%;
    height: 100%;

    border-radius: 16px;

    object-fit: cover;
    background: #000;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Vem, vad och var — nederst på videon */
.reel-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    padding: 70px 18px 20px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

    color: #fff;
    pointer-events: none;
}

.reel-info a {
    pointer-events: auto;
}

.reel-author {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    color: #fff;
    text-decoration: none;
}

.reel-author strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-author .avatar {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border: 2px solid rgba(255,255,255,0.85);
}

/* 🏪 Reel som restaurangen: restaurangens bild (eller kategori-emoji) i stället för en profil */
.reel-author img.avatar,
.reel-author .avatar-emoji {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,0.15);
}

.reel-verified {
    flex: 0 0 auto;
    font-size: 13px;
    color: #fff;
    opacity: .9;
}

.reel-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 📍 Platsen: en tagg med restaurangens bild, namn och adress, som på Instagram Reels.
   Alltid mörkt glas — videon bakom är mörk i både ljust och mörkt tema. */
.reel-place {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: min(100%, 340px);
    padding: 5px 10px 5px 5px;

    border: 1px solid rgb(255 255 255 / .18);
    border-radius: 14px;
    background: rgb(20 21 24 / .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    color: #fff;
    text-decoration: none;

    transition: background-color .15s ease, transform .15s ease;
}

.reel-place:hover {
    background: rgb(20 21 24 / .72);
}

.reel-place:active {
    transform: scale(.97);
}

.reel-place-thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: rgb(255 255 255 / .16);
    font-size: 17px;
}

.reel-place-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel-place-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reel-place-text strong,
.reel-place-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-place-text strong {
    font-size: 13.5px;
    font-weight: 800;
}

.reel-place-text small {
    color: rgb(255 255 255 / .78);
    font-size: 12px;
}

.reel-place-arrow {
    flex: 0 0 auto;
    opacity: .8;
}

.reel-delete {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
}

.reel-delete button {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    font-size: 16px;
    cursor: pointer;
}

.reel-delete button:hover {
    background: rgba(179,38,30,0.85);
}

/* ＋ Ladda upp (creators) */
.reels-upload-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 10px 16px;
    border-radius: 999px;
    background: var(--hype-orange);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);

    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.reels-upload-btn .nav-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.6;
}

.reels-upload-btn-inline {
    position: static;
    margin-top: 8px;
}

.reels-empty {
    margin: auto;
    padding: 24px;
    text-align: center;
    color: #fff;
}

.reels-empty-icon {
    font-size: 48px;
}

.reels-empty h2 {
    margin: 8px 0 4px;
}

.reels-empty p {
    margin: 0 0 12px;
    opacity: .85;
}

.reels-volume-btn {
    position: fixed;
    top: 20px;
    right: 72px;
    z-index: 10000;

    width: 44px;
    height: 44px;
    border-radius: 50%;

    border: none;
    background: rgba(0,0,0,0.6);
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    cursor: pointer;

    backdrop-filter: blur(6px);
}

.reel-sponsor-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    pointer-events: none;
    background: rgba(0,0,0,0.6);
    color: white;

    padding: 6px 10px;
    border-radius: 12px;

    font-size: 12px;
    z-index: 10;
}

/* Egna reels som konverteras / misslyckades */
.reels-mine {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;

    display: flex;
    flex-direction: column;
    gap: 8px;

    width: min(460px, calc(100vw - 32px));
}

.reels-mine-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;
    border-radius: 14px;
    background: rgb(var(--surface-rgb) / 0.95);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);

    color: var(--dark-text);
    font-size: 14px;
    line-height: 1.4;
}

.reels-mine-item.is-preview {
    background: rgb(var(--orange-soft-rgb) / 0.97);
}

.reels-mine-item.is-failed {
    background: var(--red-soft);
    color: var(--red-text);
}

.reels-mine-item p {
    flex: 1;
    margin: 0;
}

.reels-mine-item form {
    margin: 0;
}

.reels-mine-item button {
    padding: 6px 12px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 999px;
    background: var(--pure-white);
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reels-mine-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;

    border: 2px solid rgba(255,111,0,0.25);
    border-top-color: var(--hype-orange);
    border-radius: 50%;

    animation: reels-spin .8s linear infinite;
}

@keyframes reels-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .reels-mine-spinner { animation-duration: 3s; }
}

.reels-page:has(.reels-empty) {
    display: flex;
}

/* Surfplatta på höjden (bottenmenyn syns): videon slutar ovanför menyn */
@media (min-width: 601px) and (max-width: 768px) {
    .reel-frame {
        height: min(860px, calc(100dvh - 136px));
        margin-bottom: 80px;
    }
}

@media (max-width: 600px) {
    .reel-frame {
        width: 100vw;
        height: 100dvh;
        aspect-ratio: auto;
    }

    .reel-video,
    .reel-info {
        border-radius: 0;
    }

    /* Bottenmenyn ligger över nederkanten */
    .reel-info {
        padding-bottom: calc(var(--mobile-nav-h) + 24px + env(safe-area-inset-bottom));
    }
}

/* ===== community/css/feed.css ===== */
/* =====================================================
   FLÖDET PÅ STARTSIDAN
   community/templates/community/*.html
   Nyhetskorten i sidokolumnen: main/css/hype_post.css
===================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* =========================
   LAYOUT
   Dator: flöde till vänster, nyheter till höger.
   Mobil: skrivruta → nyheter (swipe) → flöde.
========================= */

.feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "composer news"
        "feed     news";
    gap: 0 32px;

    max-width: 1060px;
    margin: 0 auto;
}

.feed-composer { grid-area: composer; min-width: 0; }
.feed-main     { grid-area: feed;     min-width: 0; }

.feed-news {
    grid-area: news;
    align-self: start;
    min-width: 0;
}

.feed-news-title {
    margin: 0 0 14px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--title-text);
}

.feed-composer .section-title {
    margin-top: 0;
}

/* Utloggad: en rad under "🍽️ Matflödet" om vad flödet är + "● 12 inlägg senaste veckan" */
.feed-composer .section-title:has(+ .feed-intro) {
    margin-bottom: 4px;
}

.feed-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;

    margin: 0 0 14px;

    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.4;
}

.feed-intro-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--dark-text);
    font-weight: 700;
    white-space: nowrap;
}


/* =========================
   AVATAR
========================= */

.avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;

    border-radius: 50%;
    object-fit: cover;

    box-shadow: 0 0 0 2px var(--pure-white), 0 0 0 4px rgba(255,111,0,0.15);
}

.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, var(--hype-orange), var(--accent-yellow));
    color: #fff;

    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

/* ⭕ Ring runt profilbilden från ett märke (community/_avatar.html, Badge.reward = ring).
   Ytterst är en span med .avatar, så storleken på varje ställe gäller. Ringen är en
   ::before utanför bilden och växer med den (procent av storleken), så den påverkar
   aldrig layouten. Färgerna kommer som --ring-1/--ring-2 från märket (Badge.ring_style). */
.avatar-ring {
    position: relative;
    display: inline-block;
    box-shadow: none !important;   /* ringen ersätter den vanliga orange glorian */
}

.avatar-ring.avatar-initial {
    display: inline-flex;
}

/* Profilen har redan en orange ring runt den stora bilden — märkets ring tar dess plats */
.profile-avatar-ring:has(> .avatar-ring) {
    background: none;
}

.avatar-ring-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-ring::before {
    content: "";
    position: absolute;
    inset: -11%;
    border-radius: 50%;
    background: conic-gradient(var(--ring-1), var(--ring-2), var(--ring-1));
    /* Bara en ring: mitten (bilden + en liten glipa) är genomskinlig */
    -webkit-mask: radial-gradient(closest-side, transparent 87.5%, #000 89%);
    mask: radial-gradient(closest-side, transparent 87.5%, #000 89%);
    pointer-events: none;
}

/* ✨ Animationer (Badge.ring_animation → .avatar-ring--<värde>). Bara transform och opacity, så
   det är grafikkortet som gör jobbet och inget ritas om per bildruta — lätt även på äldre mobiler.
   Allt står still för den som valt "minska rörelse" i telefonen, eller stängt av animationerna i
   Inställningar (base.html sätter html[data-animations="off"], sparas bara i den här enheten). */

/* Snurr: färgerna går runt (ringens mask är symmetrisk, så hela ringen kan rotera) */
.avatar-ring--spin::before { animation: ring-spin 6s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* Puls */
.avatar-ring--pulse::before { animation: ring-pulse 2.4s ease-in-out infinite; }
@keyframes ring-pulse {
    50% { transform: scale(1.09); }
}

/* Andas */
.avatar-ring--breathe::before { animation: ring-breathe 3.6s ease-in-out infinite; }
@keyframes ring-breathe {
    50% { opacity: .3; }
}

/* Våg: en tunn ring rullar ut från ringen och försvinner */
.avatar-ring--wave::after {
    content: "";
    position: absolute;
    inset: -11%;
    border-radius: 50%;
    border: max(1.5px, 3%) solid var(--ring-1);
    box-sizing: border-box;
    pointer-events: none;
    animation: ring-wave 2.6s ease-out infinite;
}
@keyframes ring-wave {
    from { transform: scale(1);    opacity: .75; }
    to   { transform: scale(1.45); opacity: 0; }
}

/* Gnistra: sex små ljuspunkter på ringen som blinkar och vrids lite */
.avatar-ring--twinkle::after {
    content: "";
    position: absolute;
    inset: -11%;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 3%,  #fff 0 2%, transparent 3.7%),
        radial-gradient(circle at 83% 17%, #fff 0 2%, transparent 3.7%),
        radial-gradient(circle at 83% 83%, #fff 0 2%, transparent 3.7%),
        radial-gradient(circle at 50% 97%, #fff 0 2%, transparent 3.7%),
        radial-gradient(circle at 17% 83%, #fff 0 2%, transparent 3.7%),
        radial-gradient(circle at 17% 17%, #fff 0 2%, transparent 3.7%);
    animation: ring-twinkle 2.4s ease-in-out infinite;
}
@keyframes ring-twinkle {
    0%, 100% { opacity: .1; transform: rotate(0deg); }
    50%      { opacity: 1;  transform: rotate(15deg); }
}

/* ❄️ Snö: ett eget element (community/_ring_extras.html, comments.js) — två lager flingor som faller.
   Lagren är dubbelt så höga som rutan och flyttas exakt en rutahöjd per varv, så loopen går i ett.
   Bara själva ringen och området utanför bilden syns (masken), så flingorna ligger aldrig över ansiktet. */
.ring-snow {
    position: absolute;
    inset: -36%;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 70%);
    mask: radial-gradient(closest-side, transparent 60%, #000 70%);
}

.ring-snow::before,
.ring-snow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -100%;
    height: 200%;
    background-repeat: repeat;
    background-size: 100% 50%;
    animation: ring-snowfall 5s linear infinite;
}

/* Stora flingor, långsamt */
.ring-snow::before {
    background-image:
        radial-gradient(circle at 8% 10%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 22% 34%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 37% 6%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 51% 47%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 64% 22%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 79% 9%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 91% 36%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 14% 62%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 30% 80%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 47% 93%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 60% 66%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 74% 84%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 88% 60%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%),
        radial-gradient(circle at 96% 95%, #fff 0 1.4%, #a9d3f5 2.3%, transparent 2.9%);
}

/* Små flingor, snabbare */
.ring-snow::after {
    animation-duration: 3.2s;
    background-image:
        radial-gradient(circle at 3% 26%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 15% 48%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 27% 18%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 33% 57%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 42% 31%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 55% 12%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 58% 78%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 69% 44%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 72% 60%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 83% 24%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 86% 76%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 94% 14%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 7% 88%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 19% 72%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 66% 96%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%),
        radial-gradient(circle at 48% 70%, #fff 0 .8%, #a9d3f5 1.4%, transparent 1.9%);
}

@keyframes ring-snowfall {
    to { transform: translateY(50%); }
}

/* 🔥 Eld: samma uppbyggnad som snön (eget element, två lager), men flammorna stiger uppåt och
   flimrar. Ringen själv flimrar också (värme). Färgerna är eldens egna — välj orange/röd ring i admin.
   Lagren är dubbelt så höga som rutan och flyttas exakt en rutahöjd uppåt per varv. */
.avatar-ring--fire::before { animation: ring-flicker 1.2s ease-in-out infinite alternate; }

.ring-fire {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask: radial-gradient(closest-side, transparent 63%, #000 72%, #000 92%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 63%, #000 72%, #000 92%, transparent 100%);
}

.ring-fire::before,
.ring-fire::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200%;
    background-repeat: repeat;
    background-size: 100% 50%;
    animation: ring-fireup 2.8s linear infinite, ring-flicker 0.7s ease-in-out infinite alternate;
}

/* Stora, djupa flammor, långsamt */
.ring-fire::before {
    background-image:
        radial-gradient(ellipse 5.2% 11% at 6% 30%,  #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 19% 70%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 31% 20%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 43% 55%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 55% 82%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 66% 35%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 77% 12%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 84% 62%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 94% 85%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 12% 86%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 91% 22%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%),
        radial-gradient(ellipse 5.2% 11% at 49% 14%, #ffb300 0, #ff5a00 45%, rgb(190 30 0 / 0) 100%);
}

/* Små, heta flammor och gnistor, snabbare */
.ring-fire::after {
    animation-duration: 1.9s, 0.5s;
    background-image:
        radial-gradient(ellipse 3% 7% at 3% 55%,  #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 14% 18%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 25% 78%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 37% 40%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 48% 88%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 60% 24%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 71% 66%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 81% 40%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 90% 10%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 97% 72%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 33% 62%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%),
        radial-gradient(ellipse 3% 7% at 66% 90%, #fff6b0 0, #ffc400 40%, rgb(255 90 0 / 0) 100%);
}

@keyframes ring-fireup {
    to { transform: translateY(-50%); }
}

@keyframes ring-flicker {
    from { opacity: .72; }
    to   { opacity: 1; }
}

/* På riktigt små bilder (avatar-staplar, chattlistor) blir effekterna bara brus */
@container (max-width: 35px) {
    .ring-snow,
    .ring-fire { display: none; }
}

@container (max-width: 29px) {
    .avatar-ring--wave::after,
    .avatar-ring--twinkle::after { display: none; }
}

/* 🐢 Mindre rörelse: telefonens inställning, eller strömbrytaren i Inställningar (bara den här enheten) */
@media (prefers-reduced-motion: reduce) {
    .avatar-ring::before { animation: none !important; }
    .avatar-ring--wave::after,
    .avatar-ring--twinkle::after,
    .ring-snow,
    .ring-fire { display: none !important; }
}

html[data-animations="off"] .avatar-ring::before { animation: none !important; }
html[data-animations="off"] .avatar-ring--wave::after,
html[data-animations="off"] .avatar-ring--twinkle::after,
html[data-animations="off"] .ring-snow,
html[data-animations="off"] .ring-fire { display: none !important; }

/* 🎄 Design ovanpå ringen (community/_ring_extras.html): egen ram + emojis.
   Storlekarna följer bilden (cqw = % av bildens bredd), och på små bilder
   (avatar-staplar, chattlistor) syns bara ringens färger. */
.avatar-ring {
    container-type: inline-size;
}

.ring-frame {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
}

.ring-deco {
    position: absolute;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25));
}

.ring-deco--1 { right: -14%; bottom: -12%; font-size: 40cqw; }   /* den stora, t.ex. 🎁 */
.ring-deco--2 { left: -14%; top: -12%; font-size: 30cqw; }
.ring-deco--3 { right: -10%; top: -14%; font-size: 26cqw; }

@container (max-width: 29px) {
    .ring-frame,
    .ring-deco { display: none; }
}


/* =========================
   SKRIVRUTAN
========================= */

.composer [hidden] {
    display: none !important;
}

.composer {
    background: var(--pure-white);
    border-radius: 18px;
    border: 1px solid rgb(var(--ink-rgb) / 0.08);
    box-shadow: 0 8px 24px rgba(30,42,68,0.06);

    padding: 14px 16px;
    margin-bottom: 20px;
}

.composer-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Textfältet med 😊 inuti (emoji.js) */
.composer-field {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

.composer-emoji {
    position: absolute;
    right: 7px;
    bottom: 7px;
}

.composer .composer-input {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 44px;

    padding: 11px 16px;

    border: 1px solid transparent;
    border-radius: 22px;
    background: var(--soft-gray);

    color: var(--dark-text);
    font: inherit;
    font-size: 16px; /* 16px = ingen autozoom på iPhone */
    line-height: 1.4;

    resize: none;
    overflow: hidden;

    transition: background .2s ease, border-color .2s ease, border-radius .2s ease;
}

.composer .composer-input:hover {
    background: var(--surface-2);
}

.composer .composer-input:focus,
.composer.is-open .composer-input {
    outline: none;
    background: var(--pure-white);
    border-color: rgba(255,111,0,0.35);
    border-radius: 14px;
}

.composer textarea.composer-input {
    padding-right: 44px;   /* plats för 😊 */
}

.composer-input-link {
    display: flex;
    align-items: center;
    color: var(--text-faint);
}


/* Förhandsvisning av bild */

.composer-preview {
    position: relative;
    margin: 12px 0 0 56px;
}

/* Samma ram som .post-image, bara lägre */
.composer-preview-image {
    margin-top: 0;
    border-radius: 14px;
}

.composer-preview-image .post-image-main {
    max-height: 360px;
    max-height: min(360px, 125cqw);
}

.composer-preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* 🖼️ Flera bilder: miniatyrer i en rad (feed.js), den första är omslaget */
.composer-thumbs {
    display: flex;
    gap: 8px;
    margin: 12px 0 0 56px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.composer-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
}

.composer-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.composer-thumb-cover {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgb(0 0 0 / .65);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

.composer-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
}

.composer-thumb-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    border: 2px dashed rgb(var(--ink-rgb) / .2);
    color: var(--text-muted, inherit);
    font-size: 1.5rem;
    cursor: pointer;
}

.composer-thumb-add small {
    font-size: .72rem;
    font-weight: 700;
}

.composer-thumb-add:hover {
    border-color: var(--hype-orange);
    color: var(--hype-orange);
}


/* 🏷️ Taggen i skrivrutan (composer.html → feed.js renderTag): samma kort som i inlägget
   (.post-tag-card), så man ser vad inlägget taggas med och vart det hamnar. */

.composer-tag {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 12px 0 0 56px;
    padding: 8px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);
    box-shadow: 0 1px 2px rgb(var(--ink-rgb) / .05);

    animation: composer-tag-in .22s ease-out;
}

@keyframes composer-tag-in {
    from { opacity: 0; transform: translateY(4px) scale(.98); }
}

.composer-tag-media {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;
    background: var(--surface-warm);
    font-size: 24px;
}

.composer-tag-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.composer-tag-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.composer-tag-kicker,
.composer-tag-text strong,
.composer-tag-meta {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-tag-kicker {
    color: var(--orange-text);
    font-size: 12px;
    font-weight: 700;
}

.composer-tag-text strong {
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
}

.composer-tag-meta {
    color: var(--text-muted);
    font-size: 13px;
}

/* "＋ Tagga en rätt" — lockar till nästa steg när bara restaurangen är vald */
.composer-tag-add {
    margin-top: 6px;
    padding: 4px 11px;

    border: 1px dashed rgb(255 111 0 / .55);
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--orange-text);

    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.composer-tag-add:hover {
    border-style: solid;
}

.composer-tag-edit {
    flex: 0 0 auto;
    padding: 7px 13px;

    border: 1px solid rgb(var(--ink-rgb) / .12);
    border-radius: 999px;
    background: var(--pure-white);
    color: var(--dark-text);

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.composer-tag-edit:hover {
    border-color: rgb(255 111 0 / .45);
    color: var(--orange-text);
}

.composer-tag-remove {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    background: rgb(var(--shade-rgb) / .06);
    color: var(--text-muted);

    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.composer-tag-remove:hover {
    background: rgb(var(--shade-rgb) / .12);
    color: var(--dark-text);
}

.composer-tag-add:focus-visible,
.composer-tag-edit:focus-visible,
.composer-tag-remove:focus-visible {
    outline: 3px solid rgb(255 111 0 / .45);
    outline-offset: 2px;
}

/* 📍/🍽️ i knappraden när något är taggat */
.composer-action.is-set {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.composer-chip-remove {
    width: 26px;
    height: 26px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;

    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

/* 📍 Restaurang-/rättväljaren: ett steg i taget, som "Lägg till plats" / "Tagga produkter"
   på Instagram — sök med förstoringsglas, rader med bild, ⭐ Populärt först. */

.composer-picker {
    margin: 12px 0 0 56px;
    padding: 12px;

    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);
    box-shadow: 0 18px 40px -24px rgb(var(--ink-rgb) / .45);

    animation: composer-tag-in .2s ease-out;
}

.composer-picker-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.composer-picker-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;

    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-picker-title small {
    color: var(--text-faint);
    font-size: 12.5px;
    font-weight: 600;
}

.composer-picker-close,
.composer-picker-back {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);

    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.composer-picker-back {
    font-size: 24px;
    padding-bottom: 2px;
}

.composer-picker-close:hover,
.composer-picker-back:hover {
    background: var(--surface-3);
    color: var(--dark-text);
}

.composer-search,
.composer-select {
    width: 100%;
    padding: 10px 12px;

    border: 1px solid rgb(var(--shade-rgb) / 0.12);
    border-radius: 10px;
    background: var(--pure-white);

    font: inherit;
    font-size: 16px;
}

.composer-search:focus,
.composer-select:focus {
    outline: 2px solid rgba(255,111,0,0.35);
    outline-offset: 1px;
}

/* 🔍 Sökrutan med förstoringsglas (community/_search_icon.html) */
.composer-searchbox {
    position: relative;
}

.composer-search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    color: var(--text-faint);
    transform: translateY(-50%);
    pointer-events: none;
}

.composer-searchbox .composer-search {
    min-height: 44px;
    padding-left: 40px;

    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--surface-2);

    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.composer-searchbox .composer-search:focus {
    outline: none;
    border-color: rgb(255 111 0 / .45);
    background: var(--pure-white);
    box-shadow: 0 0 0 3px rgb(255 111 0 / .14);
}

.composer-searchbox:focus-within .composer-search-icon {
    color: var(--orange-text);
}

.composer-results {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    border-radius: 12px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.composer-results:empty {
    display: none;
}

.composer-results-label,
.composer-dish-group {
    padding: 10px 10px 4px;

    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.composer-results-empty {
    margin: 0;
    padding: 12px 10px;
}

.composer-result {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;

    border: none;
    border-radius: 12px;
    background: none;
    color: var(--dark-text);

    font: inherit;
    text-align: left;
    cursor: pointer;
}

.composer-result:hover,
.composer-result:focus,
.composer-result.is-active {
    outline: none;
    background: var(--orange-soft);
}

.composer-result .place-text {
    flex: 1;
}

.composer-result strong {
    display: block;
    color: var(--dark-text);
}

/* Sökordet i namnet */
.composer-result mark,
.composer-dish mark {
    background: none;
    color: var(--orange-text);
}

.composer-result-go {
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: 22px;
    line-height: 1;
}

.composer-result:hover .composer-result-go,
.composer-result.is-active .composer-result-go {
    color: var(--orange-text);
}

/* 🍽️ Rätterna (feed.js → wireDishList) */
.composer-dishes {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.composer-dish {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 7px 10px 7px 7px;

    border: none;
    border-radius: 14px;
    background: none;
    color: var(--dark-text);

    font: inherit;
    text-align: left;
    cursor: pointer;

    transition: background-color .12s ease;
}

.composer-dish:hover,
.composer-dish:focus-visible {
    outline: none;
    background: var(--surface-2);
}

.composer-dish[aria-selected="true"] {
    background: var(--orange-soft);
    box-shadow: inset 0 0 0 1.5px rgb(255 111 0 / .45);
}

.composer-dish-media {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: var(--surface-warm);
    font-size: 22px;
}

.composer-dish-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.composer-dish-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.composer-dish-text strong,
.composer-dish-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-dish-text strong {
    font-size: 15px;
    font-weight: 700;
}

.composer-dish-text small {
    color: var(--text-muted);
    font-size: 12.5px;
}

.composer-dish-hype {
    flex: 0 0 auto;
    color: var(--orange-text);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.composer-dish-check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;

    display: none;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--hype-orange);
    color: #fff;

    font-size: 12px;
    font-weight: 900;
}

.composer-dish[aria-selected="true"] .composer-dish-check {
    display: inline-flex;
}

.composer-dish.is-none .composer-dish-media {
    background: var(--surface-2);
    font-size: 20px;
}

.composer-dish.is-new .composer-dish-media {
    border: 2px dashed rgb(255 111 0 / .5);
    background: var(--orange-soft);
    font-size: 18px;
}

.composer-dish.is-new strong {
    color: var(--orange-text);
}

/* Medan rätterna hämtas: tre grå rader i stället för en tom ruta */
.composer-dish-skeleton {
    height: 48px;
    margin: 7px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%) 0 0 / 200% 100%;
    animation: composer-shimmer 1.1s linear infinite;
}

@keyframes composer-shimmer {
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .composer-tag,
    .composer-picker,
    .composer-dish-skeleton {
        animation: none;
    }
}


/* Restaurang med bild + adress: förslagen, "Postas på"-kortet, dialogen.
   Adressen skiljer kedjans filialer åt, så den får aldrig saknas. */

.place-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-warm);

    font-size: 20px;
}

.place-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.place-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.place-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.place-where {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    color: var(--text-muted);
}

/* 🎬 Klistrad videolänk — ett litet kort tills inlägget delas (feed.js) */
.composer-video {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 12px 0 0 56px;
    padding: 8px;
    border: 1px solid rgba(255,111,0,0.25);
    border-radius: 14px;
    background: rgba(255,111,0,0.06);
}

.composer-video[hidden] {
    display: none;
}

.composer-video-icon {
    flex-shrink: 0;

    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: var(--hype-orange);
    color: #fff;
    padding-left: 2px;
}

.composer-video-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.composer-video-text small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.composer-video-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--dark-text);
    font-size: 14px;
}

.composer-place {
    flex: 1 1 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;

    /* Samma kort som taggen i skrivrutan (.composer-tag) */
    padding: 8px;
    border: 1px solid rgb(var(--ink-rgb) / .1);
    border-radius: 16px;
    background: var(--pure-white);
    box-shadow: 0 1px 2px rgb(var(--ink-rgb) / .05);
}

.composer-place[hidden] {
    display: none;
}

.composer-place .place-text {
    flex: 1;
}

.composer-place .place-text strong {
    color: var(--dark-text);
    font-weight: 800;
}

.composer-place-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--orange-text);
}

.composer-place .composer-chip-remove {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: rgb(var(--shade-rgb) / .06);
    color: var(--text-muted);
}

.report-dialog .composer-place,
.report-dialog .composer-searchbox,
.report-dialog [data-retag-food-step] {
    margin-bottom: 12px;
}

.report-dialog .composer-results {
    margin: -6px 0 12px;
    max-height: 260px;
}

.report-dialog .composer-dishes {
    max-height: 260px;
}

.report-submit.retag-submit {
    background: var(--hype-orange);
}

.composer-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.composer-hint a {
    color: var(--social-blue);
}

/* ➕ "Saknas rätten?" — under listan med rätter */
.composer-new-food {
    margin-top: 10px;
}

.composer-new-food label {
    display: block;
    margin-bottom: 6px;

    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
}

.composer-new-food[hidden] {
    display: none;
}


/* Knappraden */

.composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
}

.composer-actions {
    display: flex;
    gap: 2px;
    min-width: 0;
}

.composer-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: none;

    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: background .15s ease;
}

.composer-action:hover,
.composer-action.is-active {
    background: var(--soft-gray);
    color: var(--dark-text);
}

#composer-image:focus-visible + .composer-bar label[for="composer-image"],
.composer-action:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 1px;
}

.composer-submit-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.composer-visibility {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: help;
}

.composer-count {
    font-size: 12px;
    color: var(--text-faint);
}

.composer-count.is-near-limit {
    color: var(--red-text);
}

.composer-submit {
    padding: 9px 22px;
    border: none;
    border-radius: 999px;

    background: var(--hype-orange);
    color: #fff;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255,111,0,0.25);
    transition: transform .15s ease, opacity .15s ease;
}

.composer-submit:hover {
    transform: translateY(-1px);
}

.composer-submit:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.composer-error {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;

    background: var(--red-soft);
    color: var(--red-text);

    font-size: 14px;
}

/* Utloggad: en tunn rad i stället för skrivrutan (composer.html) */
.composer-guest-row {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 111, 0, .35);
    background: var(--pure-white);

    color: var(--text-muted);
    font-size: 14px;
}

.composer-guest-row:hover {
    border-style: solid;
    background: var(--orange-soft);
}

.composer-guest-icon {
    font-size: 18px;
}

.composer-guest-question {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-guest-cta {
    flex-shrink: 0;
    color: var(--hype-orange);
    font-weight: 700;
}


/* =========================
   INLÄGG
========================= */

.post-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feed-post {
    background: var(--pure-white);
    border-radius: 18px;
    border: 1px solid rgb(var(--ink-rgb) / 0.08);
    box-shadow: 0 6px 20px rgba(30,42,68,0.05);

    /* inte overflow:hidden — då klipps ⋯-menyn av på korta inlägg */
}

.feed-post.is-new {
    animation: post-in .35s ease;
}

@keyframes post-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

.post-header {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px 18px 0;
}

.post-avatar-link {
    display: inline-flex;
}

.post-meta {
    flex: 1;
    min-width: 0;
}

.post-author {
    font-weight: 700;
    color: var(--dark-text);
}

.post-author:hover {
    text-decoration: underline;
}

.post-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.post-delete-btn {
    padding: 8px;
    border: none;
    border-radius: 50%;
    background: none;

    font-size: 16px;
    opacity: .45;
    cursor: pointer;
    transition: opacity .15s ease, background .15s ease;
}

.post-delete-btn:hover,
.post-delete-btn:focus-visible {
    opacity: 1;
    background: var(--soft-gray);
}

.post-text {
    margin: 0;
    padding: 12px 18px 0;

    font-size: 16px;
    line-height: 1.5;
    color: var(--dark-text);

    overflow-wrap: anywhere;
}

/* ✏️ Redigera inlägget (feed.js) */
.post-edit {
    padding: 12px 18px 0;
}

.post-edit-field {
    position: relative;
}

.post-edit textarea {
    display: block;
    width: 100%;
    min-height: 64px;
    max-height: 50vh;
    padding: 12px 44px 12px 14px;   /* plats för 😊 */
    resize: none;

    border: 1px solid rgba(255, 111, 0, .45);
    border-radius: 14px;
    background: var(--pure-white);
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .12);
    color: var(--dark-text);

    font: inherit;
    font-size: 16px;
    line-height: 1.5;
}

.post-edit textarea:focus {
    outline: none;
}

.post-edit-field .emoji-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
}

.post-edit-error {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--red-text);
}

.post-edit-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.post-edit-bar .mh-ghost,
.post-edit-bar .mh-hype {
    height: 36px;
}

.post-edit-count {
    margin-right: auto;
    font-size: 12px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.post-edit-count.is-near-limit {
    color: var(--orange-text);
}

.post-edited {
    color: var(--text-faint);
}

/* 🕰️ "Du kanske missade" — äldre osett inlägg före nyare sedda */
.post-missed {
    color: var(--hype-orange);
    font-weight: 600;
    white-space: nowrap;   /* bryts som en enhet, inte "Du kanske / missade" */
}

/* ↑ "N nya inlägg" — flyter under headern medan man scrollar (feed_new.js) */
.feed-new {
    position: sticky;
    top: 80px;
    z-index: 20;
    height: 0;              /* tar ingen plats i flödet */
    display: flex;
    align-items: flex-start;   /* knappen behåller sin höjd, sträcks inte till 0 */
    justify-content: center;
}

.feed-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    line-height: 1.2;
    border-radius: 999px;
    background: var(--hype-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(255, 111, 0, .3);
    white-space: nowrap;
}

.feed-new-btn:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* display ovan tar annars över hidden — knappen ska bara synas när det finns nytt */
.feed-new-btn[hidden] {
    display: none;
}

/* 🔥 Vänners hajp som kort i flödet (community/_friend_hype_card.html) */
.friend-hype-card {
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--shade-rgb) / 0.06);
}

.friend-hype-card .friends-hyped {
    margin: 0 0 10px;
}

.friend-hype-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 111, 0, .06);
    color: var(--dark-text);
}

.friend-hype-item:hover {
    background: rgba(255, 111, 0, .12);
}

.friend-hype-item img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
}

.friend-hype-item span:not(.friend-hype-more) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.friend-hype-item small {
    color: var(--text-muted);
}

.friend-hype-more {
    color: var(--hype-orange);
    font-weight: 700;
}

/* ✓ Mellan det nya och det man redan sett i "Alla" */
.feed-seen-divider {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 6px 0;

    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.feed-seen-divider::before,
.feed-seen-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

/* 🍽️ Den taggade rätten/restaurangen (community/_post_tag_card.html) — som en produkttagg på
   Instagram: bild med 🔥 hajp, kategori · pris i orange, namnet, var, och "Visa rätten ›".
   Hela kortet är en länk, restaurangnamnet en egen ovanpå. is-hero (inlägg utan egen bild):
   taggens foto stort överst, som en länkförhandsvisning på Facebook. */
.post-tag-card {
    --tag-media: 64px;

    position: relative;
    container: post-tag / inline-size;   /* "Visa rätten" får text när kortet är brett nog */

    display: flex;
    align-items: center;
    gap: 12px;

    margin: 12px 18px 0;
    padding: 8px 10px 8px 8px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);
    box-shadow: 0 1px 2px rgb(var(--ink-rgb) / .05);

    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.post-tag-card-media {
    position: relative;
    flex: 0 0 auto;
    width: var(--tag-media);
    height: var(--tag-media);
    overflow: hidden;

    border-radius: 13px;
    background: var(--surface-warm);
}

.post-tag-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

/* 🔥 Hajpen ovanpå bilden — samma mörka "glas" som matguidens etikett (lists.css) */
.post-tag-card-hype {
    position: absolute;
    left: 4px;
    bottom: 4px;
    max-width: calc(100% - 8px);
    padding: 2px 6px;
    overflow: hidden;

    border-radius: 999px;
    background: rgb(20 21 24 / .78);
    color: #fff;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.post-tag-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.post-tag-card-kicker,
.post-tag-card-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-tag-card-kicker {
    color: var(--orange-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Långa rättnamn får två rader innan de kortas */
.post-tag-card-text strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    color: var(--dark-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.post-tag-card-meta {
    color: var(--text-muted);
    font-size: 13px;
}

/* "Visa rätten ›": en rund pil på mobilen, med text när kortet är brett (≥ 420 px) */
.post-tag-card-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;

    min-width: 34px;
    height: 34px;
    border-radius: 999px;

    background: var(--orange-soft);
    color: var(--orange-text);

    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;

    transition: background-color .2s ease, color .2s ease;
}

.post-tag-card-cta-label {
    display: none;
}

.post-tag-card-arrow {
    flex: none;
    transition: transform .2s ease;
}

@container post-tag (min-width: 420px) {
    .post-tag-card-cta {
        padding: 0 8px 0 14px;
    }

    .post-tag-card-cta-label {
        display: inline;
    }
}

/* Stort: fotot överst i full bredd, texten och pilen under */
.post-tag-card.is-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 12px;
    padding: 0 14px 14px 0;
    overflow: hidden;
}

.post-tag-card.is-hero .post-tag-card-media {
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    aspect-ratio: 1.91 / 1;
    margin-bottom: 12px;
    border-radius: 0;
}

.post-tag-card.is-hero .post-tag-card-text {
    padding-left: 14px;
}

.post-tag-card.is-hero .post-tag-card-hype {
    top: 10px;
    left: 10px;
    bottom: auto;
    padding: 4px 10px;
    font-size: 12.5px;
}

@media (hover: hover) {
    .post-tag-card:hover {
        border-color: rgb(255 111 0 / .35);
        box-shadow: 0 12px 28px -14px rgb(255 111 0 / .45), 0 2px 6px rgb(var(--ink-rgb) / .06);
        transform: translateY(-1px);
    }

    .post-tag-card:hover .post-tag-card-media img {
        transform: scale(1.06);
    }

    .post-tag-card.is-hero:hover .post-tag-card-media img {
        transform: scale(1.03);
    }

    .post-tag-card:hover .post-tag-card-cta {
        background: var(--hype-orange);
        color: #fff;
    }

    .post-tag-card:hover .post-tag-card-arrow {
        transform: translateX(2px);
    }
}

.post-tag-card:active {
    transform: scale(.985);
}

@media (prefers-reduced-motion: reduce) {
    .post-tag-card,
    .post-tag-card-media img,
    .post-tag-card-arrow {
        transition: none;
    }

    .post-tag-card:hover,
    .post-tag-card:active,
    .post-tag-card:hover .post-tag-card-media img,
    .post-tag-card:hover .post-tag-card-arrow {
        transform: none;
    }
}

/* ➕ "Saknas rätten?": rätten som väntar på godkännande (bara för den som skrev) */
.post-pending-food {
    max-width: 440px;
    margin: 8px 18px 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.post-pending-food strong {
    color: var(--dark-text);
}

.post-tag-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.post-tag-card-link:focus-visible {
    outline: none;
}

.post-tag-card:has(.post-tag-card-link:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Restaurangnamnet: egen länk ovanför kortlänken */
.post-tag-card-place {
    position: relative;
    z-index: 2;
    color: var(--text-2);
    font-weight: 600;
    text-decoration: none;
}

.post-tag-card-place:hover {
    color: var(--orange-text);
    text-decoration: underline;
}

/* Hela bilden syns. Stående bilder blir som mest 4:5 (eller 640 px) höga,
   som på Instagram, och en suddig kopia fyller ut på sidorna.
   Liggande och kvadratiska bilder fyller bredden som förut.
   Samma ram används för förhandsvisningen i skrivrutan (.composer-preview-image). */
.post-image {
    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: center;

    margin-top: 14px;
    background: var(--surface-2);
    container-type: inline-size;   /* 125cqw nedan = 4:5 av ramens bredd */
}

/* 📐 Bildens proportioner (post_card.html → frame_ratio): ramen har rätt höjd redan innan den
   lata bilden laddats, så flödet inte hoppar när man scrollar. Samma gränser som bilden nedan:
   högst 4:5 (i --post-ratio) och 640 px. */
.post-image.has-ratio {
    width: 100%;   /* annars krymper max-height bredden via aspect-ratio → ramen hamnar mot vänster kant */
    aspect-ratio: var(--post-ratio);
    max-height: 640px;
}

.post-image-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: blur(28px) saturate(1.2) brightness(.85);
    transform: scale(1.2);   /* de suddiga kanterna hamnar utanför ramen */
    pointer-events: none;
}

.post-image-main {
    position: relative;

    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 640px;
    max-height: min(640px, 125cqw);
}

/* 🖼️ Bildens omslag i kortet: en vanlig ruta runt bilden i flödet — i det öppnade inlägget
   på datorn blir det vänsterkolumnen (explore.css, "Bildinlägg bredvid kommentarerna").
   Inte display: contents — då laddar Chrome aldrig bilderna med loading="lazy". */
.post-media {
    display: block;
}

/* 🖼️ Karusell (post_card.html, post_carousel.js): bilderna bredvid varandra, en i taget
   med scroll-snap — svep på mobil, ‹ › på datorn. Varje bild har samma ram som ovan. */
.post-carousel {
    position: relative;
    margin-top: 14px;
}

.post-carousel-track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: var(--surface-2);
}

.post-carousel-track::-webkit-scrollbar {
    display: none;
}

.post-carousel-track:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: -2px;
}

.post-carousel-slide {
    flex: 0 0 100%;
    align-items: center;
    margin-top: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.post-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / .9);
    color: #111;
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgb(0 0 0 / .25);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}

.post-carousel-btn.is-prev { left: 10px; }
.post-carousel-btn.is-next { right: 10px; }

.post-carousel:hover .post-carousel-btn,
.post-carousel-btn:focus-visible {
    opacity: 1;
}

/* Touch: man sveper, knapparna skymmer bara */
@media (pointer: coarse) {
    .post-carousel-btn { display: none; }
}

.post-carousel-count {
    position: absolute;
    top: 10px;
    right: 10px;

    padding: 3px 9px;
    border-radius: 999px;
    background: rgb(0 0 0 / .6);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    pointer-events: none;
}

.post-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 8px 0 0;
}

.post-carousel-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--ink-rgb) / .25);
    transition: background .15s, transform .15s;
}

.post-carousel-dots span.is-active {
    background: var(--hype-orange);
    transform: scale(1.2);
}

/* 🎬 Videolänk (post_card.html, video_cards.js): bild + ▶, spelaren först vid tryck */

.post-video {
    margin: 14px 18px 0;
    border-radius: 14px;
    overflow: hidden;

    background: var(--surface-2);
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

.post-video-media {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 16 / 9;
    background: #111;
    color: #fff;
    text-decoration: none;
}

/* Samma suddiga kant som bilderna: stående bilder fyller ut bredvid */
.post-video-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: blur(24px) saturate(1.2) brightness(.7);
    transform: scale(1.2);
    pointer-events: none;
}

.post-video-thumb {
    position: relative;

    width: 100%;
    height: 100%;
    object-fit: contain;
}

.post-video-badge {
    position: absolute;
    top: 10px;
    left: 10px;

    padding: 3px 9px;
    border-radius: 999px;

    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.post-video-play {
    position: absolute;
    inset: 0;
    margin: auto;

    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);

    font-size: 24px;
    padding-left: 4px;   /* ▶ ser annars för långt åt vänster ut */

    transition: transform .15s ease, background .15s ease;
}

.post-video-media:hover .post-video-play,
.post-video-media:focus-visible .post-video-play {
    background: var(--hype-orange);
    transform: scale(1.08);
}

.post-video-media:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: -3px;
}

/* Instagram: ingen bild att visa — ▶ och en rad om vad man får, på Instagrams färger */
.post-video--instagram .post-video-media {
    flex-direction: column;
    gap: 10px;

    aspect-ratio: auto;
    min-height: 168px;
    background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
}

.post-video--instagram .post-video-play {
    position: static;
    margin: 0;
}

.post-video-open {
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Instagrams ruta är hög och smal (bild + bildtext) */
.post-video--instagram .post-video-media.is-playing {
    aspect-ratio: auto;
    height: min(680px, 80vh);
    background: #111;
}

.post-video--instagram .post-video-player {
    max-width: 480px;
    margin: 0 auto;
}

/* ▶ tryckt: plattformens spelare i stället för bilden */
.post-video-media.is-playing {
    display: block;
    background: #000;
}

.post-video-player {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Stående (TikTok, Shorts): smalare ruta, hög spelare */
.post-video.is-vertical .post-video-media.is-playing {
    aspect-ratio: auto;
    height: min(640px, 80vh);
    background: #111;
}

.post-video.is-vertical .post-video-player {
    max-width: 340px;
    margin: 0 auto;
}

.post-video-info {
    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 10px 14px 12px;

    color: inherit;
    text-decoration: none;
}

.post-video-info strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    color: var(--dark-text);
    font-size: 15px;
    line-height: 1.3;
}

.post-video-info small {
    color: var(--text-muted);
    font-size: 13px;
}

.post-video-info:hover strong {
    color: var(--hype-orange);
}

@media (max-width: 520px) {
    .post-video {
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* Ett tryck på inlägget i ett flöde öppnar det i popupen (photo_viewer.js) */
.post-feed:not([data-no-post-popup], .photo-viewer-body) .feed-post {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;   /* ingen blå blinkning över hela inlägget vid tryck */
}

.post-feed .feed-post .cthread {
    cursor: auto;
}

/* Knapparna (.mh-hype / .mh-comment / .mh-share--icon) är samma som på korten: main/css/food_cards.css */
/* "Gilla" på inlägg: håll inne på mobil ska bara öppna reaktionerna — ingen blå tryckmarkering
   över inlägget, ingen markerad text, ingen kopiera-meny (som .cmt-like på kommentarer) */
.feed-post-actions,
.post-like,
.post-like * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.post-like {
    touch-action: manipulation;   /* inget dubbeltryck-zoom, snabbare svar på tryck */
}

.react-bar,
.react-bar * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.feed-post-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 12px;
    padding: 10px 14px;   /* lika mycket luft över som under — knapparna mitt i raden */
    border-top: 1px solid rgb(var(--ink-rgb) / 0.06);
}

.feed-post-actions .mh-share {
    margin-left: auto;   /* Dela längst till höger, oavsett vad som ligger före */
}

.post-hype-count:empty {
    display: none;
}

/* Kommentera: knappen lyser blått när tråden är öppen */
.feed-post-actions .mh-comment[aria-expanded="true"] {
    border-color: rgba(59, 130, 246, .4);
    background: rgba(59, 130, 246, .08);
    color: var(--blue-text);
}

.post-empty {
    padding: 36px 20px;
    border-radius: 18px;
    border: 2px dashed rgb(var(--ink-rgb) / 0.12);
    background: var(--pure-white);

    text-align: center;
    color: var(--text-muted);
}

.post-empty p {
    margin: 4px 0;
}

.post-empty a {
    color: var(--hype-orange);
    font-weight: 700;
}

.post-empty-icon {
    font-size: 34px;
    margin-bottom: 6px;
}

.feed-main .pagination {
    margin-top: 24px;
}


/* =========================
   ⋯-MENYN (Rapportera / Radera)
========================= */

.post-menu {
    position: relative;
}

.post-menu-btn {
    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;
    background: none;

    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.post-menu-btn:hover,
.post-menu.is-open .post-menu-btn {
    background: var(--soft-gray);
    color: var(--dark-text);
}

.post-menu-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;

    min-width: 220px;
    padding: 6px;

    background: var(--pure-white);
    border-radius: 12px;
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.post-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;

    border: none;
    border-radius: 8px;
    background: none;

    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.post-menu-item:hover,
.post-menu-item:focus-visible {
    outline: none;
    background: var(--soft-gray);
}

.post-menu-danger {
    color: var(--red-text);
}

.post-hidden-note {
    margin: 12px 18px 0;
    padding: 10px 12px;
    border-radius: 10px;

    background: var(--orange-soft);
    color: var(--amber-text);

    font-size: 14px;
}

.feed-post.is-hidden {
    border-style: dashed;
}


/* Kommentarer: main/css/comments.css (samma tråd överallt) */

/* =========================
   RAPPORT-DIALOGEN
========================= */

.report-dialog {
    width: min(480px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;

    border: none;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);

    color: var(--dark-text);
}

.report-dialog::backdrop {
    background: rgba(15,23,42,0.55);
}

.report-form {
    padding: 20px;
}

.report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.report-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.report-close {
    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;
    background: var(--soft-gray);

    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.report-intro {
    margin: 8px 0 14px;
    font-size: 14px;
    color: var(--text-muted);
}

.report-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 0;
    padding: 0;
    border: none;
}

.report-reason {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 10px 12px;
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    border-radius: 12px;

    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.report-reason:hover {
    background: var(--soft-gray);
}

.report-reason:has(input:checked) {
    border-color: rgba(179,38,30,0.45);
    background: var(--red-soft);
}

.report-reason input {
    margin-top: 3px;
    accent-color: #b3261e;
}

.report-reason strong {
    display: block;
    font-size: 15px;
}

.report-reason small {
    color: var(--text-muted);
    font-size: 13px;
}

.report-details-label {
    display: block;
    margin: 14px 0 6px;
    font-size: 14px;
    font-weight: 700;
}

.report-details-label small {
    font-weight: 500;
    color: var(--text-faint);
}

.report-dialog textarea {
    width: 100%;
    padding: 10px 12px;

    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;

    font: inherit;
    font-size: 15px;
    resize: vertical;
}

.report-error {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;

    background: var(--red-soft);
    color: var(--red-text);
    font-size: 14px;
}

.report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.report-cancel,
.report-submit {
    padding: 10px 18px;
    border: none;
    border-radius: 999px;

    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.report-cancel {
    background: var(--soft-gray);
    color: var(--dark-text);
}

.report-submit {
    background: #b3261e;
    color: #fff;
}

.report-submit:disabled {
    opacity: .6;
    cursor: wait;
}

.report-thanks {
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px dashed rgba(0,0,0,0.15);
    background: var(--pure-white);

    color: var(--text-2);
    font-size: 14px;
}


/* =========================
   FÖLJ
========================= */

.follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 8px 16px;

    border: 1px solid var(--hype-orange);
    border-radius: 999px;
    background: var(--hype-orange);
    color: #fff;

    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.follow-btn:hover {
    background: #e65c00;
}

/* Följer: orange ton i stället för vit/svart — syns i både ljust och mörkt tema */
.follow-btn.is-following {
    background: rgba(255, 111, 0, .12);
    border-color: rgba(255, 111, 0, .45);
    color: var(--orange-text);
}

.follow-btn.is-following::before {
    content: "✓";
    margin-right: 5px;
    font-weight: 800;
}

/* "Neka" har samma mjuka stil, men ingen ✓ (den betyder "följer redan") */
.follow-btn.is-decline::before {
    content: none;
}

.follow-btn.is-following:hover {
    background: rgba(239, 68, 68, .1);
    border-color: #b3261e;
    color: var(--red-text);
}

.follow-btn:disabled {
    opacity: .6;
    cursor: wait;
}

/* 🏪 Följ på restaurangsidan — samma höjd som Hajpa / Vill besöka */
.follow-btn.follow-btn-lg {
    height: 46px;
    padding: 0 22px;
    font-size: 15px;
    text-decoration: none;
}

/* Förfrågan till ett privat konto väntar på svar */
.follow-btn.is-requested {
    background: var(--soft-gray);
    border-color: rgb(var(--shade-rgb) / 0.12);
    color: var(--text-muted);
}

.follow-btn.is-requested:hover {
    border-color: #b3261e;
    color: var(--red-text);
}

.follow-btn.follow-btn-sm.is-requested {
    background: none;
    color: var(--text-faint);
}


/* ---------- Privata konton ---------- */

.private-badge {
    font-size: .7em;
    vertical-align: middle;
}

.private-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.private-lock p {
    max-width: 380px;
    margin: 0 auto 8px;
}

.request-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.request-actions form {
    margin: 0;
}

.request-actions .follow-btn {
    min-width: 0;
    padding: 6px 12px;
    font-size: 13px;
}

.follow-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.follow-row-actions form {
    margin: 0;
}

.follow-row-actions .follow-btn {
    min-width: 0;
    padding: 6px 12px;
    font-size: 13px;
}

.follow-requests-note {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Liten variant bredvid namnet på inlägg: "anna · Följ" */
.follow-btn.follow-btn-sm {
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--hype-orange);
    font-size: 14px;
}

.follow-btn.follow-btn-sm:hover {
    background: none;
    text-decoration: underline;
}

.follow-btn.follow-btn-sm.is-following {
    color: var(--text-faint);
}

.post-author-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.post-author-dot {
    color: var(--text-faint);
}

/* Flikar "Alla" / "Följer" */
.feed-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    padding: 4px;

    border-radius: 999px;
    background: rgb(var(--ink-rgb) / 0.06);
}

.feed-tab {
    flex: 1;
    padding: 9px 14px;
    border-radius: 999px;

    color: var(--text-2);
    font-weight: 700;
    text-align: center;
    transition: background .15s ease, color .15s ease;
}

.feed-tab:hover {
    color: var(--dark-text);
}

.feed-tab.is-active {
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Personlistor (förslag, följare, följer) */
.follow-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.follow-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.follow-row + .follow-row {
    border-top: 1px solid rgb(var(--shade-rgb) / 0.06);
}

.follow-row-person {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-text);
}

.follow-row-person strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.follow-row-person small {
    color: var(--text-faint);
    font-size: 12px;
}

.follow-row-person:hover strong {
    text-decoration: underline;
}

.follow-suggestions-aside {
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgb(var(--ink-rgb) / 0.08);
    background: var(--pure-white);
}

.follow-suggestions-aside .feed-news-title {
    margin-bottom: 4px;
}

.follow-suggestions-aside .follow-btn {
    min-width: 0;
    padding: 6px 12px;
    font-size: 13px;
}

.follow-prompt {
    margin-bottom: 16px;
}

/* ---------- 👥 🏪 Förslag att följa i flödet (bara mobil, _suggestion_rail.html) ---------- */

.suggestion-rail {
    display: none;   /* större skärmar: sidospalten */
    margin: 0 0 16px;
    padding: 14px 0 16px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

.suggestion-rail-head {
    padding: 0 16px 10px;
}

.suggestion-rail-head h2 {
    margin: 0;
    color: var(--title-text);
    font-size: 1rem;
    font-weight: 800;
}

.suggestion-rail-list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0 16px 2px;
    list-style: none;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scroll-behavior: smooth;   /* ‹ › -pilarna (home_rails.js) */
    scrollbar-width: none;
}

.suggestion-rail-list::-webkit-scrollbar {
    display: none;
}

/* Pilarna inuti kortet (startsidans rader har dem i kanten) */
.suggestion-rail .home-rail-arrow {
    top: 50%;
}

.suggestion-rail .home-rail-arrow--prev { left: 6px; }
.suggestion-rail .home-rail-arrow--next { right: 6px; }

@media (prefers-reduced-motion: reduce) {
    .suggestion-rail-list {
        scroll-behavior: auto;
    }
}

.suggestion-card {
    position: relative;   /* håller ev. absolut innehåll inom raden */
    flex: 0 0 136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    padding: 14px 10px 12px;
    border-radius: 16px;
    border: 1px solid rgb(var(--ink-rgb) / .1);
    background: var(--surface-cream);

    text-align: center;
    scroll-snap-align: start;
    transition: opacity .25s ease;
}

.suggestion-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-width: 0;

    color: inherit;
    text-decoration: none;
}

.suggestion-card-avatar {
    position: relative;
    margin-bottom: 6px;
}

.suggestion-card-avatar .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 24px;
}

/* Restauranger: rundad fyrkant + liten 🏪 så man ser skillnad på person och ställe */
.suggestion-card-avatar.is-restaurant .avatar {
    border-radius: 16px;
}

.suggestion-card-tag {
    position: absolute;
    right: -6px;
    bottom: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--pure-white);
    background: var(--orange-soft);
    font-size: 12px;
}

.suggestion-card-link strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--dark-text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-card-link small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.suggestion-card .follow-btn {
    width: 100%;
    min-width: 0;
    margin-top: auto;
    padding: 7px 10px;
    font-size: 13px;
}

/* Följd → tonas ned (knappen går att trycka igen för att ångra) */
.suggestion-card.is-followed {
    opacity: .55;
}

@media (max-width: 900px) {
    .suggestion-rail {
        display: block;
    }
}


.follow-suggestions-empty {
    max-width: 380px;
    margin: 16px auto 0;
    text-align: left;
}

.follow-page-back {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--text-2);
    font-weight: 700;
}

.follow-empty {
    padding: 16px 0;
    color: var(--text-faint);
    text-align: center;
}

.follow-empty a {
    display: block;
    margin-top: 6px;
    color: var(--social-blue);
    font-weight: 700;
}

/* "Följer": 👥 Personer · 🏪 Restauranger (follow_list.html) */
.follow-kind-chips {
    margin: 0 0 14px;
}

.follow-row-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================
   🔔 NOTISER
========================= */

.notif-bell {
    position: relative;
    flex-shrink: 0;

    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    background: var(--pure-white);

    transition: background .15s ease;
}

.notif-bell:hover {
    background: var(--soft-gray);
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;

    min-width: 20px;
    height: 20px;
    padding: 0 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    border: 2px solid var(--pure-white);
    background: #e11d48;
    color: #fff;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.notif-badge[hidden] {
    display: none;
}

/* --- Dropdown under klockan --- */

.notif-menu {
    position: relative;
    flex-shrink: 0;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1100;

    width: 380px;
    max-width: calc(100vw - 24px);

    display: flex;
    flex-direction: column;

    background: var(--pure-white);
    border: 1px solid rgb(var(--shade-rgb) / 0.06);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    overflow: hidden;
}

.notif-dropdown[hidden] {
    display: none;
}

.notif-dropdown-head {
    padding: 12px 16px;
    font-weight: 800;
    font-size: 16px;
    border-bottom: 1px solid rgb(var(--shade-rgb) / 0.06);
}

.notif-dropdown-body {
    max-height: min(460px, calc(100vh - 180px));
    overflow-y: auto;
    padding: 4px;
}

.notif-dropdown .notif {
    padding: 10px;
    gap: 10px;
}

.notif-dropdown .notif-text {
    font-size: 14px;
}

.notif-dropdown .follow-btn {
    padding: 5px 12px;
    font-size: 13px;
}

.notif-dropdown .notif-empty {
    padding: 20px 16px;
    font-size: 14px;
}

.notif-dropdown-loading {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
}

.notif-dropdown-more {
    display: block;
    padding: 12px 16px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--hype-orange);
    border-top: 1px solid rgb(var(--shade-rgb) / 0.06);
}

.notif-dropdown-more:hover {
    background: rgba(255,111,0,0.08);
}

/* Mobil: dropdownen spänner över hela headerns bredd */
@media (max-width: 600px) {

    .notif-menu {
        position: static;
    }

    .notif-dropdown {
        top: calc(100% + 6px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }

}

.notif-card {
    padding: 6px;
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notif {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
}

.notif + .notif {
    margin-top: 2px;
}

.notif.is-unread {
    background: var(--orange-soft);
}

.notif-avatar {
    display: inline-flex;
    flex-shrink: 0;
}

.notif-avatar-mathajp {
    font-size: 20px;
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-text {
    display: block;
    color: var(--dark-text);
    font-size: 15px;
    line-height: 1.4;
    /* Bryter bara ett ord som inte får plats på en egen rad (anywhere lät texten
       krympa till en bokstav per rad bredvid knapparna) */
    overflow-wrap: break-word;
}

/* Godkänn + Neka under texten (vän- och följförfrågan) */
.notif-actions {
    display: flex;
    margin-top: 8px;
}

.notif-text:hover strong {
    text-decoration: underline;
}

/* Förklaringen/citatet på en egen rad under huvudtexten, inte direkt efter den */
.notif-quote {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: .93em;
}

.notif-quote:empty {
    display: none;
}

/* Knappar under texten: avataren i höjd med första raden */
.notif:has(.notif-actions) {
    align-items: flex-start;
}

.notif-time {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-faint);
}

.notif.is-unread .notif-time {
    color: var(--orange-text);
    font-weight: 700;
}

.notif-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--text-muted);
}

.notif-empty p {
    margin: 4px 0;
}

/* Liten typikon på avataren (👤 🔥 💬 🙈) — sidan + dropdownen */
.notif-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
}

.notif-type {
    position: absolute;
    right: -4px;
    bottom: -4px;

    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 2px solid var(--pure-white);
    background: var(--orange-soft);

    font-size: 10px;
    line-height: 1;
}

.notif-type--follow       { background: var(--blue-soft); }
.notif-type--post_comment { background: var(--purple-soft); }
.notif-type--post_hidden  { background: var(--surface-2); }
.notif-type--comment_hidden { background: var(--surface-2); }
.notif-type--warning,
.notif-type--suspended    { background: var(--yellow-soft); }
.notif-type--achievement  { background: var(--yellow-soft); }

/* Oläst: en prick i kanten i stället för bara bakgrundsfärg */
.notif.is-unread {
    position: relative;
}

.notif.is-unread::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--hype-orange);
}

.notif.is-unread .follow-btn {
    margin-right: 14px;   /* plats för pricken */
}


/* ---------- Notis-sidan (community/notifications.html) ---------- */

.notif-page {
    max-width: 760px;
}

.notif-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.notif-hero-top form {
    margin: 0;
}

.notif-page .notif-card {
    padding: 6px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 4px 14px rgba(16, 24, 40, .05);
}

.notif-page .notif {
    padding: 12px 34px 12px 12px;   /* höger: plats för olästpricken */
}

.notif-page .notif:hover {
    background: var(--soft-gray);
}

.notif-page .notif.is-unread:hover {
    background: var(--orange-soft-2);
}

.notif-group {
    padding: 14px 12px 6px;

    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.notif-group:first-child {
    padding-top: 8px;
}

.notif-page .pagination {
    margin-top: 16px;
}

.post-permalink {
    color: inherit;
}

.post-permalink:hover {
    text-decoration: underline;
}


/* =========================
   "VAD FOLK SÄGER" / PROFIL
========================= */

.post-section {
    max-width: 680px;
    margin: 40px auto;
}

.post-section > h3 {
    margin: 0 0 14px;
}


/* =========================
   RESPONSIVT
========================= */

@media (max-width: 1100px) {
    .feed-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 0 24px;
    }
}

@media (max-width: 900px) {

    .feed-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "composer"
            "news"
            "feed";
        max-width: 680px;
    }

    .feed-news {
        margin-bottom: 20px;
    }

    /* Mobil: förslagen visas i "Följer"-fliken i stället */
    .follow-suggestions-aside {
        display: none;
    }
}

@media (max-width: 520px) {

    .composer {
        padding: 12px;
    }

    .composer-preview,
    .composer-thumbs,
    .composer-video,
    .composer-tag,
    .composer-picker {
        margin-left: 0;
    }

    .composer-picker {
        padding: 10px;
    }

    /* Bara ikoner i knappraden på smal mobil */
    .composer-visibility-label,
    .composer-action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .composer-action {
        padding: 8px 10px;
        font-size: 18px;
    }

    .post-header,
    .post-text {
        padding-left: 14px;
        padding-right: 14px;
    }

    .post-tag-card {
        margin-left: 14px;
        margin-right: 14px;
    }

    .feed-post {
        border-radius: 14px;
    }
}


/* ---------- 🏅 Märket vid namnet (community/_name_badge.html) ---------- */

.name-badge {
    display: inline-block;
    margin-left: 1px;

    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    vertical-align: -1px;

    transition: transform .15s ease;
}

.name-badge:hover {
    transform: scale(1.2);
}

.name-badge:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

/* I profilrubriken lite större */
.profile-identity h1 .name-badge {
    font-size: .8em;
    vertical-align: .05em;
}

/* 👥 Rollen vid namnet: 🏪 Ägare · Bonanza / 🎬 Kreatör (main/roles.py) */
.role-chip {
    display: inline-block;   /* inte flex: text-overflow (…) fungerar bara på block */
    box-sizing: border-box;
    max-width: 180px;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: 1px;

    background: rgb(var(--shade-rgb) / 0.07);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

a.role-chip:hover {
    background: rgba(255, 111, 0, .12);
    color: var(--orange-text);
}

/* 👤 Profilkortet vid hover (community/_profile_card.html, profile_card.js) */
.profile-card {
    position: fixed;
    z-index: 1200;
    width: 300px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgb(var(--shade-rgb) / 0.1);
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 14px 40px rgb(0 0 0 / .18);
    animation: profile-card-in .14s ease-out;
}

:root[data-animations="off"] .profile-card {
    animation: none;
}

@keyframes profile-card-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.profile-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-card-avatar .avatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
}

.profile-card-who {
    min-width: 0;
}

.profile-card-name {
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.profile-card-name:hover {
    text-decoration: underline;
}

.profile-card-sub {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
}

.profile-card-avatar .avatar-restaurant {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
}

.profile-card-role .role-chip {
    max-width: 210px;
    margin: 3px 0 0;
}

.profile-card-regular {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.profile-card-regular a {
    color: var(--dark-text);
    font-weight: 600;
    text-decoration: none;
}

.profile-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.profile-card-stats strong {
    color: var(--dark-text);
}

.profile-card-relation {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.profile-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.profile-card-actions > * {
    flex: 1;
    justify-content: center;
    text-align: center;
}

/* 🏆 Stamgäst hos … på profilen (main/regulars.py) */
.profile-regular {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

.profile-regular a {
    color: var(--dark-text);
    font-weight: 600;
    text-decoration: none;
}

.profile-regular a:hover {
    color: var(--orange-text);
}

.profile-identity > .role-chip {
    max-width: 100%;
    margin: 4px 0 2px;
    font-size: 13px;
}

@media (max-width: 480px) {
    .role-chip {
        max-width: 130px;
    }

    .profile-identity > .role-chip {
        max-width: 100%;
    }
}


/* ---------- "Visa vid mitt namn" (community/_show_badge_form.html) ---------- */

.show-badge-form {
    margin: 0;
}

.show-badge-btn {
    padding: 5px 11px;
    border-radius: 999px;

    background: var(--pure-white);
    border: 1px solid rgba(255, 111, 0, .4);

    color: var(--orange-text);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;

    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.show-badge-btn:hover {
    background: var(--orange-soft);
}

.show-badge-btn.is-shown {
    background: var(--hype-orange);
    border-color: var(--hype-orange);
    color: #fff;
}

.show-badge-btn:disabled {
    opacity: .6;
    cursor: wait;
}

/* I profilens märkesrutor och i notisen */
.profile-badge .show-badge-form,
.profile-badge .claim-badge-form {
    margin-top: 8px;
}


/* ---------- 🎁 Hämta ett märke (community/_claim_badge_form.html, _claim_banner.html) ---------- */

.claim-badge-btn {
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;

    background: var(--hype-orange);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;

    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.claim-badge-btn:hover {
    transform: translateY(-1px);
}

.claim-badge-btn:disabled {
    cursor: wait;
    opacity: .7;
}

.claim-badge-btn.is-claimed {
    background: var(--green-engaging);
    opacity: 1;
    cursor: default;
}

/* Märken som går att hämta lyser i stället för att vara grå */
.profile-badge.is-claimable {
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 1px var(--hype-orange);
}

.claim-banner {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;

    background:
        radial-gradient(circle at top left, rgba(255, 111, 0, .14), transparent 60%),
        var(--pure-white);
    border: 1px solid rgba(255, 111, 0, .3);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.claim-banner-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 6px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
}

.claim-banner-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.claim-banner-text strong {
    color: var(--dark-text);
    font-size: 15px;
}

.claim-banner-text span {
    color: var(--text-muted);
    font-size: 13px;
}

.claim-banner .claim-badge-form {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .claim-banner { flex-wrap: wrap; }
    .claim-banner .claim-badge-form { width: 100%; }
    .claim-banner .claim-badge-btn { width: 100%; padding: 10px; }
}


/* ---------- 🏅 Nytt märke (feed.js → celebrate) ---------- */

.badge-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 10000;   /* över bottenmenyn */

    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 14px;

    width: max-content;
    max-width: calc(100vw - 32px);
    border-radius: 16px;

    background: var(--pure-white);
    border: 1px solid rgba(255, 111, 0, .35);
    box-shadow: 0 14px 34px rgba(16, 24, 40, .18);

    transform: translate(-50%, 0);
    animation: badge-toast-in .35s ease-out;
}

.badge-toast-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    border-radius: inherit;

    color: var(--dark-text);
    text-decoration: none;
}

.badge-toast-link:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.badge-toast.is-leaving {
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity .3s ease, transform .3s ease;
}

.badge-toast-emoji {
    font-size: 30px;
    line-height: 1;
}

/* ⭕ Ring-märke: emojin i ringen */
.badge-toast-emoji.avatar-ring {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 4px;
    border-radius: 50%;
    font-size: 24px;
}

.badge-toast-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.badge-toast-text small {
    color: var(--orange-text);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge-toast-text strong {
    font-size: 16px;
    font-weight: 900;
}

.badge-toast-text span {
    color: var(--text-muted);
    font-size: 13px;
}

@keyframes badge-toast-in {
    from { opacity: 0; transform: translate(-50%, 16px) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Ovanför bottenmenyn på mobil */
@media (max-width: 768px) {
    .badge-toast {
        bottom: calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom));
    }
}

/* Smal skärm: knappen under texten */
@media (max-width: 480px) {
    .badge-toast {
        flex-wrap: wrap;
        padding-bottom: 12px;
    }

    .badge-toast .show-badge-form {
        margin-left: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .badge-toast {
        animation: none;
    }
}

/* 📣 Sponsrad plats (partials/sponsored_card.html) — samma kort som taggen i inläggen (.post-tag-card),
   alltid märkt "Sponsrad". Står högst en gång per sida (flödet "Alla" och områdessidan), aldrig i
   Trendigt eller topplistorna. */
.sponsored-card {
    padding: 12px 16px 16px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--shade-rgb) / 0.06);
}

.sponsored-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sponsored-card-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sponsored-card-why {
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: underline;
}

.sponsored-card-why:hover {
    color: var(--dark-text);
}

/* Kortet står i rutan, inte i ett inlägg: utan inläggets marginaler (även mobilens) */
.sponsored-card .post-tag-card {
    margin: 0;
}

@media (max-width: 520px) {
    .sponsored-card {
        padding: 12px 14px 14px;
        border-radius: 14px;
    }
}


/* =====================================================
   ✨ INLÄGGSKORTET 2026 (community/post_card.html) — Instagram + Facebook
   - Ring runt profilbilden (som stories), ⋯ som en rund knapp.
   - Bild/video infälld med rundade hörn, 🏪 stället på bilden, prickarna som ett orange streck.
   - Knapparna som ikoner: Gilla · Kommentera · Dela … ❤️ (Vill testa/Vill besöka) längst till höger.
     Dator (≥ 768 px): "Gilla · 24", "Kommentera · 6".
   - "Gillas av …", bildtexten med namnet först, rätten som ett mjukt orange kort (_post_tag_card.html)
     och en förhandstitt på kommentarerna med en skrivrad.
   - Utan egen bild: texten först, rätten stort (16:10) med 🏅 "Värt hajpen?" och Hajpa/Vill testa
     (_post_dish_actions.html, samma .mh-hype som korten — eldgradienten när man hajpat).
   - Restaurangens taggkort (.post-tag-card.is-place) är som förut, bara linjerat med bilden.
   Färgerna är sajtens variabler, så mörkt tema följer med.
===================================================== */

.feed-post {
    border-radius: 26px;
    border-color: var(--border);
    box-shadow: 0 10px 30px rgba(30, 42, 68, .08);
}

:root[data-theme="dark"] .feed-post {
    box-shadow: 0 10px 30px rgb(0 0 0 / .35);
}

.feed-post .post-header {
    gap: 10px;
    padding: 14px 6px 12px 14px;
}

/* ⭕ Ringen runt profilbilden — en märkesring (.avatar-ring) har sin egen, restaurangen en neutral */
.feed-post .post-avatar-link {
    flex: none;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-yellow), var(--hype-orange) 55%, #E8520C);
}

.feed-post .post-avatar-link:has(.avatar-ring) {
    padding: 0;
    background: none;
}

.feed-post .post-avatar-link:has(.avatar-restaurant) {
    background: var(--border);
}

.feed-post .post-avatar-link .avatar:not(.avatar-ring) {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 2px var(--pure-white);
}

.feed-post .post-author {
    font-size: 15px;
}

.feed-post .post-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.post-sub-place {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.post-sub-pin {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feed-post .post-permalink {
    color: inherit;
}

.feed-post .post-menu-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--dark-text);
}

.feed-post .post-menu-btn svg {
    fill: currentColor;
}

/* Texten först (inlägg utan egen bild) */
.feed-post > .post-text {
    padding: 0 16px 12px;
}

/* 📝 Bildtexten under knapparna, namnet först */
.post-caption {
    padding: 4px 16px 0;
    color: var(--dark-text);
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.post-caption-author {
    margin-right: 4px;
    color: var(--dark-text);
    font-weight: 800;
}

.post-caption-author:hover {
    text-decoration: underline;
}

.post-caption .post-text {
    display: inline;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.post-caption .post-edit {
    padding: 8px 0 0;
}

/* ---------- 🖼️ Bilden: infälld, rundade hörn ---------- */

.feed-post .post-media {
    position: relative;
    margin: 0 10px;
}

.feed-post .post-image,
.feed-post .post-carousel {
    margin-top: 0;
}

.feed-post .post-image,
.feed-post .post-carousel-track {
    border-radius: 20px;
}

.feed-post .post-carousel-slide {
    border-radius: 0;
}

.feed-post .post-carousel-count {
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background: rgb(18 19 22 / .62);
    font-size: 12px;
}

.feed-post .post-carousel-dots {
    padding-top: 10px;
}

.feed-post .post-carousel-dots span {
    border-radius: 3px;
    transition: width .2s ease, background .2s ease;
}

.feed-post .post-carousel-dots span.is-active {
    width: 18px;
    transform: none;
}

.feed-post .post-carousel-btn {
    width: 40px;
    height: 40px;
    background: rgb(255 255 255 / .94);
    box-shadow: 0 4px 12px rgb(0 0 0 / .15);
}

/* 🏪 Stället på bilden (som en produkttagg på Instagram) */
.post-media-place {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 24px);
    height: 34px;
    padding: 0 12px 0 10px;
    box-sizing: border-box;

    border-radius: 999px;
    background: rgb(18 19 22 / .72);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.post-media-place span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-media-place svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-media-place:hover {
    background: rgb(18 19 22 / .86);
    color: #fff;
    text-decoration: none;
}

/* Karusellen har prickarna under bilden — taggen ligger ovanför dem */
.feed-post .post-media:has(.post-carousel) .post-media-place {
    bottom: 28px;
}

.feed-post .post-video {
    margin: 0 10px;
    border-radius: 20px;
}

/* ---------- Knapparna: ikoner, som Instagram ---------- */

.feed-post .feed-post-actions {
    gap: 2px;
    margin-top: 0;
    padding: 4px 6px 0;
    border-top: 0;
}

.feed-post .feed-post-actions .mh-hype.post-like,
.feed-post .feed-post-actions .mh-comment,
.feed-post .feed-post-actions .mh-share--icon {
    gap: 6px;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;

    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 700;
}

.feed-post .feed-post-actions .mh-hype.post-like:hover,
.feed-post .feed-post-actions .mh-comment:hover,
.feed-post .feed-post-actions .mh-share--icon:hover {
    background: var(--surface-2);
    color: var(--dark-text);
}

/* Gillat: orange text och reaktionen som ikon (ingen gradient — den hör till Hajpa) */
.feed-post .feed-post-actions .mh-hype.post-like.active,
.feed-post .feed-post-actions .mh-hype.post-like.active:hover {
    background: transparent;
    box-shadow: none;
    color: var(--orange-text);
}

.feed-post .feed-post-actions .post-like-icon,
.feed-post .feed-post-actions .mh-hype.active .post-like-icon {
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    box-shadow: none;
    font-size: 22px;
    line-height: 1;
}

.feed-post .feed-post-actions .mh-comment-icon {
    width: 23px;
    height: 23px;
}

/* Siffran direkt efter ikonen — utan korten strecket (food_cards.css .mh-hype-count) */
.feed-post .feed-post-actions .post-hype-count,
.feed-post .feed-post-actions .mh-hype.active .post-hype-count {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.feed-post .feed-post-actions .mh-comment[aria-expanded="true"] {
    background: rgba(59, 130, 246, .08);
    color: var(--blue-text);
}

.feed-post .feed-post-actions .mh-share {
    margin-left: 0;
}

.feed-post .feed-post-actions .mh-share-icon {
    width: 22px;
    height: 22px;
}

/* "Gilla" och "Kommentera" står bara på datorn */
.feed-post .post-hype-label,
.feed-post .post-action-label {
    display: none;
}

/* ❤️ Spara (community/_post_save_button.html) — inte den gamla flytande .save-btn */
.feed-post .save-btn.post-save {
    position: static;
    z-index: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: color .15s ease, background .15s ease;
}

.feed-post .save-btn.post-save .save-icon,
.feed-post .save-btn.post-save.active .save-icon {
    display: inline-flex;
    font-size: inherit;
    transform: none;
}

.feed-post .save-btn.post-save svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linejoin: round;
}

.feed-post .save-btn.post-save--icon {
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dark-text);
}

.feed-post .save-btn.post-save--icon:hover {
    background: var(--surface-2);
}

.feed-post .save-btn.post-save.active {
    background: transparent;
    box-shadow: none;
    color: var(--heart-red);
}

.feed-post .save-btn.post-save.active svg {
    fill: currentColor;
}

.feed-post .save-btn.post-save.active.tried {
    color: var(--green-text);
}

/* 👍 Gillas av … */
.post-likers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 16px 0;
    color: var(--dark-text);
    font-size: 13.5px;
    line-height: 1.35;
}

.post-likers a {
    color: inherit;
}

.post-likers-avatar {
    display: inline-flex;
}

.post-likers-avatar .avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--pure-white);
}

/* ---------- 🍽️ Rätten: mjukt orange kort (restaurangen är som förut) ---------- */

.feed-post .post-tag-card {
    margin: 12px 10px 0;
}

.feed-post .post-tag-card.is-food:not(.is-hero) {
    gap: 12px;
    padding: 10px 12px 10px 10px;
    border-radius: 20px;
    border-color: rgb(255 111 0 / .22);
    background: var(--orange-soft);
    box-shadow: none;
}

.post-tag-card.is-food .post-tag-card-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.post-tag-card-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.post-tag-card-heat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--pure-white);
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.post-tag-card.is-food:not(.is-hero) .post-tag-card-cta {
    padding: 0 6px 0 12px;
    background: var(--pure-white);
}

.post-tag-card.is-food:not(.is-hero) .post-tag-card-cta-label {
    display: inline;
}

/* Stort (inlägget har ingen egen bild): fotot 16:10, 🔥 nere till höger, namnet stort */
.feed-post .post-tag-card.is-food.is-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 22px;
}

.post-tag-card.is-food.is-hero .post-tag-card-media {
    width: auto;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 0;
}

.post-tag-card.is-food.is-hero .post-tag-card-hype {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 12px;
    padding: 6px 12px;
    background: rgb(18 19 22 / .72);
    font-size: 14px;
}

.post-tag-card.is-food.is-hero .post-tag-card-text {
    gap: 4px;
    padding: 14px 16px 16px;
}

.post-tag-card.is-food.is-hero .post-tag-card-text strong {
    font-size: 22px;
    letter-spacing: -.01em;
}

.post-tag-card.is-food.is-hero .post-tag-card-meta {
    font-size: 14px;
}

/* 🏅 "82 % värt hajpen" (main/verdict.py, från SHOW_MIN svar) */
.post-tag-card-verdict {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    color: var(--green-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.post-tag-card-verdict-bar {
    flex: 1;
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--surface-2);
}

.post-tag-card-verdict-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--green-engaging);
}

/* 🔥 Hajpa rätten + ❤️ Vill testa under det stora kortet */
.post-dish-actions {
    display: flex;
    gap: 8px;
    padding: 12px 10px 0;
}

.post-dish-actions .mh-hype,
.feed-post .post-dish-actions .post-dish-save {
    flex: 1;
    justify-content: center;
    height: 46px;
    font-size: 15px;
}

.post-dish-actions .mh-hype {
    font-weight: 800;
}

/* Hajpad: samma eldgradient som Hajpad-knappen på korten (cards.css --hajpad-glow) */
.post-dish-actions .mh-hype.active,
.post-dish-actions .mh-hype.active:hover {
    border-color: transparent;
    background: linear-gradient(135deg, #ff7a1a 0%, #e8520c 45%, #d4430b 100%);
    box-shadow: 0 6px 18px rgba(232, 82, 12, .35);
    color: #fff;
}

.feed-post .save-btn.post-dish-save {
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--dark-text);
    font-weight: 700;
}

.feed-post .save-btn.post-dish-save:hover {
    background: var(--surface-3);
}

.feed-post .save-btn.post-dish-save svg {
    width: 19px;
    height: 19px;
    color: var(--heart-red);
}

.feed-post .save-btn.post-dish-save .save-text {
    font-size: 15px;
}

.feed-post .save-btn.post-dish-save.active {
    border-color: rgb(255 45 85 / .35);
    background: rgb(255 45 85 / .08);
    color: var(--dark-text);
}

/* ---------- 💬 Förhandstitten på kommentarerna ---------- */

.post-comment-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 16px 14px;
}

.post-comments-more {
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.post-comments-more:hover {
    color: var(--dark-text);
}

.post-preview-comment {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    color: var(--dark-text);
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.post-comment-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: text;
}

.post-comment-prompt-avatar {
    display: inline-flex;
}

.post-comment-prompt-avatar .avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
    box-shadow: none;
}

.post-comment-prompt-field {
    flex: 1;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 14px;
}

.post-comment-prompt:hover .post-comment-prompt-field {
    border-color: var(--border-strong);
}

/* Tråden öppen (comments.js) → förhandstitten behövs inte */
.feed-post:has(.feed-post-comments [data-comments]:not([hidden])) .post-comment-preview {
    display: none;
}

/* ---------- 🖥️ Dator ---------- */

@media (min-width: 768px) {

    .feed-post {
        border-radius: 28px;
    }

    .feed-post .post-header {
        padding: 16px 8px 12px 18px;
    }

    .feed-post .post-avatar-link .avatar:not(.avatar-ring) {
        width: 44px;
        height: 44px;
    }

    .feed-post .post-media,
    .feed-post .post-video,
    .feed-post .post-tag-card {
        margin-left: 12px;
        margin-right: 12px;
    }

    .feed-post .post-image,
    .feed-post .post-carousel-track {
        border-radius: 22px;
    }

    .feed-post .post-carousel-slide {
        border-radius: 0;
    }

    .feed-post > .post-text,
    .post-caption,
    .post-likers,
    .post-comment-preview {
        padding-left: 18px;
        padding-right: 18px;
    }

    .feed-post .feed-post-actions {
        padding: 4px 8px 0;
    }

    .post-dish-actions {
        gap: 10px;
        padding: 12px 12px 0;
    }

    /* "Gilla · 24", "Kommentera · 6" */
    .feed-post .post-hype-label,
    .feed-post .post-action-label {
        display: inline;
    }

    .feed-post .post-hype-label + .post-hype-count:not(:empty)::before,
    .feed-post .post-action-label + span::before {
        content: "· ";
    }

    .post-tag-card.is-food.is-hero .post-tag-card-text strong {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feed-post .post-carousel-dots span,
    .feed-post .save-btn.post-save {
        transition: none;
    }
}

/* ===== community/css/feedback.css ===== */
/* =========================
   💬 TYCK TILL (community/templates/community/feedback.html) + 🔥 hälsningen från teamet
   (main/templates/partials/team_note.html, används även på Om-sidan och Nytt i appen)
========================= */

.feedback-page {
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 20px 16px 90px;
    color: var(--dark-text);
}

.feedback-head h1 {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.01em;
}

.feedback-head p {
    margin: 0 0 18px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ---------- Hälsningen från MatHajp-teamet ---------- */

.team-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 111, 0, 0.08);
    border: 1px solid rgba(255, 111, 0, 0.18);
}

.team-note-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    background: rgba(255, 111, 0, 0.14);
}

.team-note-title {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hype-orange);
}

.team-note p {
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}

.team-note-actions {
    margin-top: 10px;
}

.team-note-actions a {
    font-weight: 700;
    color: var(--hype-orange);
}

/* ---------- ✨ Orange prick på "Nytt i appen" i menyn (news.js sätter .has-new) ---------- */

.site-links a.has-new::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--hype-orange);
}

/* ---------- Nytt i appen (main/templates/news/app_updates.html) ---------- */

.news-month {
    margin-top: 26px;
}

.news-month h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: capitalize;
}

.news-from-feedback {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    line-height: 1.5;
    background: rgba(255, 111, 0, 0.08);
}

.news-from-feedback a {
    font-weight: 800;
    color: var(--hype-orange);
}

/* ---------- Formuläret ---------- */

.feedback-card {
    padding: 18px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / 0.08);
}

.feedback-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.feedback-kinds legend {
    margin-bottom: 8px;
    padding: 0;
    font-weight: 800;
}

.feedback-kind {
    position: relative;
    cursor: pointer;
}

.feedback-kind input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.feedback-kind span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    background: rgb(var(--ink-rgb) / 0.05);
    border: 1px solid rgb(var(--ink-rgb) / 0.10);
}

.feedback-kind input:checked + span {
    color: #fff;
    background: var(--hype-orange);
    border-color: var(--hype-orange);
}

.feedback-kind input:focus-visible + span {
    outline: 2px solid var(--hype-orange);
    outline-offset: 2px;
}

.feedback-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 800;
}

.feedback-card textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgb(var(--ink-rgb) / 0.14);
    background: var(--pure-white);
    color: inherit;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.feedback-card textarea:focus {
    outline: 2px solid var(--hype-orange);
    outline-offset: 1px;
}

.feedback-hint {
    margin: 10px 0 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.feedback-hint a {
    color: var(--hype-orange);
    font-weight: 700;
}

.feedback-error {
    margin: 8px 0 0;
    color: #c62828;
    font-weight: 700;
    font-size: 0.92rem;
}

.feedback-card--login {
    text-align: center;
}

.feedback-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0;
}

/* ---------- Dina meddelanden ---------- */

.feedback-mine {
    margin-top: 28px;
}

.feedback-mine h2 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 900;
}

.feedback-item {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / 0.08);
    scroll-margin-top: 90px;
}

.feedback-item:target {
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.15);
}

.feedback-item-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.feedback-item-top time {
    margin-left: auto;
}

.feedback-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    color: var(--dark-text);
    background: rgb(var(--ink-rgb) / 0.06);
}

.feedback-status {
    font-weight: 700;
}

.feedback-item--answered .feedback-status {
    color: #2e7d32;
}

.feedback-text {
    margin: 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.feedback-reply {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 111, 0, 0.08);
    border-left: 4px solid var(--hype-orange);
}

.feedback-reply p {
    margin: 4px 0 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.feedback-shipped {
    display: inline-block;
    margin-top: 10px;
    font-weight: 800;
    color: var(--hype-orange);
}

.feedback-empty {
    padding: 18px;
    text-align: center;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .feedback-page {
        padding: 14px 12px 90px;
    }
}

/* ===== owners/css/owners.css ===== */
/* =====================================================
   RESTAURANGÄGARE (owners/)
   - Inlägg som restaurangen + "Posta som …" i skrivrutan
   - "✔ Verifierad" / "Äger du …?" på restaurangsidan
   - Ägarpanelen (dashboard.html), mina restauranger, ansökan
   Korten på ägarsidorna kommer från settings.css (.settings-card),
   formulären från suggest_food.css.
===================================================== */


/* ---------- Inlägg som restaurangen (post_card.html) ---------- */

.feed-post.is-restaurant-post {
    border-color: rgba(0, 168, 101, .22);
}

/* Restauranger har fyrkantig bild, personer rund — syns direkt vem som skriver */
.avatar.avatar-restaurant {
    border-radius: 12px;
}

.avatar-initial.avatar-restaurant {
    background: rgba(0, 168, 101, .12);
    font-size: 22px;
}

.post-restaurant-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;

    background: rgba(0, 168, 101, .1);
    color: var(--green-text);

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}


/* ---------- "Posta som …" i skrivrutan (composer.html) ---------- */

.composer-as-restaurant {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 10px 0 0 56px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;

    background: var(--soft-gray);
    color: var(--dark-text);

    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease;
}

/* Riktig kryssruta, osynlig — rutan ritas av .composer-as-restaurant-box */
.composer-as-restaurant input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.composer-as-restaurant-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    border-radius: 50%;

    border: 2px solid var(--border-strong);
    background: var(--pure-white);
    color: transparent;

    font-size: 12px;
    font-weight: 800;
}

.composer-as-restaurant:has(input:checked) {
    background: rgba(0, 168, 101, .1);
    color: var(--green-text);
}

.composer-as-restaurant input:checked + .composer-as-restaurant-box {
    border-color: #00a865;
    background: #00a865;
    color: #fff;
}

.composer-as-restaurant input:focus-visible + .composer-as-restaurant-box {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}


/* ---------- Restaurangsidan ---------- */

.rd-verified {
    background: rgba(0, 168, 101, .1);
    color: var(--green-text);
    font-weight: 700;
}

/* "Äger eller driver du …?" — liten ruta under knapparna */
.rd-claim {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 16px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;

    background: linear-gradient(135deg, var(--orange-soft), var(--surface-cream));
    border: 1px dashed rgba(255, 111, 0, .35);

    color: var(--dark-text);
    text-decoration: none;

    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.rd-claim:hover {
    border-style: solid;
    border-color: var(--hype-orange);
    background: var(--orange-soft);
}

.rd-claim:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.rd-claim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 38px;
    height: 38px;
    border-radius: 11px;

    background: var(--pure-white);
    box-shadow: 0 2px 6px rgba(255, 111, 0, .15);
    font-size: 19px;
}

.rd-claim-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.rd-claim-text strong {
    font-size: 14px;
    font-weight: 700;
}

.rd-claim-text small {
    color: var(--text-muted);
    font-size: 12.5px;
}

.rd-claim-arrow {
    flex-shrink: 0;
    color: var(--hype-orange);
    font-size: 18px;
    font-weight: 800;
    transition: transform .2s ease;
}

.rd-claim:hover .rd-claim-arrow {
    transform: translateX(3px);
}


/* ---------- Ägarsidorna: gemensamt ---------- */

.owner-muted {
    color: var(--text-muted);
    font-size: 13px;
}

.owner-page .settings-card h2 .saved-count {
    vertical-align: middle;
}

/* Knappar i listorna: små piller, röd variant för "ta bort" */
.owner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    box-sizing: border-box;

    border: 1px solid rgb(var(--ink-rgb) / .14);
    background: var(--pure-white);
    color: var(--dark-text);

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.owner-btn:hover {
    border-color: var(--hype-orange);
    color: var(--orange-text);
}

.owner-btn--danger {
    border-color: rgba(239, 68, 68, .3);
    color: var(--red-text);
}

.owner-btn--danger:hover {
    border-color: #ef4444;
    background: rgba(239, 68, 68, .07);
    color: var(--red-text);
}

.owner-page .owner-note {
    margin: -8px 0 18px;
    padding: 10px 14px;
    border-radius: 12px;

    background: var(--soft-gray);
    color: var(--text-2);
    font-size: 13px;
}


/* ---------- Rubriken (dashboard.html) ---------- */

.owner-hero {
    margin-bottom: 16px;
    padding: 24px;
    border-radius: 22px;

    background:
        radial-gradient(circle at 100% 0%, rgba(255, 111, 0, .10), transparent 55%),
        var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 4px 14px rgba(16, 24, 40, .05);
}

.owner-hero-top {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Restaurangens bild: liggande och stor nog att se vad det är */
.owner-hero-img {
    flex-shrink: 0;
    width: 148px;
    height: 112px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
}

.owner-hero-img--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;

    background: var(--soft-gray);
    border: 2px dashed rgb(var(--ink-rgb) / .18);
    box-shadow: none;

    color: var(--text-muted);
    font-size: 34px;
    text-decoration: none;
}

.owner-hero-img--empty small {
    font-size: 12px;
    font-weight: 700;
}

.owner-hero-img--empty:hover {
    border-color: var(--hype-orange);
    color: var(--orange-text);
}

.owner-hero-text {
    flex: 1;
    min-width: 0;
}

.owner-eyebrow {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;

    background: var(--orange-soft);
    color: var(--orange-text);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.owner-hero-title {
    margin: 8px 0 6px;
    color: var(--dark-text);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.owner-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 4px;

    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}

.owner-verified {
    color: var(--green-text);
}

.owner-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.owner-hero-actions > * {
    justify-content: center;
}

.owner-hero-nav {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgb(var(--ink-rgb) / .07);
}

.owner-page .owner-subtitle {
    margin: 24px 0 12px;
    color: var(--dark-text);
    font-size: 1rem;
    font-weight: 800;
}

.owner-page .owner-empty {
    margin: 0;
    color: var(--text-muted);
}


/* ---------- Siffror ---------- */

.owner-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));   /* 5 siffror */
    gap: 10px;
    margin-bottom: 6px;
}

.owner-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 14px 16px;
    border-radius: 16px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

.owner-stat strong {
    color: var(--dark-text);
    font-size: 1.35rem;
    font-weight: 800;
}

.owner-stat span {
    color: var(--text-muted);
    font-size: 13px;
}

/* 📸 Dela på Instagram: förhandsvisningen (9:16) bredvid texten, staplat på mobil */
.owner-share-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.owner-share-preview {
    flex: 0 0 auto;
    width: 120px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    object-fit: cover;
    background: var(--surface-2);
    box-shadow: 0 4px 14px rgb(0 0 0 / .18);
}

.owner-share-text {
    min-width: 0;
}

.owner-share-text .share-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.owner-share-text .share-image-btn[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}

@media (max-width: 520px) {
    .owner-share-card {
        align-items: flex-start;
    }

    .owner-share-preview {
        width: 96px;
    }
}

.owner-page .owner-stats-note {
    margin: 0 0 16px;
}


/* ---------- Listor: rätter, taggade inlägg, restauranger ---------- */

.owner-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.owner-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgb(var(--ink-rgb) / .06);
}

.owner-row:first-child {
    border-top: none;
}

.owner-row-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--soft-gray);
}

.owner-row-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.owner-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.owner-row-title {
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: none;
}

.owner-row-title:hover {
    color: var(--hype-orange);
}

.owner-row-title small {
    color: var(--text-faint);
    font-weight: 500;
}

.owner-row-info > small {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.owner-row-text {
    overflow-wrap: anywhere;
}

.owner-row-info > .owner-row-missing {
    color: var(--orange-text);
    font-weight: 600;
}

.owner-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.owner-row-actions form {
    margin: 0;
}

.owner-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}


/* ---------- Rätterna: kort i rutnät ---------- */

.owner-dishes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.owner-dish {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    border-radius: 16px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);

    transition: border-color .2s ease, box-shadow .2s ease;
}

.owner-dish:hover {
    border-color: rgba(255, 111, 0, .35);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .08);
}

.owner-dish-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--soft-gray);
}

.owner-dish-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.owner-dish-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;

    padding: 3px 8px;
    border-radius: 999px;

    background: rgb(var(--orange-soft-rgb) / .95);
    color: var(--orange-text);

    font-size: 11.5px;
    font-weight: 700;
}

.owner-dish-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding: 12px 14px 4px;
}

.owner-dish-name {
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.owner-dish-name:hover {
    color: var(--hype-orange);
}

.owner-dish-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;

    color: var(--text-muted);
    font-size: 13px;
}

.owner-dish-meta strong {
    color: var(--dark-text);
}

.owner-dish-stats {
    display: flex;
    gap: 12px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.owner-dish-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px 14px;
}

.owner-dish-actions form {
    margin: 0;
}

.owner-dish-actions > * {
    flex: 1;
}

.owner-dish-actions .owner-btn {
    width: 100%;
    padding: 0 10px;
}

/* 🙈 Dold rätt: blekt kort, bilden i gråskala */
.owner-dish.is-hidden {
    border-style: dashed;
    background: var(--soft-gray);
}

.owner-dish.is-hidden .owner-dish-media img {
    filter: grayscale(1);
    opacity: .55;
}

.owner-dish.is-hidden .owner-dish-name {
    color: var(--text-muted);
}

.owner-dish-badge--hidden {
    background: rgb(var(--ink-rgb) / .85);
    color: #fff;
}

/* ⏳ Begränsad tid: chipet uppe till vänster (partials/availability_chip.html),
   datumen under namnet, "🔁 Kör igen" när tiden gått ut */
.owner-dish-time {
    position: absolute;
    top: 8px;
    left: 8px;
}

.owner-dish-when {
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
}

.owner-dish-again {
    padding: 10px 14px 0;
}

.owner-dish-again .owner-btn {
    width: 100%;
}

.owner-dish.is-ended .owner-dish-media img {
    filter: grayscale(.6);
    opacity: .8;
}

.owner-btn--show {
    border-color: rgba(0, 168, 101, .35);
    color: var(--green-text);
}

.owner-btn--show:hover {
    border-color: #00a865;
    background: rgba(0, 168, 101, .08);
    color: var(--green-text);
}

/* Sista kortet: lägg till en ny rätt */
.owner-dish--add {
    border: 2px dashed rgba(255, 111, 0, .35);
    background: var(--surface-cream);
}

.owner-dish--add a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-height: 220px;
    padding: 20px;

    color: var(--dark-text);
    text-align: center;
    text-decoration: none;
}

.owner-dish--add:hover {
    border-style: solid;
    border-color: var(--hype-orange);
}

.owner-dish-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--orange-soft);
    font-size: 20px;
}

.owner-dish--add small {
    color: var(--text-muted);
    font-size: 12.5px;
}


/* ---------- Inlägg från gäster ---------- */

.owner-guest-posts {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.owner-guest-post {
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);
}

.owner-guest-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.owner-guest-avatar {
    display: inline-flex;
}

.owner-guest-avatar .avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

.owner-guest-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.owner-guest-name {
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: none;
}

.owner-guest-name:hover {
    text-decoration: underline;
}

.owner-guest-who small {
    color: var(--text-muted);
    font-size: 12.5px;
}

.owner-guest-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 10px;
}

.owner-guest-content {
    flex: 1;
    min-width: 0;
}

.owner-guest-food {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 999px;

    background: rgba(255, 111, 0, .1);
    color: var(--orange-text);

    font-size: 13px;
    font-weight: 600;
}

.owner-guest-text {
    margin: 0;
    color: var(--dark-text);
    font-size: 14.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.owner-guest-img {
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    border-radius: 12px;
    object-fit: cover;
}

/* 🎬 Era reels (dashboard.html #reels) */
.owner-reels {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.owner-reel {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.owner-reel img,
.owner-reel-blank {
    flex-shrink: 0;
    width: 54px;
    height: 96px;
    border-radius: 10px;
    object-fit: cover;
    background: #111;
}

.owner-reel-blank {
    display: grid;
    place-items: center;
    font-size: 20px;
}

.owner-reel-text {
    flex: 1;
    min-width: 0;
}

.owner-reel-text strong,
.owner-reel-text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-reel-text small {
    color: var(--text-muted);
}

/* 💡 Förslag från gäster: rätter som saknas (owners/views.py → _guest_suggestions) */
.owner-suggestions {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.owner-suggestion {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 111, 0, .18);
    background: var(--surface-cream);
}

.owner-suggestion img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-warm);
}

.owner-suggestion-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 160px;
}

.owner-suggestion-body strong {
    color: var(--dark-text);
    font-size: 16px;
    overflow-wrap: anywhere;
}

.owner-suggestion-body small,
.owner-suggestion-comment {
    color: var(--text-muted);
    font-size: 13px;
}

.owner-suggestion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 560px) {
    .owner-suggestion-actions {
        width: 100%;
    }

    .owner-suggestion-actions form {
        flex: 1;
    }

    .owner-suggestion-actions .owner-btn {
        width: 100%;
    }
}

.owner-guest-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgb(var(--ink-rgb) / .06);
}

.owner-guest-actions form {
    margin: 0;
}


/* ---------- 🕒 Öppettider ---------- */

.owner-chip-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--hype-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.owner-hours {
    display: grid;
    margin-bottom: 12px;
    border-radius: 14px;
    border: 1px solid rgb(var(--ink-rgb) / .1);
    overflow: hidden;
}

.owner-hours-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 14px;
    border-top: 1px solid rgb(var(--ink-rgb) / .06);
}

.owner-hours-row:first-child {
    border-top: none;
}

.owner-hours-row.is-closed {
    background: var(--soft-gray);
}

.owner-hours-row.has-error {
    background: var(--red-soft);
}

.owner-hours-day {
    color: var(--dark-text);
    font-weight: 700;
}

.owner-hours-times {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-faint);
}

.owner-hours-times input {
    width: 100%;
    max-width: 120px;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;

    border: 1px solid rgb(var(--ink-rgb) / .14);
    border-radius: 10px;
    background: var(--pure-white);

    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.owner-hours-times input:focus {
    outline: none;
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .15);
}

.owner-hours-times input:disabled {
    opacity: .35;
}

.owner-hours-closed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.owner-hours-closed input {
    width: 18px;
    height: 18px;
    accent-color: var(--hype-orange);
}

.owner-hours-error {
    grid-column: 1 / -1;
    margin: 0;
}

.owner-hours-copy {
    margin-bottom: 20px;
}

.owner-hours-note {
    margin-bottom: 20px;
}

.owner-hours-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* ---------- Formulären: nuvarande bild ---------- */

.owner-current-image {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* Restaurangens bild är liggande (1200 × 600) */
.owner-current-image img {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 2 / 1;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .1);
}

.owner-current-image--square img {
    max-width: 160px;
    aspect-ratio: 1;
}

.suggest-food-form-group .owner-remove-image {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--red-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.suggest-food-form-group .owner-remove-image input {
    width: auto;
    padding: 0;
}


/* ---------- ⏳ Hur länge finns rätten? (food_form.html) ---------- */

.owner-availability {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.owner-availability legend {
    margin-bottom: 8px;
    padding: 0;
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
}

.owner-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.suggest-food-form-group .owner-choice {
    position: relative;
    display: flex;

    padding: 12px 14px;
    border-radius: 14px;

    border: 1px solid rgb(var(--ink-rgb) / .14);
    background: var(--soft-gray);

    font-weight: 400;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

/* Riktig radioknapp, osynlig — hela rutan är knappen */
.suggest-food-form-group .owner-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    opacity: 0;
}

.owner-choice:hover {
    border-color: rgb(var(--ink-rgb) / .3);
}

.owner-choice:has(input:checked) {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
}

.owner-choice:has(input:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.owner-choice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.owner-choice-text strong {
    color: var(--dark-text);
    font-size: 14px;
}

.owner-choice-text small {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.owner-dates {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.owner-dates[hidden] {
    display: none;
}

.owner-dates-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 10px;
}

.owner-date {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.suggest-food-form-group .owner-date label {
    font-size: 13px;
    font-weight: 600;
}

.owner-dates-row .suggest-food-price-dash {
    padding-bottom: 14px;
}

.owner-quick-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* ---------- 🏷️ Ny kategori (food_form.html) ---------- */

.owner-new-category {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.owner-new-category[open] {
    padding: 14px;
    border-radius: 14px;
    background: var(--surface-cream);
    border: 1px dashed rgba(255, 111, 0, .35);
}

.owner-new-category summary {
    width: fit-content;
    cursor: pointer;
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 700;
}

.owner-new-category-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
}

.suggest-food-form-group .owner-new-category-emoji input {
    font-size: 20px;
    text-align: center;
}

.owner-emoji-picks .owner-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 19px;
}


/* ---------- Ansökan (claim.html) ---------- */

.owner-claim-perks {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.owner-claim-perks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 10px 14px;
    border-radius: 14px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);

    color: var(--dark-text);
    font-size: 14px;
    line-height: 1.45;
}

.owner-claim-pending {
    text-align: center;
}

.owner-claim-pending-icon {
    font-size: 40px;
}

.owner-claim-pending h2 {
    margin: 8px 0 10px;
    color: var(--dark-text);
}

.owner-claim-pending p {
    color: var(--text-2);
    line-height: 1.6;
}


@media (max-width: 700px) {

    .owner-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Knapparna i rubriken hamnar på egen rad */
    .owner-hero-top {
        flex-wrap: wrap;
    }

    .owner-hero-actions {
        flex-direction: row;
        width: 100%;
    }

    .owner-hero-actions > * {
        flex: 1;
    }

}

@media (max-width: 520px) {

    .composer-as-restaurant {
        margin-left: 0;
    }

    /* Knapparna under texten, så namnen får plats */
    .owner-row {
        flex-wrap: wrap;
    }

    .owner-row-info {
        flex-basis: calc(100% - 68px);
    }

    .owner-row-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .owner-hero {
        padding: 18px;
    }

    .owner-hero-top {
        gap: 14px;
    }

    .owner-hero-img {
        width: 96px;
        height: 80px;
        border-radius: 14px;
    }

    .owner-hero-img--empty {
        font-size: 26px;
    }

    .owner-hero-img--empty small {
        display: none;
    }

    /* Två rätter i bredd även på mobil */
    .owner-dishes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .owner-dish-body {
        padding: 10px 10px 2px;
    }

    .owner-dish-actions {
        padding: 8px 10px 10px;
    }

    .owner-dish-again {
        padding: 8px 10px 0;
    }

    .owner-dish--add a {
        min-height: 180px;
    }

    .owner-guest-img {
        width: 76px;
        height: 76px;
    }

    .owner-guest-actions > * {
        flex: 1;
    }

    .owner-guest-actions .owner-btn {
        width: 100%;
    }

    .rd-claim-text small {
        display: none;
    }

    /* ⏳ Alltid / Begränsad tid under varandra */
    .owner-choices {
        grid-template-columns: 1fr;
    }

    /* Öppettider: dagen överst, tiderna + Stängt under */
    .owner-hours-row {
        grid-template-columns: 1fr auto;
    }

    .owner-hours-day {
        grid-column: 1 / -1;
    }

}


/* ---------- 📣 Få fler gäster att hajpa er (templates/owners/_promote.html, main/promo.py) ---------- */
.owner-promo-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 12px;
}

.owner-promo-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--soft-gray);
}

.owner-promo-card h3 {
    margin: 0;
    font-size: 1rem;
}

.owner-promo-card p {
    margin: 0;
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.45;
}

.owner-promo-qr {
    width: 150px;
    height: 150px;
    padding: 6px;
    background: #fff;           /* QR-koden ska alltid vara svart på vitt, även i mörkt tema */
    border-radius: 10px;
}

.owner-promo-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.owner-promo-badge {
    align-self: flex-start;
    max-width: 100%;
    height: auto;
}

.owner-promo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.owner-promo-code {
    width: 100%;
    min-height: 88px;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--pure-white);
    color: var(--dark-text);
    font: .8rem/1.4 ui-monospace, Menlo, Consolas, monospace;
    resize: vertical;
}

.owner-promo-code--text {
    font: inherit;
    font-size: .9rem;
}


/* =========================================================
   ⭐ 🏷️ KAMPANJER OCH 📣 SPONSRAD PLATS (owners/_premium_tools.html)
   ========================================================= */

.owner-campaigns {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.owner-campaign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;

    padding: 12px 14px;
    border-radius: 16px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);
}

.owner-campaign.is-hidden {
    border-style: dashed;
    background: var(--soft-gray);
}

.owner-campaign-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 240px;
}

.owner-campaign-body strong {
    overflow-wrap: anywhere;
}

.owner-campaign .owner-dish-badge {
    position: static;
    align-self: flex-start;
}

.owner-campaign .owner-dish-actions {
    padding: 0;
    flex: 0 1 auto;
}

.owner-campaign .owner-dish-actions .owner-btn {
    width: auto;
    padding: 0 12px;
    white-space: nowrap;
}

.owner-premium-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.owner-premium-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(var(--orange-soft-rgb) / 1);
    color: var(--orange-text);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.owner-premium-locked {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 111, 0, .45);
    background: rgb(var(--orange-soft-rgb) / .6);
}

.owner-premium-locked p {
    margin: 0 0 10px;
}

.owner-premium-locked form {
    margin: 0;
}

.owner-campaign-rules {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
}


/* 🌱 Kost och 🐕 Passar för i panelen (main/diet.py) — rutorna har samma stil som gästernas tips (detail.css) */
.owner-tag-options {
    margin-top: 8px;
}

.owner-tags-label {
    margin: 16px 0 2px;
    color: var(--dark-text);
    font-weight: 800;
}

.menu-import-diet {
    flex-wrap: wrap;
    gap: 4px 12px;
}

.owner-tag-tip-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-2);
    font-size: 24px;
}

/* ===== owners/css/stats.css ===== */
/* ============================================================
   📊 Ägarnas statistik (owners/templates/owners/stats.html)
   Diagrammen är SVG från owners/charts.py — färgerna sätts här,
   så de följer ljust/mörkt tema via tokens i main.css.
   ============================================================ */

.stats-page {
    --stat-views: var(--social-blue);
    --stat-dishes: #8b5cf6;
    --stat-hype: var(--hype-orange);
    --stat-followers: var(--heart-red);
    --stat-c0: var(--social-blue);
    --stat-c1: var(--hype-orange);
    --stat-c2: var(--green-engaging);
    --stat-c3: var(--heart-red);
    --stat-c4: var(--accent-yellow);
    --stat-c5: #8b5cf6;
    --stat-c6: #14b8a6;
    --stat-c7: var(--text-faint);
    --stat-c8: var(--surface-4);
}


/* ---------- Rubrik ---------- */

.stats-hero {
    padding: 22px 24px 18px;
    border-radius: 22px;
    background: var(--pure-white);
    border: 1px solid var(--border);
    margin-bottom: 18px;
}

.stats-back {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.stats-back:hover {
    color: var(--hype-orange);
}

.stats-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.stats-title {
    margin: 4px 0 0;
    font-size: clamp(22px, 4vw, 30px);
    line-height: 1.15;
}

.stats-plan {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.stats-plan--premium {
    background: var(--yellow-soft);
    color: var(--amber-text);
}

.stats-periods {
    margin-top: 16px;
}

.stats-chip-locked {
    opacity: .65;
}

.stats-csv {
    margin-left: auto;
}

.stats-note {
    margin: 8px 4px 22px;
    font-size: 13px;
}


/* ---------- Siffer-korten ---------- */

.stats-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1100px) {
    .stats-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 128px;
    padding: 18px 18px 46px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid var(--border);
    overflow: hidden;
}

.stat-kpi-label {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.stat-kpi-value {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 900;
    color: var(--dark-text);
    font-variant-numeric: tabular-nums;
}

.stat-kpi-note {
    color: var(--text-faint);
    font-size: 13px;
}

.stat-change {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.stat-change--up {
    background: rgb(0 168 101 / .12);
    color: var(--green-text);
}

.stat-change--down {
    background: var(--red-soft);
    color: var(--red-text);
}

.stat-spark {
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: 120px;
    height: 32px;
    overflow: visible;
}

.stat-spark polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}


/* ---------- Korten ---------- */

.stat-card {
    position: relative;
    padding: 20px 22px;
    border-radius: 20px;
    background: var(--pure-white);
    border: 1px solid var(--border);
    min-width: 0;
}

.stat-card--wide {
    grid-column: 1 / -1;
}

.stat-card h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.stat-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.stat-card-head h2 {
    margin: 0;
}

.stat-lead {
    margin: -4px 0 12px;
    color: var(--text-2);
}

.stat-foot,
.stat-empty {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
}


/* ---------- Linjediagram ---------- */

.stat-line-chart {
    display: block;
    width: 100%;
    height: auto;
}

.stat-grid {
    stroke: rgb(var(--ink-rgb) / .08);
    stroke-width: 1;
}

.stat-axis {
    fill: var(--text-faint);
    font-size: 11px;
    font-weight: 600;
}

.stat-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.stat-line--views { color: var(--stat-views); stroke: var(--stat-views); }
.stat-line--page_views { color: var(--stat-views); stroke: var(--stat-views); }
.stat-line--dish_views { color: var(--stat-dishes); stroke: var(--stat-dishes); }
.stat-line--hype,
.stat-line--restaurant_hype,
.stat-line--dish_hype { color: var(--stat-hype); stroke: var(--stat-hype); }
.stat-line--followers { color: var(--stat-followers); stroke: var(--stat-followers); }

.stat-dot {
    fill: var(--pure-white);
    stroke-width: 2.5;
}

.stat-area {
    opacity: .12;
}

.stat-area--views,
.stat-area--page_views { fill: var(--stat-views); }
.stat-area--dish_views { fill: var(--stat-dishes); }
.stat-area--hype { fill: var(--stat-hype); }
.stat-area--followers { fill: var(--stat-followers); }

.stat-legend {
    display: flex;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.stat-key::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 4px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
    background: currentColor;
}

.stat-key--views::before,
.stat-key--page_views::before { background: var(--stat-views); }
.stat-key--dish_views::before { background: var(--stat-dishes); }
.stat-key--hype::before { background: var(--stat-hype); }


/* ---------- 🍽️ Rätterna ---------- */

.stat-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.stat-row > span:not(:first-child) {
    text-align: right;
}

.stat-row--head {
    border-top: none;
    padding-top: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.stat-dish {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 700;
    min-width: 0;
}

.stat-bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--stat-views) var(--bar), var(--surface-2) var(--bar));
}


/* ---------- 🧭 Källor (ring) ---------- */

.stat-donut-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-donut {
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
}

.stat-donut-part {
    fill: none;
}

.stat-source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.stat-source-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-source-list strong {
    margin-left: auto;
    padding-left: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stat-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: currentColor;
}

.stat-color-0 { color: var(--stat-c0); stroke: var(--stat-c0); }
.stat-color-1 { color: var(--stat-c1); stroke: var(--stat-c1); }
.stat-color-2 { color: var(--stat-c2); stroke: var(--stat-c2); }
.stat-color-3 { color: var(--stat-c3); stroke: var(--stat-c3); }
.stat-color-4 { color: var(--stat-c4); stroke: var(--stat-c4); }
.stat-color-5 { color: var(--stat-c5); stroke: var(--stat-c5); }
.stat-color-6 { color: var(--stat-c6); stroke: var(--stat-c6); }
.stat-color-7 { color: var(--stat-c7); stroke: var(--stat-c7); }
.stat-color-8 { color: var(--stat-c8); stroke: var(--stat-c8); }


/* ---------- 🕒 Värmekarta ---------- */

.stat-heat {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    table-layout: fixed;
}

.stat-heat th {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
}

.stat-heat tbody th {
    width: 34px;
    text-align: left;
}

.stat-heat td {
    height: 24px;
    border-radius: 6px;
    background: var(--surface-2);
}

.stat-heat-1 { background: rgb(255 111 0 / .2) !important; }
.stat-heat-2 { background: rgb(255 111 0 / .42) !important; }
.stat-heat-3 { background: rgb(255 111 0 / .68) !important; }
.stat-heat-4 { background: var(--hype-orange) !important; }


/* ---------- 🏆 Placering ---------- */

.stat-place {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.stat-place:first-of-type {
    border-top: none;
}

.stat-place > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 700;
}

.stat-place a {
    color: inherit;
}

.stat-place small {
    color: var(--text-muted);
    font-weight: 500;
}

.stat-place-rank {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 20px;
    font-weight: 900;
}


/* ---------- ❤️ Följare / 📊 Jämförelse ---------- */

.stat-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}

.stat-pair div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-2);
}

.stat-pair div:nth-child(3) {
    grid-column: 1 / -1;   /* ✓ Testat: egen rad under följare/sparade */
}

.stat-pair strong {
    font-size: 24px;
    font-weight: 900;
}

.stat-pair span {
    color: var(--text-muted);
    font-size: 13px;
}

.stat-compare {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-compare-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-2);
}

.stat-compare-title {
    font-weight: 700;
}

.stat-compare-ratio {
    grid-row: span 2;
    font-size: 28px;
    font-weight: 900;
}

.stat-compare-ratio.is-above { color: var(--green-text); }
.stat-compare-ratio.is-below { color: var(--red-text); }

.stat-compare-detail {
    color: var(--text-muted);
    font-size: 13px;
}


.stat-card--wide .stat-compare {
    flex-direction: row;
}

.stat-card--wide .stat-compare-row {
    flex: 1;
}


/* ---------- 👆 Klick vidare (staplar) ---------- */

.stat-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat-bars li {
    display: grid;
    grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.stat-bars-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-bars-track {
    height: 10px;
    border-radius: 5px;
    background: var(--surface-2);
    overflow: hidden;
}

.stat-bars-fill {
    display: block;
    width: var(--bar);
    height: 100%;
    border-radius: inherit;
    background: var(--green-engaging);
}

.stat-bars strong {
    font-variant-numeric: tabular-nums;
}

.stat-lead .stat-change {
    margin-left: 6px;
    vertical-align: 1px;
}


/* ---------- 🏅 Värt hajpen? ---------- */

.stat-sub {
    margin: -6px 0 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.verdict-stats {
    display: flex;
    flex-direction: column;
}

.verdict-stat {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.5fr) 70px 80px;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.verdict-stat-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.verdict-stat-name small {
    color: var(--text-muted);
    font-weight: 600;
}

.verdict-stat-badge {
    align-self: flex-start;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-yellow);
    color: #3b2a00;
    font-size: 12px;
    font-weight: 800;
}

/* 🔥 orange · 😐 grå · 🧊 blå — flex-grow = antal svar, som på rättens sida */
.verdict-stat-bar {
    display: flex;
    gap: 2px;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-3);
}

.verdict-stat-bar span { flex-basis: 0; min-width: 0; }
.verdict-stat-worth { background: var(--hype-orange); }
.verdict-stat-ok { background: var(--surface-4); }
.verdict-stat-overhyped { background: #38bdf8; }

.verdict-stat-split {
    color: var(--text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.verdict-stat-pct {
    display: flex;
    flex-direction: column;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.verdict-stat-pct small { color: var(--text-muted); }

.verdict-stat-trend { text-align: right; }

@media (max-width: 640px) {
    .verdict-stat {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .verdict-stat-bar,
    .verdict-stat-split {
        grid-column: 1 / -1;
    }

    .verdict-stat-trend { grid-column: 2; text-align: right; }
}


/* ---------- 🔥 Trendat ---------- */

.stat-trend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-weight: 700;
}

.stat-trend:first-of-type {
    border-top: none;
}

.stat-trend > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stat-trend small {
    color: var(--text-muted);
    font-weight: 500;
}

.stat-trend-rank {
    min-width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 17px;
}


/* ---------- 📣 Inlägg och omtal ---------- */

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.stat-tiles div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-2);
}

.stat-tiles strong {
    font-size: 24px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.stat-tiles span {
    color: var(--text-muted);
    font-size: 13px;
}

.stat-subtitle {
    margin: 18px 0 8px;
    font-size: 15px;
}

.stat-posts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-left: 22px;
}

.stat-posts li {
    padding: 6px 0;
    font-weight: 700;
}

.stat-posts a {
    color: inherit;
}

.stat-posts small {
    display: block;
    color: var(--text-muted);
    font-weight: 500;
}


/* ---------- ⭐ Premium-erbjudandet + 🔒 låsta kort ---------- */

.stats-premium-head {
    margin-top: 30px;
}

.stats-premium-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
}

.stats-premium-head p {
    margin: 0;
    color: var(--text-muted);
}

.stats-upsell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: 10px;
    padding: 20px 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--yellow-soft), var(--orange-soft));
    border: 1px solid rgb(255 111 0 / .25);
}

.stats-upsell ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
    color: var(--text-2);
    font-size: 15px;
}

.stats-upsell-sent {
    font-weight: 700;
    color: var(--green-text) !important;
}

.stats-grid.is-locked .stat-card-body {
    filter: blur(5px);
    opacity: .55;
    user-select: none;
    pointer-events: none;
}

.stat-lock {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
}

.stat-lock-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pure-white);
    box-shadow: 0 4px 14px rgb(0 0 0 / .15);
    font-size: 22px;
}

.stat-lock strong {
    font-size: 16px;
}

.stat-lock-btn {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--hype-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.stat-lock-btn:hover {
    filter: brightness(1.05);
}

.owner-stats-link {
    margin-left: 6px;
    font-weight: 700;
    white-space: nowrap;
}


/* ---------- Mobil ---------- */

@media (max-width: 760px) {

    .stats-hero {
        padding: 18px 16px 14px;
        border-radius: 18px;
    }

    .stats-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-kpi {
        min-height: 112px;
        padding: 14px 14px 42px;
    }

    .stat-kpi-value {
        font-size: 28px;
    }

    .stat-spark {
        left: 14px;
        right: 14px;
        width: auto;
    }

    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stat-card {
        padding: 16px;
    }

    /* Rätterna: ett kort per rätt i stället för tabell */
    .stat-row--head {
        display: none;
    }

    .stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .stat-row > .stat-dish {
        grid-column: 1 / -1;
    }

    .stat-row > span:not(:first-child) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        font-weight: 800;
    }

    .stat-row > span[data-label]::before {
        content: attr(data-label);
        color: var(--text-faint);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
    }

    .stat-donut-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .stat-donut {
        align-self: center;
    }

    .stats-csv {
        margin-left: 0;
    }

    .stat-card--wide .stat-compare {
        flex-direction: column;
    }

    /* SVG:n skalas ner till skärmbredden — större text i diagrammet blir ~10 px på skärmen */
    .stat-axis {
        font-size: 19px;
    }
}


/* ---------- 📡 Radar (gratis just nu + ⭐ historik) ---------- */

.stat-radar {
    margin-top: 16px;
}

.stat-radar-hits,
.stat-radar-near {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.stat-radar-hits li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 14px;
    line-height: 1.45;
}

.stat-radar-hits a {
    color: var(--orange-text);
    font-weight: 700;
}

.stat-radar-badge {
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--orange-soft-2);
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 800;
}

.stat-radar-badge--gem {
    background: var(--purple-soft);
    color: var(--blue-text);
}

.stat-radar-near li {
    font-size: 14px;
    font-weight: 700;
}

.stat-radar-near small {
    display: block;
    color: var(--text-muted);
    font-weight: 500;
}

/* ===== friends/css/friends.css ===== */
/* =====================================================
   👯 VÄNNER (friends/)
   "Ska vi?"-knappen och -rutan, Planer, 💞 Matmatch och
   🔥 "Vänner har hajpat". Rutan bygger på .report-dialog (feed.css).
   ===================================================== */


/* ---------- Små avatarer ---------- */

.avatar-stack {
    display: inline-flex;
    flex-shrink: 0;
}

.avatar-stack .avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
    box-shadow: 0 0 0 2px var(--pure-white);
}

.avatar-stack .avatar + .avatar {
    margin-left: -8px;
}


/* ---------- "Ska vi?"-knappen ---------- */

.invite-btn {
    border-color: rgba(59, 130, 246, .35);
    color: var(--blue-text);
}

.invite-btn:hover {
    background: rgba(59, 130, 246, .08);
}

/* 👯 dansar när man pekar på knappen (som prickarna i Kommentera, food_cards.css) */
.invite-btn-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transform-origin: 50% 90%;
}

.invite-btn:hover .invite-btn-icon,
.invite-btn:focus-visible .invite-btn-icon {
    animation: invite-dance .8s ease-in-out infinite;
}

@keyframes invite-dance {
    0%, 100% { transform: rotate(0) translateY(0); }
    25%      { transform: rotate(-10deg) translateY(-1px); }
    75%      { transform: rotate(10deg) translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
    .invite-btn:hover .invite-btn-icon,
    .invite-btn:focus-visible .invite-btn-icon {
        animation: none;
    }
}


/* ---------- 🔥 "Vänner har hajpat" ---------- */

.friends-hyped {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 12px;

    background: rgba(255, 111, 0, .07);
    color: var(--dark-text);
    font-size: 14px;
}

.friends-hyped a {
    color: inherit;
    font-weight: 800;
}


/* ---------- Vänknappen (friends/_friend_button.html) ---------- */

.friend-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.friend-actions form {
    margin: 0;
}

.follow-btn.friend-btn-add {
    border-color: #2563eb;
    background: #2563eb;
}

.follow-btn.friend-btn-add:hover {
    background: #1d4ed8;
}

.friend-actions.is-compact .follow-btn {
    min-width: 0;
    padding: 6px 12px;
    font-size: 13px;
}


/* ---------- Profilen: "👯 Ni är vänner" ---------- */

.profile-follows-you.is-friend {
    background: rgba(59, 130, 246, .12);
    color: var(--blue-text);
}


/* ---------- Rutan ---------- */

.invite-dialog .report-header h2 {
    font-size: 1.1rem;
    line-height: 1.3;
}

.invite-target {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 12px 0 4px;
    padding: 10px;
    border-radius: 14px;
    background: var(--soft-gray);
}

.invite-target img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
}

.invite-target strong,
.invite-target small {
    display: block;
}

.invite-target small {
    color: var(--text-muted);
    font-size: 13px;
}

.invite-friends,
.invite-when {
    margin: 12px 0 0;
    padding: 0;
    border: none;
}

.invite-friends legend,
.invite-when legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
}

.invite-when legend small {
    color: var(--text-faint);
    font-weight: 500;
}

.invite-friend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.invite-friend {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;

    padding: 8px 10px;
    border: 1px solid rgb(var(--shade-rgb) / .08);
    border-radius: 12px;

    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.invite-friend:hover {
    background: var(--soft-gray);
}

.invite-friend:has(input:checked) {
    border-color: rgba(59, 130, 246, .5);
    background: rgba(59, 130, 246, .08);
}

.invite-friend input {
    accent-color: #2563eb;
}

.invite-friend .avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
    box-shadow: none;
}

.invite-friend span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 14px;
}

.invite-quick-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.invite-quick-days .home-chip {
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.invite-quick-days .home-chip.is-active,
.invite-quick-days .home-chip.is-active:hover {
    border-color: var(--hype-orange);
    background: var(--hype-orange);
    color: #fff;
}

.invite-when-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.invite-when-fields label span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.invite-form input[type="date"],
.invite-form input[type="time"],
.invite-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;

    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    background: var(--pure-white);

    font: inherit;
    font-size: 15px;
}

.report-submit.invite-submit {
    background: var(--hype-orange);
}

.invite-no-friends {
    margin-top: 14px;
    text-align: center;
}

.invite-no-friends p {
    margin: 0 0 10px;
    color: var(--text-2);
}

a.report-cancel {
    color: var(--dark-text);
    text-decoration: none;
}

/* Utan JS: formuläret på egen sida */
.invite-page-card {
    max-width: 520px;
    margin: 0 auto;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.invite-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 1000;

    width: min(460px, calc(100vw - 32px));
    transform: translateX(-50%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

@media (max-width: 768px) {
    .invite-toast {
        bottom: calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom));   /* ovanför bottenmenyn */
    }
}


/* ---------- Planer ---------- */

.plan-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.plan-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;

    padding: 16px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);

    scroll-margin-top: 90px;
}

.plan-card.is-waiting {
    border-color: rgba(59, 130, 246, .4);
}

.plan-card:target {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
}

.plan-card.is-past {
    opacity: .75;
}

.plan-media img {
    width: 112px;
    height: 112px;
    border-radius: 14px;
    object-fit: cover;
}

.plan-body {
    min-width: 0;
}

.plan-from {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;

    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 13px;
}

.plan-sender {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dark-text);
}

.plan-sender .avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
    box-shadow: none;
}

.plan-question {
    margin: 0 0 8px;
    font-size: 1.1rem;
    line-height: 1.3;
}

.plan-question a {
    color: var(--dark-text);
}

.plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

.plan-meta .mh-chip {
    box-shadow: none;
    background: var(--soft-gray);
}

.plan-meta .plan-when {
    background: rgba(59, 130, 246, .1);
    color: var(--blue-text);
}

.plan-meta .plan-when.is-open,
.plan-meta .plan-when.is-past {
    background: var(--soft-gray);
    color: var(--text-muted);
}

.plan-message {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--soft-gray);
    font-style: italic;
}

.plan-answers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
}

.plan-answers-label {
    margin-right: 2px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.plan-answer {
    padding: 8px 14px;
    border: 1.5px solid rgb(var(--ink-rgb) / .12);
    border-radius: 999px;
    background: var(--pure-white);

    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.plan-answer:hover {
    background: var(--soft-gray);
}

.plan-answer:disabled {
    cursor: wait;
    opacity: .7;
}

.plan-answer--yes.is-chosen {
    border-color: var(--green-engaging);
    background: rgba(0, 168, 101, .12);
    color: var(--green-text);
}

.plan-answer--maybe.is-chosen {
    border-color: var(--accent-yellow);
    background: rgba(255, 193, 7, .18);
    color: var(--amber-text);
}

.plan-answer--no.is-chosen {
    border-color: rgb(var(--ink-rgb) / .35);
    background: var(--soft-gray);
    color: var(--text-2);
}

.plan-people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.plan-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: var(--soft-gray);
    font-size: 13px;
}

.plan-person a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dark-text);
    font-weight: 700;
}

.plan-person .avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
    box-shadow: none;
}

.plan-person-answer {
    color: var(--text-muted);
}

.plan-person-answer--yes {
    color: var(--green-text);
    font-weight: 800;
}

.plan-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.plan-footer form {
    margin: 0 0 0 auto;
}

.plan-yes-note {
    color: var(--green-text);
    font-size: 13px;
    font-weight: 700;
}

.plan-delete {
    padding: 0;
    border: none;
    background: none;

    color: var(--text-faint);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.plan-delete:hover {
    color: var(--red-text);
}

@media (max-width: 560px) {
    .plan-card {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .plan-media img {
        width: 64px;
        height: 64px;
        border-radius: 12px;
    }
}


/* ---------- 🏷️ Taggade vänner i inlägg ---------- */

/* Samma indrag som .post-text (feed.css) */
.post-with {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px 0;
    color: var(--text-2);
    font-size: 14px;
}

@media (max-width: 520px) {
    .post-with {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Fyra knappar i skrivrutan (📷 📍 🍽️ 👯) får inte plats med text på
   mobil — bara ikoner, som feed.css redan gör under 520px */
@media (max-width: 700px) {
    .composer-bar:has([data-toggle-tag-friends]) .composer-action-label,
    .composer-bar:has([data-toggle-tag-friends]) .composer-visibility-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .composer-bar:has([data-toggle-tag-friends]) .composer-action {
        padding: 8px 10px;
        font-size: 18px;
    }
}

.post-with a {
    color: var(--dark-text);
    font-weight: 700;
}

.post-with .avatar-stack .avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
}

.composer-with {
    margin: 8px 0 0;
    color: var(--text-2);
    font-size: 14px;
}

.composer-friends {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--soft-gray);
}

.composer-friends-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
}

.composer-friends-title small {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.composer-friends .invite-friend {
    background: var(--pure-white);
}


/* ---------- 📊 Omröstningar ---------- */

.plans-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.poll-card {
    grid-template-columns: minmax(0, 1fr);
}

.poll-card.is-decided {
    border-color: rgba(0, 168, 101, .35);
}

.poll-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;

    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 14px;

    background: rgba(0, 168, 101, .1);
    color: var(--green-text);
    font-size: 15px;
}

.poll-result a {
    color: inherit;
}

/* ⏱️ Stängd utan beslut (en vecka har gått) */
.poll-card.is-closed {
    opacity: .85;
}

.poll-closed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--soft-gray);
    color: var(--text-2);
    font-size: 14px;
}

.poll-closed small {
    font-size: 13px;
}

.poll-result small {
    font-size: 13px;
    font-weight: 700;
}

.poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.poll-option {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;
    border: 1.5px solid rgb(var(--ink-rgb) / .1);
    border-radius: 14px;
    background: var(--pure-white);
}

/* Stapeln: andelen röster, bakom innehållet */
.poll-bar {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    width: var(--share, 0%);
    background: rgba(59, 130, 246, .08);
    transition: width .3s ease;
}

.poll-option > :not(.poll-bar) {
    position: relative;
    z-index: 1;
}

.poll-option.is-mine {
    border-color: rgba(59, 130, 246, .5);
}

.poll-option.is-mine .poll-bar {
    background: rgba(59, 130, 246, .16);
}

.poll-option.is-winner {
    border-color: var(--green-engaging);
}

.poll-option.is-winner .poll-bar {
    background: rgba(0, 168, 101, .14);
}

.poll-option-place {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-text);
}

.poll-option-place img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
}

.poll-option-place span {
    min-width: 0;
}

.poll-option-place strong,
.poll-option-place small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poll-option-place small {
    color: var(--text-muted);
    font-size: 12px;
}

.poll-option-votes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 15px;
}

.poll-option form {
    margin: 0;
    flex-shrink: 0;
}

.poll-vote {
    padding: 7px 14px;
    border: 1.5px solid rgba(59, 130, 246, .35);
    border-radius: 999px;
    background: var(--pure-white);

    color: var(--blue-text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.poll-vote:hover {
    background: rgba(59, 130, 246, .08);
}

.poll-vote.is-chosen {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.poll-vote:disabled {
    cursor: wait;
    opacity: .7;
}

.poll-waiting {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.poll-waiting a {
    color: var(--dark-text);
    font-weight: 700;
}

.poll-decide {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--soft-gray);
}

.poll-decide summary {
    font-weight: 800;
    cursor: pointer;
}

.poll-decide form {
    margin-top: 10px;
}

.poll-decide-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    border: none;
}

.poll-decide-options .invite-friend {
    background: var(--pure-white);
}

.poll-decide-submit {
    margin-top: 10px;
}

/* 🙋 🍽️ Sugen?: önskemål och "Passar: 🍔" (friends/polls.py add_wish) */
.poll-option-place small.poll-option-sugen {
    color: var(--orange-text);
    font-weight: 700;
}

.poll-wish {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--orange-soft);
}

.poll-wish summary {
    font-weight: 800;
    cursor: pointer;
}

.poll-wish-hint {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.poll-wish .invite-submit {
    margin-top: 10px;
}

.poll-wishes-toggle {
    align-items: flex-start;
    margin: 4px 0 14px;
}

.poll-wishes-toggle span {
    white-space: normal;
}

.poll-wishes-toggle small {
    display: block;
    color: var(--text-muted);
    font-size: 12.5px;
}

.invite-poll-link {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.invite-poll-link a {
    color: var(--blue-text);
    font-weight: 700;
}

/* Ny omröstning */

.poll-form input[type="search"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
}

.poll-search {
    position: relative;
    margin-bottom: 8px;
}

.poll-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;

    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;

    border-radius: 12px;
    background: var(--pure-white);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}

.poll-search-results button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: none;

    font: inherit;
    text-align: left;
    cursor: pointer;
}

.poll-search-results button:hover,
.poll-search-results button:focus-visible {
    background: var(--soft-gray);
}

.poll-search-results small {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}

.poll-search-empty {
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 14px;
}

.poll-picks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.poll-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;

    padding: 8px 10px;
    border: 1px solid rgb(var(--shade-rgb) / .08);
    border-radius: 12px;
    cursor: pointer;
}

.poll-pick:has(input:checked) {
    border-color: rgba(59, 130, 246, .5);
    background: rgba(59, 130, 246, .08);
}

.poll-pick:has(input:disabled) {
    opacity: .5;
    cursor: not-allowed;
}

.poll-pick input {
    accent-color: #2563eb;
}

.poll-pick img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
}

.poll-pick span {
    min-width: 0;
}

.poll-pick strong,
.poll-pick small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poll-pick small {
    color: var(--text-muted);
    font-size: 12px;
}

.poll-picks-hint {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.poll-pick-count {
    color: var(--text-faint);
    font-weight: 500;
}

@media (max-width: 560px) {
    .poll-option {
        flex-wrap: wrap;
    }

    .poll-option-place {
        flex-basis: 100%;
    }

    .poll-option-votes {
        margin-left: 54px;
        margin-right: auto;
    }
}


/* ---------- 💞 Matmatch ---------- */

.match-list {
    margin: 0;
    padding: 6px 16px;
    list-style: none;

    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .08);
}

.match-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.match-row + .match-row {
    border-top: 1px solid rgb(var(--shade-rgb) / .06);
}

.match-item {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--dark-text);
}

.match-item img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
}

.match-item span {
    min-width: 0;
}

.match-item strong,
.match-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-item small {
    color: var(--text-muted);
    font-size: 13px;
}

.match-item:hover strong {
    text-decoration: underline;
}

.match-friends {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.match-friends small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.match-row .invite-btn {
    flex-shrink: 0;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

/* Smal skärm: raden med vänner ("anna vill också") + knapp hamnar under rätten.
   Utan vänner (på en väns profil) ryms rätt och knapp på samma rad. */
@media (max-width: 640px) {
    .match-row:has(.match-friends) {
        flex-wrap: wrap;
    }

    .match-row:has(.match-friends) .match-item {
        flex-basis: 100%;
    }

    .match-friends {
        margin-left: 64px;
    }

    .match-row .invite-btn {
        margin-left: auto;
    }
}

/* Matmatch på en väns profil */
.profile-matmatch {
    margin-bottom: 24px;
}

/* ===== friends/css/friends_page.css ===== */
/* =====================================================
   👯 VÄNNER-SIDAN (friends/home.html, friends_page.js)
   Instagram/Facebook-likt: 📸 story-ringar, förfrågningar med Bekräfta /
   Ta bort, kort att svepa mellan och en smal kolumn bredvid på dator.
   Mobil: en kolumn, korten i ordningen --order (style="--order: N" i mallen).
   De allmänna delarna (fr-head, fr-card, fr-btn, fr-icon-btn, fr-layout, fr-empty …)
   används också av ❤️ Sparat (saved_page.html + main/css/saved_page.css).
   ===================================================== */

.fr-page {
    --fr-cta: #C2410C;          /* knapporange: vit text går att läsa (som home_hero.css) */
    --fr-badge: #b3261e;
    --fr-line: rgb(var(--ink-rgb) / .08);
}

/* Knappar och rutor som JS visar ska inte synas förrän då */
.fr-page [hidden] {
    display: none !important;
}


/* ---------- Knappar ---------- */

.fr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;

    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.fr-btn .nav-icon {
    width: 20px;
    height: 20px;
}

.fr-btn--primary {
    background: var(--fr-cta);
    color: #fff;
}

.fr-btn--primary:hover {
    background: #a8370a;
}

.fr-btn--soft {
    background: var(--surface-2);
    color: var(--dark-text);
}

.fr-btn--soft:hover {
    background: var(--surface-3);
}

.fr-btn--tint {
    border: 1.5px solid rgba(255, 111, 0, .35);
    background: rgba(255, 111, 0, .08);
    color: var(--orange-text);
    font-weight: 800;
}

.fr-btn--tint:hover {
    background: rgba(255, 111, 0, .16);
}

.fr-btn:disabled {
    cursor: progress;
    opacity: .7;
}

.fr-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;

    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;

    background: var(--surface-2);
    color: var(--dark-text);
    cursor: pointer;
}

.fr-icon-btn:hover {
    background: var(--surface-3);
}

.fr-icon-btn--ghost {
    background: transparent;
    color: var(--text-muted);
}

.fr-icon-btn .nav-icon {
    width: 20px;
    height: 20px;
}

/* "Ska vi?" (friends/_invite_button.html) i korten: orangetonad som de andra knapparna */
.fr-match .invite-btn,
.fr-slide-actions .invite-btn {
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 111, 0, .35);
    background: rgba(255, 111, 0, .08);
    color: var(--orange-text);
    font-size: 15px;
    font-weight: 800;
}

.fr-match .invite-btn-icon,
.fr-slide-actions .invite-btn-icon {
    display: none;
}


/* ---------- Gemensamt för korten ---------- */

.fr-card {
    --fr-pad: 20px;

    padding: 18px var(--fr-pad);
    border-radius: 20px;
    background: var(--pure-white);
    border: 1px solid var(--fr-line);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.fr-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 14px;
}

.fr-h2 {
    margin: 0;
    color: var(--dark-text);
    font-size: 1.15rem;
    font-weight: 800;
}

.fr-h2-note,
.fr-count {
    color: var(--text-muted);
    font-size: .85em;
    font-weight: 700;
}

.fr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    box-sizing: border-box;
    vertical-align: 2px;

    background: var(--fr-badge);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.fr-sub {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.fr-head-link {
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.fr-head-link:hover {
    text-decoration: underline;
}

.fr-note {
    margin: 12px 0 0;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.45;
}

.fr-eyebrow-sm {
    display: block;
    margin: 0;
    color: var(--orange-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fr-empty {
    padding: 20px;
    border-radius: 16px;
    border: 1px dashed rgb(var(--ink-rgb) / .18);
    text-align: center;
}

.fr-empty h3 {
    margin: 0 0 4px;
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 800;
}

.fr-empty p {
    max-width: 420px;
    margin: 0 auto 12px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

/* Rader att svepa mellan (Matmatch, förslag, stories) går ut till kortets kant */
.fr-match-row,
.fr-suggest-row,
.fr-story-row {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * var(--fr-pad));
    padding: 2px var(--fr-pad) 4px;
    list-style: none;

    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--fr-pad);
    -webkit-overflow-scrolling: touch;
}

.fr-match-row::-webkit-scrollbar,
.fr-suggest-row::-webkit-scrollbar,
.fr-story-row::-webkit-scrollbar {
    display: none;
}


/* ---------- Rubriken ---------- */

.fr-head {
    margin-bottom: 16px;
    padding: 24px 28px 18px;
    border-radius: 20px;

    background:
        radial-gradient(circle at top right, rgba(255, 111, 0, .1), transparent 55%),
        var(--pure-white);
    border: 1px solid var(--fr-line);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
}

.fr-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.fr-head-text {
    min-width: 0;
}

.fr-eyebrow .nav-icon {
    width: 16px;
    height: 16px;
}

.fr-title {
    margin: 12px 0 6px;
    color: var(--dark-text);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.fr-title-short,
.fr-only-mobile {
    display: none;
}

.fr-lead {
    max-width: 600px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.fr-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fr-chips {
    margin: 18px 0 0;
}

.fr-chips .home-chip.is-active {
    border-color: var(--fr-cta);
    background: var(--fr-cta);
}

.fr-chips .fr-badge {
    margin-left: 2px;
}


/* ---------- Kolumnerna ---------- */

.fr-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Mobil: korten i båda kolumnerna blir syskon och sorteras med --order */
.fr-main,
.fr-side {
    display: contents;
}

.fr-main > *,
.fr-side > * {
    order: var(--order, 50);
    min-width: 0;
}

@media (min-width: 1180px) {
    .fr-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
        gap: 20px;
    }

    .fr-main,
    .fr-side {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

    .fr-main > *,
    .fr-side > * {
        order: 0;
    }
}


/* ---------- 📸 Nytt från vänner ---------- */

.fr-stories {
    padding-left: 0;
    padding-right: 0;
}

.fr-stories .fr-card-head {
    padding: 0 var(--fr-pad);
}

.fr-story-row {
    gap: 16px;
    margin: 0;
}

.fr-story-row > li {
    scroll-snap-align: start;
}

.fr-story {
    position: relative;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    color: var(--dark-text);
    text-decoration: none;
}

.fr-story-ring {
    display: flex;
    width: 76px;
    height: 76px;
    padding: 3px;
    border-radius: 50%;
    box-sizing: border-box;

    background: linear-gradient(45deg, #FFC107, #FF6F00 55%, #f0400c);
    transition: transform .15s ease;
}

.fr-story:hover .fr-story-ring {
    transform: scale(1.04);
}

.fr-story.is-seen .fr-story-ring {
    background: var(--surface-3);
}

.fr-ring-img {
    flex: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--pure-white);
    box-sizing: border-box;
    object-fit: cover;
    background: var(--surface-2);
}

.fr-ring-initial {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--orange-soft-2);
    color: var(--orange-text);
    font-size: 24px;
    font-weight: 800;
}

.fr-story--invite .fr-story-ring {
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px dashed rgba(255, 111, 0, .55);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.fr-story--invite .nav-icon {
    width: 28px;
    height: 28px;
    stroke-width: 2.2;
}

.fr-story-badge {
    position: absolute;
    top: 52px;
    right: -2px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid var(--pure-white);
    box-sizing: border-box;
    color: #fff;
}

.fr-story-badge--hyped {
    background: var(--fr-cta);
}

.fr-story-badge--tried {
    background: #00A865;
}

.fr-story-badge .nav-icon {
    width: 13px;
    height: 13px;
    stroke-width: 2.8;
}

.fr-story-badge .f {
    fill: currentColor;
}

.fr-story-name {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
}


/* Rutan (friends/_stories.html) */

.fr-story-dialog {
    width: min(420px, 100vw);
    max-width: 100vw;
    max-height: min(780px, 100dvh);
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;

    background: #111214;
    color: #fff;
}

.fr-story-dialog::backdrop {
    background: rgba(0, 0, 0, .78);
}

.fr-slide {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Mörk ton överst så att namnet och krysset syns mot bilden */
.fr-slide::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 110px;
    background: linear-gradient(rgba(0, 0, 0, .55), transparent);
    pointer-events: none;
}

.fr-slide-progress {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 2;

    display: flex;
    gap: 4px;
}

.fr-slide-progress span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
}

.fr-slide-progress .is-done,
.fr-slide-progress .is-current {
    background: #fff;
}

.fr-slide-head {
    position: absolute;
    top: 20px;
    left: 12px;
    right: 4px;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 10px;
}

.fr-slide-person {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;

    color: #fff;
    text-decoration: none;
}

.fr-slide-person .avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
    box-shadow: none;
}

.fr-slide-time {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
}

.fr-slide-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.fr-slide-media {
    display: block;
    aspect-ratio: 4 / 5;
    max-height: 62dvh;
    background: #222;
}

.fr-slide-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fr-slide-body {
    padding: 14px 18px 20px;
}

.fr-slide-what {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;

    background: rgba(255, 111, 0, .22);
    color: #FFB27A;
    font-size: 13px;
    font-weight: 800;
}

.fr-slide-what--tried {
    background: rgba(0, 168, 101, .24);
    color: #6EE7B7;
}

.fr-slide-what .nav-icon {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
}

.fr-slide-what .f {
    fill: currentColor;
}

.fr-slide-title {
    margin: 10px 0 2px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
}

.fr-slide-title a {
    color: #fff;
    text-decoration: none;
}

.fr-slide-place {
    margin: 0;
    color: rgba(255, 255, 255, .75);
}

.fr-slide-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.fr-slide-actions > * {
    flex: 1;
}

.fr-slide-actions .fr-btn--soft {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.fr-slide-actions .fr-btn--soft:hover {
    background: rgba(255, 255, 255, .22);
}

.fr-slide-actions .invite-btn {
    border-color: transparent;
    background: var(--fr-cta);
    color: #fff;
}

.fr-slide-nav {
    position: absolute;
    top: 34%;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;

    background: rgba(0, 0, 0, .38);
    color: #fff;
    cursor: pointer;
}

.fr-slide-nav:hover {
    background: rgba(0, 0, 0, .55);
}

.fr-slide-nav--prev {
    left: 8px;
}

.fr-slide-nav--next {
    right: 8px;
}


/* ---------- Vänförfrågningar ---------- */

.fr-req-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fr-req {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fr-req-photo .avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
}

.fr-req-body {
    flex: 1;
    min-width: 0;
}

.fr-req-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin: 0;
}

.fr-req-name a {
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.fr-req-name time {
    color: var(--text-muted);
    font-size: 13px;
}

.fr-req-meta {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.fr-card-actions {
    display: flex;
    align-items: stretch;   /* .friend-actions centrerar annars */
    gap: 8px;
    margin-top: 10px;
}

.fr-card-actions form {
    display: flex;
    flex: 1;
    margin: 0;
}

.fr-card-actions .fr-btn {
    width: 100%;
}

.fr-card-done {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0;

    color: var(--green-text);
    font-size: 14px;
    font-weight: 700;
}

.fr-card-done .nav-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.6;
}

/* Bredare: Facebook-kort i ett rutnät */
@media (min-width: 641px) {
    .fr-req-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }

    .fr-req {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 16px;
    }

    .fr-req-photo {
        display: flex;
        justify-content: center;
        padding: 22px 0 14px;
        background: var(--orange-soft);
    }

    .fr-req-photo .avatar {
        width: 104px;
        height: 104px;
        font-size: 40px;
    }

    .fr-req-body {
        padding: 12px;
    }

    .fr-req .fr-card-actions {
        flex-direction: column;
        gap: 6px;
    }
}


/* ---------- 📅 Nästa plan ---------- */

.fr-plan-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fr-plan-date {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 70px;
    border-radius: 16px;

    background: var(--orange-soft-2);
    color: var(--orange-text);
    line-height: 1.1;
    text-transform: uppercase;
}

.fr-plan-date span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.fr-plan-date strong {
    font-size: 26px;
    font-weight: 900;
}

.fr-plan-info {
    min-width: 0;
}

.fr-plan-place {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.fr-plan-place a {
    color: var(--dark-text);
    text-decoration: none;
}

.fr-plan-when {
    margin: 2px 0 0;
    color: var(--text-2);
    font-size: 14px;
}

.fr-plan-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.fr-yes {
    color: var(--green-text);
}

.fr-plan-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.fr-plan-actions > * {
    flex: 1;
}

.fr-plan-actions form {
    display: flex;
    margin: 0;
}

.fr-plan-actions .fr-btn {
    width: 100%;
}

.fr-waiting.has-divider {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--fr-line);
}

.fr-waiting .fr-eyebrow-sm {
    color: var(--text-muted);
}

.fr-waiting-q {
    margin: 6px 0 0;
    color: var(--dark-text);
    font-size: 14px;
    line-height: 1.45;
}

.fr-waiting:not(.has-divider) .fr-waiting-q {
    margin-top: 0;
}

.fr-waiting-when {
    color: var(--text-muted);
}

.fr-waiting-answers {
    display: flex;
    gap: 6px;
    margin: 10px 0 0;
}

.fr-waiting-answers .fr-btn {
    flex: 1;
    padding: 0 8px;
    font-size: 14px;
}


/* ---------- 💞 Matmatch ---------- */

.fr-match-row {
    margin-bottom: 0;
}

.fr-match {
    display: flex;
    flex: 0 0 168px;
    flex-direction: column;
    gap: 8px;
    scroll-snap-align: start;
}

.fr-match-media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface-warm);
}

.fr-match-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.fr-match-media:hover img {
    transform: scale(1.04);
}

.fr-match-people {
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.fr-match-people .avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
    box-shadow: 0 0 0 2px #fff;
}

.fr-match-text {
    min-width: 0;
}

.fr-match-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.fr-match-place {
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 13px;
}

.fr-match-who {
    margin: 4px 0 0;
    color: var(--text-2);
    font-size: 13px;
}

.fr-match .invite-btn {
    margin-top: auto;
}


/* ---------- 🎯 Smakmatch ---------- */

.fr-taste-best {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--dark-text);
    text-decoration: none;
}

.fr-taste-ring {
    display: flex;
    flex: none;
    width: 76px;
    height: 76px;
    padding: 5px;
    border-radius: 50%;
    box-sizing: border-box;

    background: conic-gradient(#FF6F00 calc(var(--pct) * 1%), var(--surface-3) 0);
}

.fr-taste-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fr-taste-title {
    font-size: 17px;
    font-weight: 800;
}

.fr-taste-best:hover .fr-taste-title {
    text-decoration: underline;
}

.fr-taste-why {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.4;
}

.fr-taste-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--fr-line);
    list-style: none;
    counter-reset: taste 1;
}

.fr-taste-list li {
    counter-increment: taste;
}

.fr-taste-list a {
    display: grid;
    grid-template-columns: 16px 36px minmax(0, 1fr) auto;
    grid-template-areas:
        "n a name pct"
        "n a bar  bar";
    align-items: center;
    gap: 4px 10px;
    color: var(--dark-text);
    text-decoration: none;
}

.fr-taste-list a::before {
    content: counter(taste);
    grid-area: n;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 900;
}

.fr-taste-list .avatar {
    grid-area: a;
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.fr-taste-name {
    grid-area: name;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
}

.fr-taste-list strong {
    grid-area: pct;
    color: var(--orange-text);
    font-size: 14px;
}

.fr-taste-bar {
    grid-area: bar;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-3);
}

.fr-taste-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #FFC107, #FF6F00);
}


/* ---------- 👯 Dina vänner ---------- */

.fr-sort {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-2);
}

.fr-sort button {
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;

    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.fr-sort button[aria-pressed="true"] {
    background: var(--pure-white);
    color: var(--dark-text);
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(30, 42, 68, .12);
}

.fr-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    margin: 0 0 8px;
    padding: 0 5px 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-sizing: border-box;

    background: var(--pure-white);
    color: var(--text-muted);
}

.fr-search:focus-within {
    border-color: rgba(255, 111, 0, .55);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .12);
}

.fr-search .nav-icon {
    width: 20px;
    height: 20px;
}

.fr-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    outline: none;
}

.fr-search .fr-btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
}

.fr-friend-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fr-friend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    border-top: 1px solid rgb(var(--ink-rgb) / .06);
}

.fr-friend:first-child {
    border-top: 0;
}

.fr-friend-person {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 4px 0;

    color: var(--dark-text);
    text-decoration: none;
}

.fr-friend-person .avatar {
    width: 52px;
    height: 52px;
    font-size: 20px;
}

.fr-friend-person:hover strong {
    text-decoration: underline;
}

.fr-friend-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fr-friend-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.fr-friend-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
}

.fr-role {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 999px;

    background: var(--purple-soft);
    color: var(--title-text);
    font-size: 11px;
    font-weight: 800;
}

.fr-friend-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 13px;
}

.fr-friend-taste {
    color: var(--orange-text);
    font-weight: 800;
}

.fr-friend-chat {
    margin: 0;
}

.fr-show-all {
    width: 100%;
    margin-top: 12px;
}

.fr-search-empty {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* Bredare: vännerna i två kolumner, var och en i en ruta */
@media (min-width: 900px) {
    .fr-friend-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .fr-friend,
    .fr-friend:first-child {
        padding: 6px 4px 6px 10px;
        border: 1px solid var(--border);
        border-radius: 16px;
    }
}


/* ⋯-menyn på en vän */

.fr-more {
    position: relative;
}

.fr-more summary {
    list-style: none;
}

.fr-more summary::-webkit-details-marker {
    display: none;
}

.fr-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;

    min-width: 190px;
    padding: 6px;
    border-radius: 14px;
    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);
    box-shadow: 0 12px 30px rgb(var(--shade-rgb) / .16);
}

.fr-more-menu form {
    margin: 0;
}

.fr-more-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;

    background: transparent;
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.fr-more-item:hover {
    background: var(--surface-2);
}

.fr-more-item.is-danger {
    color: var(--red-text);
}


/* ---------- Hitta vänner + förslag ---------- */

.fr-find {
    margin-bottom: 14px;
}

.fr-suggest {
    position: relative;
    display: flex;
    flex: 0 0 160px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--pure-white);
    scroll-snap-align: start;
}

.fr-suggest-photo {
    display: flex;
    justify-content: center;
    padding: 18px 0 12px;
    background: var(--orange-soft);
}

.fr-suggest-photo .avatar {
    width: 88px;
    height: 88px;
    font-size: 34px;
}

.fr-suggest-hide {
    position: absolute;
    top: 2px;
    right: 2px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.fr-suggest-hide span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgb(0 0 0 / .45);
    color: #fff;
}

.fr-suggest-hide .nav-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

.fr-suggest-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 12px 12px;
}

.fr-suggest-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.fr-suggest-why {
    min-height: 34px;
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.3;
}

.fr-suggest .fr-card-actions {
    margin-top: auto;
    padding-top: 8px;
}


/* ---------- Väntar på svar ---------- */

.fr-sent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fr-sent {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fr-sent-person {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--dark-text);
    text-decoration: none;
}

.fr-sent-person .avatar {
    width: 44px;
    height: 44px;
}

.fr-sent-person span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fr-sent-person strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
}

.fr-sent-person small {
    color: var(--text-muted);
    font-size: 12px;
}

.fr-sent .fr-card-actions {
    flex: none;
    margin: 0;
}

.fr-sent .fr-card-actions form {
    flex: none;
}

.fr-sent .fr-btn {
    padding: 0 14px;
    font-size: 14px;
}


/* ---------- 🤝 Bjud in ---------- */

.fr-invite {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-color: rgba(255, 111, 0, .2);
    background: var(--orange-soft);
    box-shadow: none;
}

.fr-invite-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--fr-cta);
    color: #fff;
}

.fr-invite-icon .nav-icon {
    width: 26px;
    height: 26px;
}

.fr-invite p {
    margin: 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.45;
}

.fr-invite .fr-btn {
    align-self: stretch;
}

.fr-invite .fr-invite-count {
    color: var(--green-text);
    font-size: 13px;
    font-weight: 700;
}


/* ---------- Mobil ---------- */

@media (max-width: 640px) {
    .fr-page {
        padding: 12px 12px 90px;
    }

    .fr-head {
        margin-bottom: 12px;
        padding: 10px 14px 4px;
    }

    .fr-head-top {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .fr-eyebrow,
    .fr-lead,
    .fr-title-long {
        display: none;
    }

    .fr-title-short {
        display: inline;
    }

    .fr-title {
        margin: 0;
        font-size: 1.65rem;
    }

    .fr-only-mobile {
        display: inline-flex;
    }

    /* Bara ikonen — aria-label säger vad den gör */
    .fr-add {
        width: 44px;
        padding: 0;
        border-radius: 50%;
        background: var(--surface-2);
        color: var(--dark-text);
    }

    .fr-add:hover {
        background: var(--surface-3);
    }

    .fr-add span {
        display: none;
    }

    .fr-chips {
        margin-top: 10px;
    }

    .fr-card {
        --fr-pad: 16px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .fr-story-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .fr-slide-media {
        max-height: none;
    }
}

/* ===== main/css/saved_page.css ===== */
/* =====================================================
   ❤️ SPARAT (saved_page.html, saved_page.js)
   Bygger på Vänner-sidans allmänna delar (friends/css/friends_page.css):
   fr-head, fr-card, fr-btn, fr-layout med --order på mobil. Här bara det
   som är Sparats eget: flikarna, snabbfiltren, samlingarna, mätaren,
   "Snart slut" och kartrutan — plus två rader på korten (öppet nu, vill också).
   ===================================================== */


/* ---------- Flikarna under rubriken (som Instagram) ---------- */

.sp-tabs {
    display: flex;
    gap: 4px;
    margin: 18px -28px -18px;
    padding: 0 16px;
    border-top: 1px solid var(--fr-line);

    overflow-x: auto;
    scrollbar-width: none;
}

.sp-tabs::-webkit-scrollbar {
    display: none;
}

.sp-tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 50px;
    padding: 0 14px;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;

    color: var(--text-2);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.sp-tab:hover {
    color: var(--dark-text);
}

.sp-tab.is-active {
    border-bottom-color: var(--fr-cta);
    color: var(--orange-text);
    font-weight: 800;
}


/* ---------- Snabbfilter + Stora/Lista ---------- */

.sp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sp-toolbar .layout-toggle {
    margin-left: auto;
}

.sp-filters {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;

    overflow-x: auto;
    scrollbar-width: none;
}

.sp-filters::-webkit-scrollbar {
    display: none;
}

.sp-filter {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.sp-filter:hover {
    border-color: rgba(255, 111, 0, .45);
}

.sp-filter[aria-pressed="true"] {
    border-color: var(--fr-cta);
    background: var(--fr-cta);
    color: #fff;
}

.sp-filter:disabled {
    cursor: progress;
    opacity: .65;
}

.sp-filter .nav-icon {
    width: 18px;
    height: 18px;
}

.sp-filter-note {
    flex-basis: 100%;
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
}

.sp-none {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}


/* ---------- 📋 Samlingar ---------- */

.sp-coll-row {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * var(--fr-pad));
    padding: 2px var(--fr-pad) 4px;
    list-style: none;

    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--fr-pad);
}

.sp-coll-row::-webkit-scrollbar {
    display: none;
}

.sp-coll {
    flex: 0 0 150px;
    scroll-snap-align: start;
}

.sp-coll a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--dark-text);
    text-decoration: none;
}

.sp-coll-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface-warm);
}

.sp-coll-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    height: 100%;
}

.sp-coll-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--surface-2);
}

/* 1 bild: hela rutan · 2: två halvor · 3: den första stor till vänster */
.sp-coll-grid > :only-child {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.sp-coll-grid > :first-child:nth-last-child(2),
.sp-coll-grid > :first-child:nth-last-child(2) ~ *,
.sp-coll-grid > :first-child:nth-last-child(3) {
    grid-row: 1 / -1;
}

.sp-coll-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.sp-coll-empty .nav-icon {
    width: 32px;
    height: 32px;
}

.sp-coll-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 999px;

    background: var(--pure-white);
    color: var(--orange-text);
    font-size: 11px;
    font-weight: 800;
}

.sp-coll-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
}

.sp-coll a:hover .sp-coll-title {
    text-decoration: underline;
}

.sp-coll-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.sp-coll-meta .nav-icon {
    width: 13px;
    height: 13px;
}

.sp-coll--new .sp-coll-cover {
    border: 2px dashed rgba(255, 111, 0, .45);
    box-sizing: border-box;
    background: var(--orange-soft);
    color: var(--orange-text);
}

.sp-coll--new .sp-coll-cover .nav-icon {
    width: 30px;
    height: 30px;
    stroke-width: 2.2;
}

.sp-coll--new .sp-coll-title {
    color: var(--orange-text);
}


/* ---------- ✓ Testat-mätaren ---------- */

.sp-meter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-meter-ring {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(#00A865 calc(var(--pct) * 1%), var(--surface-3) 0);
}

.sp-meter-ring > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--pure-white);
    line-height: 1.1;
}

.sp-meter-ring strong {
    color: var(--dark-text);
    font-size: 24px;
    font-weight: 900;
}

.sp-meter-ring small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.sp-meter-text {
    min-width: 0;
}

.sp-meter-text .fr-h2 {
    font-size: 1.05rem;
}

.sp-meter-text p {
    margin: 4px 0 6px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.4;
}


/* ---------- ⏳ Snart slut ---------- */

.sp-soon {
    border-color: rgba(255, 193, 7, .45);
    background: var(--yellow-soft);
    box-shadow: none;
}

.sp-soon .fr-h2 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-soon .fr-h2 .nav-icon {
    width: 20px;
    height: 20px;
    color: var(--amber-text);
}

.sp-soon-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-soon-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-soon-food {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--dark-text);
    text-decoration: none;
}

.sp-soon-food img {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--pure-white);
}

.sp-soon-food span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-soon-food strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
}

.sp-soon-food small {
    color: var(--text-2);
    font-size: 12px;
}

.sp-soon-food em {
    color: var(--amber-text);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.sp-soon .invite-btn {
    flex: none;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    border: 0;
    background: var(--fr-cta);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.sp-soon .invite-btn-icon {
    display: none;
}


/* ---------- "Har du testat?" och veckans utmaning i sidokolumnen ---------- */

.sp-nudge > *,
.sp-challenge > * {
    margin: 0;
}

.sp-challenge:empty {
    display: none;
}


/* ---------- 🗺️ Sparat på kartan ---------- */

.sp-map {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.sp-map > .fr-btn {
    grid-column: 1 / -1;
}

.sp-map-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue-text);
}

.sp-map-icon .nav-icon {
    width: 26px;
    height: 26px;
}

.sp-map p {
    margin: 4px 0 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.4;
}


/* ---------- Korten: 🕒 öppet nu och 👯 vill också (bara på Sparat) ---------- */

.mh-card-hours {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.mh-card-hours i {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface-4);
}

.mh-card-hours.is-open {
    color: var(--green-text);
}

.mh-card-hours.is-open i {
    background: #00A865;
}

.mh-card-hours strong {
    font-weight: 800;
}

.mh-card-also {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    color: var(--text-2);
    font-size: 13px;
}

.mh-card-also .avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
}

.sp-page .saved-tip {
    margin: 4px 0 0;
    text-align: center;
}


/* ---------- Mobil ---------- */

@media (max-width: 640px) {
    .sp-tabs {
        margin: 10px -14px -4px;
        padding: 0 4px;
    }

    .sp-tab {
        padding: 0 11px;
    }

    /* Bara ikonen — aria-label säger vad den gör */
    .sp-map-btn {
        width: 44px;
        padding: 0;
        border-radius: 50%;
    }

    .sp-map-btn span {
        display: none;
    }

    .sp-toolbar {
        gap: 8px;
    }

    .sp-filters {
        flex-basis: 100%;
        margin: 0 -12px;
        padding: 0 12px;
    }

    .sp-coll {
        flex-basis: 132px;
    }
}

/* ===== main/css/news_page.css ===== */
/* =====================================================
   📣 NYHETER — /nytt/ (news/list.html), nyhetens sida (news/detail.html)
   och ✨ Nytt i appen (news/app_updates.html).
   Rubriken + flikarna: fr-head (friends_page.css) + sp-tabs (saved_page.css).
   Korten (news-item) kommer från hype_post.css — här blir de rader med
   bilden till höger på mobil och ett rutnät på dator.
   Typernas färger (--news-bg, --news-accent): hype_post.css.
===================================================== */

.nw-page {
    --nw-gutter: 20px;          /* = explore-page:s kant, raderna att svepa går ut till den */
    --nw-cal: #6d28d9;          /* kalenderbladets band: vit text går att läsa i båda temana */
}

/* Toppnyheten utan bild: typens färg, mörk nog för vit text */
.news-item--news      { --news-hero: linear-gradient(140deg, #FF8A3D 0%, #C2410C 55%, #7C2D12 100%); }
.news-item--new_place { --news-hero: linear-gradient(140deg, #34D399 0%, #047857 55%, #064E3B 100%); }
.news-item--event     { --news-hero: linear-gradient(140deg, #A78BFA 0%, #6D28D9 55%, #3B0764 100%); }
.news-item--contest   { --news-hero: linear-gradient(140deg, #F472B6 0%, #BE185D 55%, #831843 100%); }
.news-item--update    { --news-hero: linear-gradient(140deg, #60A5FA 0%, #1D4ED8 55%, #1E3A8A 100%); }


/* ---------- Rubriken ---------- */

.nw-head .fr-title {
    margin-top: 0;
}

.nw-new {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;

    background: rgba(255, 111, 0, .1);
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 800;
}

.nw-new i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hype-orange);
}

.nw-feedback-link {
    margin: 0 2px 22px;
}


/* ---------- Rubriker för delarna ---------- */

.nw-section {
    margin-top: 8px;
}

.nw-section + .nw-section {
    margin-top: 32px;
}

.nw-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 0 2px 12px;
}

.nw-section-head h2 {
    margin: 0;
    color: var(--dark-text);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -.01em;
}

.nw-month + .nw-month {
    margin-top: 26px;
}

.nw-month-title {
    margin: 0 2px 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}


/* ---------- 📌 Toppen: stor nyhet + 🎪 På gång ---------- */

.nw-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* (raden att svepa får inte göra kolumnen bredare än skärmen) */
    gap: 22px;
    margin-bottom: 30px;
}

.nw-events {
    min-width: 0;
}

.nw-hero-cell {
    position: relative;
    min-width: 0;
}

.nw-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    height: 100%;
    min-height: 420px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 24px;

    background: var(--news-hero, #7C2D12);
    box-shadow: 0 10px 30px rgba(30, 42, 68, .12);
    color: #fff;
    text-decoration: none;
}

.nw-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.nw-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.nw-hero:hover .nw-hero-media img {
    transform: scale(1.03);
}

.nw-hero-emoji {
    position: absolute;
    top: 12%;
    right: 8%;

    font-size: clamp(96px, 13vw, 170px);
    line-height: 1;
    transform: rotate(-10deg);
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .3));
}

/* Mörkt nertill: rubriken går att läsa på vilken bild som helst (efter bilden i ordningen) */
.nw-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0) 28%, rgb(0 0 0 / .8) 100%);
}

.nw-hero-chips {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 100px;   /* ✏️ Redigera uppe till höger (MatHajp-teamet) */

    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nw-hero-chips .news-kind,
.nw-hero-chips .news-status {
    position: static;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.nw-chip-dark {
    padding: 4px 10px;
    border-radius: 999px;

    background: rgb(0 0 0 / .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.nw-hero-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 640px;
    padding: 22px 22px 20px;
}

.nw-hero-title {
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.nw-hero-when,
.nw-hero-where {
    font-size: 14px;
    font-weight: 800;
}

.nw-hero-where {
    color: rgb(255 255 255 / .9);
    font-weight: 700;
}

.nw-hero-text {
    color: rgb(255 255 255 / .9);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.nw-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;

    color: rgb(255 255 255 / .85);
    font-size: 13px;
    font-weight: 700;
}

.nw-hero-likes {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgb(255 255 255 / .18);
}

.nw-hero.is-unread .news-dot,
.nw-ticket.is-unread .news-dot {
    display: inline-block;
}

.nw-hero:focus-visible,
.nw-ticket:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 3px;
}

/* Dator: toppnyheten bredvid På gång */
@media (min-width: 901px) {

    .nw-top {
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: 20px;
    }

    .nw-top.is-hero-only,
    .nw-top.is-events-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .nw-hero {
        min-height: 440px;
    }

    .nw-hero-body {
        padding: 28px 30px 26px;
    }

    .nw-hero-text {
        font-size: 16px;
    }

    .nw-top:not(.is-events-only) .nw-events {
        padding: 18px 18px 10px;
        border-radius: 24px;
        background: var(--pure-white);
        border: 1px solid var(--fr-line);
        box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
    }

    .nw-top:not(.is-events-only) .nw-section-head {
        margin: 0 0 6px;
    }

    .nw-top:not(.is-events-only) .nw-section-head h2 {
        font-size: 1.15rem;
    }
}


/* ---------- 🎪 Biljetterna (news/_event_ticket.html) ---------- */

.nw-ticket-row,
.nw-ticket-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Mobil/surfplatta: att svepa mellan, ut till kanten */
.nw-ticket-row {
    display: flex;
    gap: 10px;
    margin: 0 calc(-1 * var(--nw-gutter));
    padding: 2px var(--nw-gutter) 6px;

    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--nw-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.nw-ticket-row::-webkit-scrollbar {
    display: none;
}

.nw-ticket-row > li {
    flex: 0 0 min(76%, 260px);
    scroll-snap-align: start;
}

.nw-ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.nw-ticket {
    display: flex;
    flex-direction: column;
    gap: 10px;

    height: 100%;
    box-sizing: border-box;
    padding: 14px;
    border-radius: 18px;

    background: var(--pure-white);
    border: 1px solid var(--fr-line);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
    color: inherit;
    text-decoration: none;

    transition: border-color .2s ease;
}

.nw-ticket:hover {
    border-color: rgba(255, 111, 0, .35);
}

.nw-ticket-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.nw-ticket .news-status--soon {
    background: var(--news-bg);
}

.nw-ticket-title {
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.nw-ticket:hover .nw-ticket-title {
    color: var(--orange-text);
}

.nw-ticket-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;

    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.nw-ticket-info > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 🗓️ Kalenderbladet: månad + dag (bara utseende, datumet står i texten) */
.nw-cal {
    display: flex;
    flex: none;
    flex-direction: column;

    width: 54px;
    overflow: hidden;
    border-radius: 12px;

    background: var(--pure-white);
    border: 1px solid rgb(var(--ink-rgb) / .1);
    text-align: center;
}

.nw-cal-month {
    padding: 3px 0;
    background: var(--nw-cal);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nw-cal-day {
    padding: 3px 0 5px;
    color: var(--dark-text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

/* Dator, bredvid toppnyheten: kompakta rader (kalenderblad – rubrik – plats – status) */
@media (min-width: 901px) {

    .nw-top:not(.is-events-only) .nw-ticket-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .nw-top:not(.is-events-only) .nw-ticket {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas:
            "cal title"
            "cal info"
            "cal status";
        align-items: start;
        gap: 2px 12px;

        margin: 0 -8px;
        padding: 10px 8px;
        border: 0;
        border-radius: 14px;
        background: none;
        box-shadow: none;

        transition: background .2s ease;
    }

    .nw-top:not(.is-events-only) .nw-ticket:hover {
        background: var(--surface-cream);
    }

    .nw-top:not(.is-events-only) .nw-ticket-top {
        display: contents;
    }

    .nw-top:not(.is-events-only) .nw-cal {
        grid-area: cal;
        width: 52px;
    }

    .nw-top:not(.is-events-only) .nw-cal-day {
        font-size: 20px;
    }

    .nw-top:not(.is-events-only) .nw-ticket-title {
        grid-area: title;
        font-size: 15px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .nw-top:not(.is-events-only) .nw-ticket-info {
        grid-area: info;
    }

    .nw-top:not(.is-events-only) .nw-ticket-info > span + span {
        display: none;   /* datumet står på kalenderbladet, tiden på eventets sida */
    }

    .nw-top:not(.is-events-only) .news-status {
        grid-area: status;
        justify-self: start;
        margin-top: 2px;
        padding: 2px 8px;
        font-size: 11.5px;
    }

    .nw-top.is-events-only .nw-ticket-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 14px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
}


/* ---------- Korten: rutnät (dator) / rader (mobil) ---------- */

.nw-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));   /* 3 i bredd på en vanlig dator */
    gap: 28px 20px;
}

.nw-list .news-item-media,
.nw-rail .news-item-media {
    aspect-ratio: 16 / 10;
    border-radius: 18px;
}

.nw-list .news-item-title,
.nw-rail .news-item-title {
    font-size: 16.5px;
}

.nw-list .news-item-text {
    font-size: 14px;
}

@media (max-width: 600px) {

    /* Som Apple News: text till vänster, bilden som en ruta till höger, i ett vitt kort */
    .nw-list {
        display: block;
        padding: 0 14px;
        border-radius: 20px;
        background: var(--pure-white);
        border: 1px solid var(--fr-line);
        box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
    }

    .nw-list .news-item {
        flex-direction: row-reverse;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--fr-line);
    }

    .nw-list > :last-child .news-item,
    .nw-list > .news-item:last-child {
        border-bottom: 0;
    }

    .nw-list .news-item-body {
        flex: 1;   /* (row-reverse lägger annars texten intill bilden till höger) */
    }

    .nw-list .news-item-media {
        flex: 0 0 88px;
        width: 88px;
        aspect-ratio: 1;
        border-radius: 16px;
    }

    .nw-list .news-item-emoji {
        font-size: 36px;
        filter: none;
    }

    .nw-list .news-item-media .news-kind,
    .nw-list .news-item-media .news-status,
    .nw-list .news-item-text {
        display: none;
    }

    .nw-list .news-item-eyebrow {
        display: block;
    }

    .nw-list .news-item-title {
        font-size: 16px;
    }

    .nw-list .news-item-when {
        font-size: 12.5px;
    }

    /* ✏️ Redigera ovanpå bildrutan */
    .nw-list .news-grid-cell .news-card-edit {
        top: 18px;
        right: 6px;
    }

    .nw-list .news-card-edit-label {
        display: none;
    }
}


/* ---------- "Fler nyheter" (nyhetens sida) ---------- */

.news-more {
    max-width: 880px;
    margin: 34px auto 0;
}

.nw-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 18px;
}

@media (max-width: 900px) {
    .nw-rail {
        display: flex;
        gap: 12px;
        margin: 0 calc(-1 * var(--nw-gutter));
        padding: 2px var(--nw-gutter) 6px;

        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding: 0 var(--nw-gutter);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .nw-rail::-webkit-scrollbar {
        display: none;
    }

    .nw-rail > * {
        flex: 0 0 min(72%, 240px);
        scroll-snap-align: start;
    }
}


/* ---------- Bläddra + tomt ---------- */

.nw-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.nw-pages .fr-btn {
    background: var(--pure-white);
    border: 1px solid var(--fr-line);
}

.nw-pages .fr-btn:hover {
    background: var(--surface-2);
}

.nw-pages-count {
    color: var(--text-muted);
    font-size: 14px;
}

.nw-empty {
    margin-top: 8px;
    padding: 32px 20px;
    background: var(--pure-white);
}


/* =====================================================
   NYHETENS SIDA (news/detail.html)
===================================================== */

.nw-crumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto 10px;
}

.news-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 0 14px 0 6px;
    border-radius: 999px;

    color: var(--text-2);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.news-back .nav-icon {
    width: 22px;
    height: 22px;
}

.news-back:hover {
    background: rgb(var(--ink-rgb) / .06);
    color: var(--dark-text);
}

.fr-btn.news-edit-link {
    min-height: 40px;
    font-size: 14px;
}

.news-article {
    max-width: 880px;
    margin: 0 auto;
    overflow: hidden;

    background: var(--pure-white);
    border: 1px solid var(--fr-line);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(30, 42, 68, .07);
}

.news-article-media {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 2 / 1;
    background: var(--news-bg, var(--surface-warm));
}

.news-article-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-article-media .news-item-emoji {
    font-size: clamp(72px, 12vw, 110px);
}

.news-article-media .news-kind {
    top: 16px;
    left: 16px;
    padding: 5px 12px;
    font-size: 13px;
}

/* Texten i en läsbar bredd, bilden får vara bredare */
.news-article-body {
    display: flex;
    flex-direction: column;
    gap: 16px;

    max-width: 680px;
    margin: 0 auto;
    padding: 26px 28px 30px;
}

.news-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;

    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

.news-article-pin {
    color: var(--amber-text);
    font-weight: 800;
}

.news-article h1 {
    margin: -6px 0 0;

    color: var(--dark-text);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* ✍️ "Skriven av anna" */
.news-byline {
    margin: 0;
}

.news-byline-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

.news-byline-author strong {
    color: var(--dark-text);
    font-weight: 800;
}

.news-byline-author small {
    display: block;
    font-size: 13px;
}

a.news-byline-author:hover strong {
    color: var(--orange-text);
}

.news-byline .avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.news-byline .news-byline-team {
    background: var(--fr-cta);
    color: #fff;
    font-weight: 900;
}

/* 🎪 Biljetten under rubriken */
.news-event-when {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;

    background: var(--news-bg, var(--surface-warm));
    color: var(--dark-text);
}

.news-event-when-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.news-event-when .nw-cal {
    width: 60px;
    border-color: transparent;
}

.news-event-when .nw-cal-day {
    font-size: 24px;
}

.news-event-when-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.news-event-when strong {
    font-size: 1.05rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.news-event-price {
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}

.news-event-when .news-status {
    margin-top: 2px;
}

.fr-btn.news-calendar {
    background: var(--pure-white);
    color: var(--dark-text);
    font-weight: 800;
}

.fr-btn.news-calendar:hover {
    background: var(--surface-2);
}

.news-article-lead {
    margin: 0;

    color: var(--dark-text);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.news-article-body > .news-article-text {
    margin-top: 0;
    font-size: 1.04rem;
    line-height: 1.75;
}

.news-article-body > .news-website {
    align-self: flex-start;
    margin-top: 0;
}

.news-article-body > .news-from-feedback {
    margin: 0;
}


/* ---------- Längst ner: Kolla in + Gilla/Dela ---------- */

.news-article-footer {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--fr-line);
}

.news-article-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-article-links-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.news-article-links .home-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0;
}

/* Rätten/restaurangen som ett kort (som i chatten) */
.nw-place {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--pure-white);
}

.nw-place-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;

    color: inherit;
    text-decoration: none;
}

.nw-place-link img {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--surface-warm);
}

.nw-place-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nw-place-text strong {
    overflow: hidden;
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nw-place-link:hover strong {
    color: var(--orange-text);
}

.nw-place-text small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nw-place-hype {
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 700;
}

.nw-place-actions {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
}

.nw-place-actions > * {
    flex: 1;
}

.nw-place-actions .invite-btn {
    justify-content: center;
    height: auto;
    min-height: 44px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 111, 0, .35);
    background: rgba(255, 111, 0, .08);
    color: var(--orange-text);
    font-size: 15px;
    font-weight: 800;
}

.nw-place-actions .invite-btn:hover {
    background: rgba(255, 111, 0, .16);
}

.nw-place-actions .invite-btn-icon {
    display: none;
}

/* 🔥 Gilla (news/_reactions.html) + 🔗 Dela */
.news-article-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.news-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.news-like {
    display: inline-flex;
    align-items: center;

    min-height: 44px;
    box-sizing: border-box;
    padding: 0 18px;

    border: 1.5px solid rgb(var(--ink-rgb) / .14);
    border-radius: 999px;
    background: var(--pure-white);

    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;

    /* "håll inne" på mobil: ingen markering eller meny */
    -webkit-touch-callout: none;
    user-select: none;

    transition: border-color .2s ease, background .2s ease;
}

.news-like:hover {
    border-color: rgba(255, 111, 0, .45);
}

.news-like.is-liked {
    border-color: var(--hype-orange);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.news-like:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Varje reaktion med sitt antal: "🔥 3  😍 2" */
.news-likes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.news-likes[hidden] {
    display: none;
}

.news-like-chip {
    padding: 4px 12px;
    border-radius: 999px;

    background: rgba(255, 111, 0, .1);
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.news-like-chip.is-mine {
    box-shadow: inset 0 0 0 1.5px var(--hype-orange);
}

.news-share {
    height: 44px;
    margin-left: auto;   /* höger även när det inte finns några reaktioner */
    padding: 0 16px;
}


/* ---------- Mobil ---------- */

@media (max-width: 640px) {

    .nw-page {
        --nw-gutter: 12px;
    }

    /* "3 nya" bredvid rubriken i stället för över den */
    .nw-head .fr-head-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
    }

    .nw-new {
        order: 2;
        margin: 0;
        padding: 4px 10px;
    }

    .nw-top {
        gap: 20px;
        margin-bottom: 24px;
    }

    .nw-hero {
        min-height: 400px;
        border-radius: 22px;
    }

    .nw-hero-body {
        padding: 18px 18px 18px;
    }

    .nw-section-head h2 {
        font-size: 1.2rem;
    }

    .nw-crumbs {
        margin-bottom: 6px;
    }

    .news-article {
        border-radius: 22px;
    }

    .news-article-media {
        aspect-ratio: 4 / 3;
    }

    .news-article-body {
        gap: 14px;
        padding: 18px 18px 22px;
    }

    .news-article-lead {
        font-size: 1.08rem;
    }

    .news-article-body > .news-article-text {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nw-hero-media img {
        transition: none;
    }

    .nw-hero:hover .nw-hero-media img {
        transform: none;
    }
}

/* ===== chat/css/chat.css ===== */
/* =====================================================
   💬 CHATTAR (chat/)
   Listan, chattsidan och meddelandena — Instagram/Messenger-likt:
   egna bubblor i MatHajp-orange, andras ljusgrå, hörnen följer
   varandra i en följd, skrivraden som en pill. Mobil: hela skärmen
   är chatten. Formulären återanvänder .report-form/.invite-friend
   (feed.css, friends.css) och fr-btn (friends_page.css).
   ===================================================== */

:root {
    /* Egna bubblor: mörkare än Hajpa-knappen, så vit text går att läsa (4,6:1 i ljusaste hörnet) */
    --chat-mine: linear-gradient(135deg, #D0450F 0%, #C2410C 55%, #A8370A 100%);
    --chat-cta: #C2410C;
    --chat-line: rgb(var(--ink-rgb) / .08);
}


/* ---------- Chattikonen i headern (samma form som 🔔) ---------- */

.chat-bell .nav-icon {
    width: 20px;
    height: 20px;
}

.chat-bell {
    color: var(--dark-text);
}


/* ---------- 💬-menyn i headern (bygger på 🔔-menyns .notif-dropdown) ---------- */

.chat-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-dropdown-head a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 15px;
    text-decoration: none;
}

.chat-dropdown-head a:hover {
    background: var(--soft-gray);
}

.chat-list-compact {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.chat-list-compact .chat-row {
    padding: 8px 10px;
}

.chat-list-compact .chat-row-avatars {
    width: 44px;
    height: 44px;
}

.chat-list-compact .chat-row-avatars .avatar {
    width: 44px;
    height: 44px;
}

.chat-list-compact .chat-row-avatars.is-group .avatar {
    width: 30px;
    height: 30px;
}


/* ---------- 👯 Runda vänikoner (orange ring = olästa från hen) ---------- */

.chat-quick {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 6px 10px 10px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.chat-quick::-webkit-scrollbar {
    display: none;
}

.chat-dropdown .chat-quick {
    border-bottom: 1px solid var(--chat-line);
}

.chat-quick form {
    margin: 0;
}

.chat-quick-friend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 68px;
    padding: 4px 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.chat-quick-friend:hover,
.chat-quick-friend:focus-visible {
    background: var(--soft-gray);
}

.chat-quick-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 3px;
    border-radius: 50%;
    box-sizing: border-box;
}

.chat-quick-ring.is-unread {
    background: linear-gradient(45deg, #FFC107, #FF6F00 55%, #f0400c);
}

.chat-quick-ring .avatar {
    width: 100%;
    height: 100%;
    font-size: 18px;
    box-shadow: 0 0 0 3px var(--pure-white);
}

.chat-quick-ring:not(.is-unread) .avatar {
    box-shadow: none;
}

.chat-quick-new .chat-quick-ring {
    border: 2px dashed rgba(255, 111, 0, .55);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.chat-quick-new .nav-icon {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}

.chat-quick-friend > span:not(.chat-quick-ring):not(.visually-hidden) {
    max-width: 64px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------- Kolumnerna: listan + chatten (+ ⓘ-panelen) ----------
   Mobil/surfplatta: Chattar = listan, en chatt = bara chatten (hela skärmen).
   Dator (≥960px): listan till vänster, chatten (eller "Välj en chatt") till höger.
   Bred dator (≥1400px): ⓘ-panelen som en tredje kolumn, annars en ruta över chatten. */

.chat-placeholder,
.chat-side[data-chat-side] {
    display: none;
}

/* Mobil: listan är hela sidan, i ett kort */
.chat-side {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: var(--pure-white);
    border: 1px solid var(--chat-line);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
    overflow: hidden;
}

.chat-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 14px 4px 18px;
}

.chat-side-head h2 {
    margin: 0;
    color: var(--dark-text);
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.chat-side-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--dark-text);
    text-decoration: none;
}

.chat-side-new:hover {
    background: var(--surface-3);
}

.chat-side-new .nav-icon {
    width: 21px;
    height: 21px;
}

/* Sök + Alla/Olästa/Grupper (chat_list.js) */
.chat-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 14px 6px;
}

.chat-tools[hidden] {
    display: none;
}

.chat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    box-sizing: border-box;
    background: var(--surface-2);
    color: var(--text-muted);
}

.chat-search:focus-within {
    box-shadow: 0 0 0 2px rgba(255, 111, 0, .35);
}

.chat-search .nav-icon {
    width: 19px;
    height: 19px;
}

.chat-search input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    outline: none;
}

.chat-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-filter {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.chat-filter:hover {
    background: var(--surface-3);
}

.chat-filter[aria-pressed="true"] {
    background: var(--chat-cta);
    color: #fff;
}

.chat-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    box-sizing: border-box;
    background: #b3261e;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.chat-filter[aria-pressed="true"] .chat-filter-count {
    background: #fff;
    color: var(--chat-cta);
}

.chat-side > .chat-quick {
    flex-shrink: 0;
    border-bottom: 1px solid var(--chat-line);
}

.chat-list-none {
    margin: 0;
    padding: 18px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.chat-side-empty {
    margin: 10px;
    padding: 24px 18px;
}

@media (max-width: 959px) {
    /* Chattar på mobil: listan nästan kant i kant */
    .chat-home {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 960px) {

    .chat-layout {
        display: grid;
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
        gap: 16px;
        max-width: 1180px;
        height: calc(100dvh - 120px);
        min-height: 420px;
        margin: 0 auto;
    }

    .chat-layout .chat-room {
        height: auto;
        min-height: 0;
        max-width: none;
        margin: 0;
    }

    .chat-side,
    .chat-side[data-chat-side] {
        display: flex;
        min-height: 0;
    }

    .chat-side .chat-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        border: none;
        border-radius: 0;
    }

    .chat-side-head h2 {
        font-size: 1.35rem;
    }

    /* Chattar på dator: listan har sin egen rubrik */
    .chat-home {
        max-width: 1220px;
        padding-bottom: 16px;
    }

    .chat-home .chat-layout {
        height: calc(100dvh - 136px);
    }

    .chat-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 24px;
        text-align: center;

        border-radius: 20px;
        background: var(--pure-white);
        border: 1px solid var(--chat-line);
        color: var(--text-2);
    }

    .chat-placeholder-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: var(--orange-soft);
        color: var(--orange-text);
    }

    .chat-placeholder-icon .nav-icon {
        width: 36px;
        height: 36px;
    }

    .chat-placeholder h2 {
        margin: 6px 0 0;
        color: var(--dark-text);
    }

    .chat-placeholder p {
        margin: 0 0 10px;
    }
}


/* ---------- Listan ---------- */

.chat-list {
    margin: 0;
    padding: 4px 8px 8px;
    list-style: none;
}

.chat-list-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 10px 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.chat-list-label .nav-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.chat-row {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 10px;
    border-radius: 14px;
    color: var(--dark-text);
    text-decoration: none;
}

.chat-row:hover {
    background: var(--surface-2);
}

.chat-row.is-active {
    background: var(--orange-soft);
}

/* En vän = en stor bild, grupp = två som överlappar */
.chat-row-avatars {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
}

.chat-row-avatars .avatar {
    width: 54px;
    height: 54px;
    font-size: 20px;
    box-shadow: none;
}

.chat-row-avatars.is-group .avatar {
    position: absolute;
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.chat-row-avatars.is-group .avatar:first-child {
    top: 0;
    right: 0;
}

.chat-row-avatars.is-group .avatar:nth-child(2) {
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 3px var(--pure-white);
}

.chat-row.is-active .chat-row-avatars.is-group .avatar:nth-child(2) {
    box-shadow: 0 0 0 3px var(--orange-soft);
}

.chat-row-text {
    flex: 1;
    min-width: 0;
}

.chat-row-text strong,
.chat-row-text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-row-text strong {
    font-size: 15px;
    font-weight: 700;
}

.chat-row-text small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.chat-row-text small time {
    white-space: nowrap;
}

.chat-row.is-unread .chat-row-text strong {
    font-weight: 900;
}

.chat-row.is-unread .chat-row-preview {
    color: var(--dark-text);
    font-weight: 700;
}

.chat-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.chat-row-pin .nav-icon {
    width: 15px;
    height: 15px;
}

.chat-unread-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hype-orange);
}

.chat-list [hidden] {
    display: none;
}

.chat-pick-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}


/* ---------- Chattsidan ---------- */

.chat-room {
    --chat-offset: 120px;   /* header + marginaler */

    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--chat-offset));
    min-height: 420px;
    max-width: 820px;
    margin: 0 auto;

    border-radius: 20px;
    background: var(--pure-white);
    border: 1px solid var(--chat-line);
    box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
    overflow: hidden;
}

/* Mobil: hela skärmen är chatten, som en chattapp — headern och bottenmenyn
   ligger under, och sidan bakom scrollar inte. Med tangentbordet uppe
   (html.chat-keyboard) sätter chat.js top/height efter den synliga ytan. */
@media (max-width: 768px) {
    .chat-room {
        position: fixed;
        z-index: 1001;
        inset: 0;
        height: auto;
        min-height: 0;
        margin: 0;
        padding-top: env(safe-area-inset-top);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    html.chat-open,
    html.chat-open body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    html.chat-open .mobile-nav {
        display: none;
    }

    html.chat-keyboard .chat-room {
        bottom: auto;
        padding-top: 0;
    }
}

.chat-room-head,
.chat-compose,
.chat-error {
    flex-shrink: 0;
}

.chat-room-head {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 64px;
    padding: 6px 8px 6px 6px;
    border-bottom: 1px solid var(--chat-line);
    box-sizing: border-box;
}

.chat-back,
.chat-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--dark-text);
    text-decoration: none;
}

.chat-back:hover,
.chat-head-btn:hover {
    background: var(--surface-2);
}

.chat-head-btn[aria-expanded="true"] {
    background: rgba(255, 111, 0, .12);
    color: var(--orange-text);
}

.chat-back .nav-icon,
.chat-head-btn .nav-icon {
    width: 23px;
    height: 23px;
    stroke-width: 2.1;
}

/* Dator: listan bredvid — ingen tillbakapil */
@media (min-width: 960px) {
    .chat-layout .chat-back {
        display: none;
    }

    .chat-room-head {
        padding-left: 14px;
    }
}

.chat-room-who {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 14px;
    color: var(--dark-text);
    text-decoration: none;
}

.chat-room-who:hover {
    background: var(--surface-2);
}

.chat-room-who .chat-row-avatars {
    width: 42px;
    height: 42px;
}

.chat-room-who .chat-row-avatars .avatar {
    width: 42px;
    height: 42px;
    font-size: 16px;
}

.chat-room-who .chat-row-avatars.is-group .avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.chat-room-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-room-title h1 {
    margin: 0;
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-room-title small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------- ⓘ Om chatten ----------
   Utan JS: #om-chatten (:target). Med JS: .is-open (chat.js).
   Mobil: över hela chatten. Dator: en ruta till höger, bred dator: tredje kolumnen. */

.chat-info {
    display: none;
    flex-direction: column;
    gap: 18px;
    padding: 18px 18px 24px;
    box-sizing: border-box;
    background: var(--pure-white);
    color: var(--dark-text);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-info:target,
.chat-info.is-open {
    display: flex;
}

.chat-info.is-closed {
    display: none;
}

@media (max-width: 959px) {
    .chat-info {
        position: fixed;
        z-index: 1002;
        inset: 0;
        padding-top: max(18px, env(safe-area-inset-top));
    }
}

@media (min-width: 960px) and (max-width: 1399px) {
    .chat-info {
        position: fixed;
        z-index: 60;
        top: 84px;
        right: 16px;
        bottom: 16px;
        width: 340px;
        border-radius: 20px;
        border: 1px solid var(--chat-line);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
    }
}

@media (min-width: 1400px) {
    .chat-layout:has(.chat-info:target:not(.is-closed)),
    .chat-layout:has(.chat-info.is-open) {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) 320px;
        max-width: 1480px;
    }

    .chat-info {
        min-height: 0;
        border-radius: 20px;
        border: 1px solid var(--chat-line);
        box-shadow: 0 6px 20px rgba(30, 42, 68, .05);
    }
}

.chat-info-top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    text-align: center;
}

.chat-info-close {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--dark-text);
}

.chat-info-close:hover {
    background: var(--surface-2);
}

.chat-info-close .nav-icon {
    width: 22px;
    height: 22px;
}

.chat-info-avatars.chat-row-avatars {
    width: 84px;
    height: 84px;
}

.chat-info-avatars.chat-row-avatars .avatar {
    width: 84px;
    height: 84px;
    font-size: 32px;
}

.chat-info-avatars.chat-row-avatars.is-group .avatar {
    width: 58px;
    height: 58px;
    font-size: 22px;
}

.chat-info-avatars.chat-row-avatars.is-group .avatar:nth-child(2) {
    box-shadow: 0 0 0 4px var(--pure-white);
}

.chat-info-top h2 {
    margin: 6px 0 0;
    font-size: 1.2rem;
    font-weight: 900;
}

.chat-info-top p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.chat-info-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
}

.chat-info-actions form {
    margin: 0;
}

.chat-info-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 70px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.chat-info-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--surface-2);
}

.chat-info-action:hover .chat-info-action-icon {
    background: var(--surface-3);
}

.chat-info-action.is-on .chat-info-action-icon {
    background: rgba(255, 111, 0, .14);
    color: var(--orange-text);
}

.chat-info-action.is-on .f {
    fill: currentColor;
}

.chat-info-action .nav-icon {
    width: 21px;
    height: 21px;
}

.chat-info-note {
    margin: -8px 0 0;
    color: var(--red-text);
    font-size: 13px;
    text-align: center;
}

.chat-info-section h3 {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.chat-info-section label {
    cursor: pointer;
}

.chat-info-section .fr-btn {
    margin-top: 10px;
}

.chat-members {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-member {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-member form {
    margin: 0;
}

.chat-member-person {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 12px;
    color: var(--dark-text);
    text-decoration: none;
}

.chat-member-person:hover {
    background: var(--surface-2);
}

.chat-member-person .avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
    box-shadow: none;
}

.chat-member-person span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-member-person strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-member-person small {
    color: var(--text-muted);
    font-size: 12px;
}

.chat-member-remove.fr-btn {
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    font-size: 13px;
}

.chat-rename-row {
    display: flex;
    gap: 8px;
}

.chat-rename-row input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-sizing: border-box;
    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
}

.chat-rename-row input:focus {
    outline: none;
    border-color: rgba(255, 111, 0, .55);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .12);
}

.chat-rename-row .fr-btn {
    margin-top: 0;
}

.chat-info-leave {
    margin: auto 0 0;
}

.chat-leave {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--red-soft);
    color: var(--red-text);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.chat-leave:hover {
    filter: brightness(.97);
}


/* ---------- Meddelanden ---------- */

.chat-scroll {
    flex: 1;
    min-height: 60px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px;
    background: var(--pure-white);
}

.chat-older {
    display: block;
    margin: 0 auto 10px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--dark-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.chat-older[hidden] {
    display: none;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-msg {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 80%;
    margin-top: 10px;
}

.chat-msg.is-continued {
    margin-top: 0;
}

.chat-msg.is-mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg.is-system {
    align-self: center;
    max-width: 100%;
}

.chat-system {
    margin: 6px 0;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* Bilden bara vid sista raden i en följd, längst ner (som Messenger) */
.chat-msg-avatar {
    flex-shrink: 0;
    align-self: flex-end;
}

.chat-msg-avatar .avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
    box-shadow: none;
}

.chat-msg:has(+ .chat-msg.is-continued) .chat-msg-avatar {
    visibility: hidden;
}

/* Bilden ska stå vid bubblans nederkant, inte under brickan/tiden/läst-bilderna under den */
.chat-msg {
    --shift-reactions: 0px;
    --shift-seen: 0px;
    --shift-time: 0px;
}

.chat-msg:has(.chat-reactions > *) {
    --shift-reactions: 14px;
}

.chat-msg:has(> .chat-msg-body > .chat-seen) {
    --shift-seen: 20px;
}

.chat-msg:last-child,
.chat-msg.show-time,
.chat-msg:has(.chat-time.is-edited) {
    --shift-time: 17px;
}

@media (hover: hover) {
    .chat-msg:hover {
        --shift-time: 17px;
    }
}

.chat-msg-avatar {
    margin-bottom: calc(var(--shift-reactions) + var(--shift-seen) + var(--shift-time));
}

.chat-msg.is-continued .chat-msg-name {
    display: none;
}

.chat-msg-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.chat-msg.is-mine .chat-msg-body {
    align-items: flex-end;
}

.chat-msg-name {
    margin: 0 0 1px 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.chat-bubble {
    position: relative;
    padding: 8px 13px;
    border-radius: 18px;
    background: var(--surface-2);
    color: var(--dark-text);

    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.chat-bubble a {
    color: inherit;
    text-decoration: underline;
}

.chat-msg.is-mine .chat-bubble {
    background: var(--chat-mine);
    color: #fff;
}

/* Hörnen följer varandra i en följd: smalt hörn mot nästa/föregående bubbla */
.chat-msg:not(.is-mine):not(.is-system):has(+ .chat-msg.is-continued) :is(.chat-bubble, .chat-share) {
    border-bottom-left-radius: 6px;
}

.chat-msg.is-continued:not(.is-mine) :is(.chat-bubble, .chat-share) {
    border-top-left-radius: 6px;
}

.chat-msg.is-mine:has(+ .chat-msg.is-continued) :is(.chat-bubble, .chat-share) {
    border-bottom-right-radius: 6px;
}

.chat-msg.is-mine.is-continued :is(.chat-bubble, .chat-share) {
    border-top-right-radius: 6px;
}

/* Bara emoji ("😋🔥") → stora, utan bubbla (Message.is_emoji_only) */
.chat-bubble.is-emoji,
.chat-msg.is-mine .chat-bubble.is-emoji {
    padding: 0 2px;
    background: transparent;
    color: var(--dark-text);
    font-size: 36px;
    line-height: 1.15;
}

/* 🗑️ Borttaget meddelande — en svag markering i stället för bubblan */
.chat-bubble.is-deleted,
.chat-msg.is-mine .chat-bubble.is-deleted {
    border: 1px dashed rgb(var(--shade-rgb) / .2);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* 🔥 Dubbeltryck — en liten flamma som poppar upp över bubblan (chat.js) */
.chat-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    font-size: 44px;
    line-height: 1;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.2);
    animation: chat-burst .75s cubic-bezier(.3, 1.6, .5, 1) forwards;
}

@keyframes chat-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
    35% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
    70% { opacity: 1; transform: translate(-50%, -70%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -95%) scale(.9); }
}

/* 📅 Dag och tid ("Idag 17:04", "Igår 09:12" …) — chat.js, också efter en lång paus */
.chat-day {
    align-self: center;
    margin: 16px 0 6px;
}

.chat-day span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

/* 👀 Läst-kvitton — små bilder under det senaste meddelandet var och en läst (chat.js) */
.chat-seen {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 2px 4px 0;
}

.chat-msg.is-mine .chat-seen {
    justify-content: flex-end;
}

.chat-seen .avatar {
    width: 16px;
    height: 16px;
    font-size: 8px;
    box-shadow: 0 0 0 1px var(--pure-white);
}

/* ↩️ Citat ovanför ett svar: originalet som en blek bubbla */
.chat-quote {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin-bottom: -10px;
    padding: 6px 12px 14px;
    border-radius: 16px;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.35;
    text-decoration: none;
    opacity: .9;
}

.chat-quote strong {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 800;
}

.chat-quote span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.chat-quote.is-gone span {
    font-style: italic;
}

.chat-msg.is-mine .chat-quote {
    align-self: flex-end;
}

.chat-quote + .chat-bubble {
    box-shadow: 0 0 0 2px var(--pure-white);
}

/* Hoppar man till originalet blinkar det till */
@keyframes chat-flash {
    0%, 60% { box-shadow: 0 0 0 3px rgba(255, 111, 0, .5); }
    100% { box-shadow: 0 0 0 3px rgba(255, 111, 0, 0); }
}

.chat-msg.is-flash .chat-bubble,
.chat-msg.is-flash .chat-share {
    animation: chat-flash 1.8s ease-out;
}

/* ↩️ "Svarar anna" ovanför skrivrutan */
.chat-reply-bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    margin: 0 12px;
    padding: 6px 4px 6px 12px;
    border-left: 3px solid var(--hype-orange);
    border-radius: 12px 12px 0 0;
    background: var(--surface-2);
}

.chat-reply-bar[hidden] {
    display: none;
}

.chat-reply-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 12.5px;
}

.chat-reply-text strong {
    color: var(--orange-text);
}

.chat-reply-text span {
    overflow: hidden;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reply-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}

.chat-reply-cancel .nav-icon {
    width: 18px;
    height: 18px;
}

.chat-reply-cancel:hover {
    background: rgb(var(--shade-rgb) / .08);
}

/* ⌨️ "anna skriver…" under sista meddelandet: prickarna i en bubbla */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0 36px;
    color: var(--text-muted);
    font-size: 12px;
}

.chat-typing[hidden] {
    display: none;
}

.chat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 14px;
    border-radius: 18px;
    box-sizing: border-box;
    background: var(--surface-2);
}

.chat-typing-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing-dots i:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-typing-dots i,
    .chat-msg.is-flash .chat-bubble,
    .chat-msg.is-flash .chat-share,
    .chat-burst {
        animation: none;
    }

    .chat-burst {
        display: none;
    }
}

/* ✏️ Redigerar sitt meddelande på plats */
.chat-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(380px, 72vw);
}

.chat-edit textarea {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--hype-orange);
    border-radius: 18px;
    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    overflow: hidden;
    resize: none;
}

.chat-edit textarea:focus {
    outline: none;
}

.chat-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.chat-edit-hint {
    margin-right: auto;
    color: var(--text-muted);
    font-size: 11px;
}

@media (hover: none) {
    .chat-edit-hint {
        display: none;
    }
}

.chat-edit-cancel,
.chat-edit-save {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.chat-edit-cancel {
    border: 1px solid rgb(var(--shade-rgb) / .15);
    background: transparent;
    color: var(--text-2);
}

.chat-edit-save {
    border: 0;
    background: var(--chat-cta);
    color: #fff;
}

.chat-edit-save:disabled {
    opacity: .6;
}

/* Länkar som är knappar i chatten: ingen markerad text eller kopiera-meny vid håll inne */
.chat-back, .chat-attach, .chat-side-new, .chat-send, .chat-share-link, .chat-share-open,
.chat-list a, .chat-room-head a, .chat-head-btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Pekskärm: håll inne = reaktionsraden, dubbeltryck = 🔥 (chat.js), inte markering/meny/zoom.
   Texten kopieras med 📋 i raden i stället. */
@media (hover: none) {
    .chat-msg[data-react-url] .chat-msg-body {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }
}

/* 😋 Brickan under meddelandet — lite över bubblans kant, som i Messenger */
.chat-reactions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: -9px 8px 0;
}

.chat-msg.is-mine .chat-reactions {
    align-items: flex-end;
}

.chat-reactions:not(:has(> *)) {
    display: none;
}

.chat-reactions-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--pure-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}

.chat-reactions-pill span + span {
    font-size: 12px;
    font-weight: 700;
}

.chat-reactions-pill.is-mine {
    border-color: rgba(255, 111, 0, .55);
}

.chat-reactions-pill:hover {
    background: var(--surface-2);
}

/* Vilka som reagerat (tryck på brickan) */
.chat-reactors {
    min-width: 170px;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    background: var(--pure-white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
    font-size: 13px;
}

.chat-reactors[hidden] {
    display: none;
}

.chat-reactors li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
}

.chat-reactors-emoji {
    font-size: 18px;
    line-height: 1;
}

.chat-reactors a {
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: none;
}

.chat-reactors-remove {
    margin-left: auto;
    padding: 2px 4px;
    border: none;
    background: none;
    color: var(--orange-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Tiden: på det allra senaste meddelandet, på redigerade, när man pekar (dator)
   eller trycker en gång på bubblan (mobil, chat.js sätter .show-time) */
.chat-time {
    display: none;
    margin: 1px 6px 0;
    color: var(--text-muted);
    font-size: 11px;
}

.chat-msg:last-child .chat-time,
.chat-time.is-edited,
.chat-msg.show-time .chat-time {
    display: block;
}

@media (hover: hover) {
    .chat-msg:hover .chat-time {
        display: block;
    }
}

/* 🏪 / 🍽️ Delad restaurang eller rätt: ett riktigt kort */
.chat-share {
    display: flex;
    flex-direction: column;
    width: min(260px, 100%);
    overflow: hidden;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid var(--border);
}

.chat-share-link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--dark-text);
    text-decoration: none;
}

.chat-share-link img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--surface-warm);
}

.chat-share-link span {
    min-width: 0;
    padding: 10px 12px 0;
}

.chat-share-link strong,
.chat-share-link small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-share-link strong {
    font-size: 15px;
    font-weight: 800;
}

.chat-share-link small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
}

.chat-share-actions {
    display: flex;
    gap: 6px;
    padding: 10px 12px 12px;
}

.chat-share .invite-btn,
.chat-share-open {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.chat-share .invite-btn {
    border: 0;
    background: var(--chat-cta);
    color: #fff;
}

.chat-share .invite-btn:hover {
    background: #a8370a;
}

.chat-share .invite-btn-icon {
    display: none;
}

.chat-share-open {
    background: var(--surface-2);
    color: var(--dark-text);
}

.chat-share-open:hover {
    background: var(--surface-3);
}

/* Dator: bilden bredvid texten, som ett bredare kort */
@media (min-width: 1100px) {
    .chat-share {
        flex-direction: row;
        width: min(400px, 100%);
    }

    .chat-share-link {
        flex: 1;
        flex-direction: row;
        align-items: stretch;
    }

    .chat-share-link img {
        flex: none;
        width: 118px;
        aspect-ratio: auto;
    }

    .chat-share-link span {
        align-self: center;
        padding: 10px 12px;
    }

    .chat-share-actions {
        flex-direction: column;
        justify-content: center;
        width: 104px;
        padding: 10px 10px 10px 0;
    }
}

/* 😊 Reagera och 🚩 Rapportera — syns när man pekar på meddelandet.
   Mobil: 🚩 alltid lite svagare, reagera = håll inne på meddelandet. */
.chat-react-open,
.chat-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}

.chat-react-open .nav-icon,
.chat-report .nav-icon {
    width: 18px;
    height: 18px;
}

.chat-msg:hover .chat-react-open,
.chat-msg:hover .chat-report,
.chat-react-open:focus-visible,
.chat-report:focus-visible {
    opacity: .8;
}

.chat-react-open:hover,
.chat-report:hover {
    opacity: 1;
    background: var(--surface-2);
    color: var(--dark-text);
}

@media (hover: none) {
    .chat-report {
        opacity: .35;
    }

    /* Finns kvar för skärmläsare, men syns inte */
    .chat-react-open {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

.chat-messages .report-thanks {
    align-self: center;
    margin: 8px 0;
    padding: 8px 14px;
    font-size: 13px;
    text-align: center;
}

.chat-jump {
    position: relative;
    z-index: 2;
    align-self: center;
    margin: -48px 0 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: var(--chat-cta);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    cursor: pointer;
}


/* ---------- Skriv: + · fält med 😊 · ➤ (eller 🔥 när fältet är tomt) ---------- */

.chat-compose {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--chat-line);
    background: var(--pure-white);
}

/* Skrivrutan som en pill med 😊 inuti (emoji.js) */
.chat-field {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    border-radius: 22px;
    background: var(--surface-2);
}

.chat-field:focus-within {
    box-shadow: 0 0 0 2px rgba(255, 111, 0, .35);
}

.chat-emoji {
    position: absolute;
    right: 4px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.chat-emoji:hover {
    color: var(--dark-text);
}

.chat-emoji .nav-icon {
    width: 22px;
    height: 22px;
}

.chat-compose textarea {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 140px;
    padding: 11px 44px 11px 16px;   /* plats för 😊 */
    border: 0;
    border-radius: 22px;
    box-sizing: border-box;
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    resize: none;
    overflow-y: hidden;   /* chat.js slår på den när texten blir lång */
}

.chat-compose textarea:focus {
    outline: none;
}

.chat-compose textarea::placeholder {
    color: var(--text-muted);
}

/* 🔗 Förhandsvisning av länkkortet, precis ovanför skrivrutan */
.chat-link-preview {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    margin: 0 12px;
    padding: 8px 8px 8px 12px;
    border-left: 3px solid var(--hype-orange);
    border-radius: 12px 12px 0 0;
    background: var(--surface-2);
}

.chat-link-preview[hidden] {
    display: none;
}

.chat-link-preview img {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
}

.chat-link-preview span {
    flex: 1;
    min-width: 0;
}

.chat-link-preview strong,
.chat-link-preview small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-link-preview small {
    color: var(--text-muted);
    font-size: 12px;
}

.chat-link-preview small:first-child {
    color: var(--orange-text);
    font-weight: 700;
}

.chat-preview-remove {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-2);
    font-size: 20px;
    cursor: pointer;
}

.chat-preview-remove:hover {
    background: rgb(var(--shade-rgb) / .08);
}

/* + Dela — till vänster, så ➤ står ensam till höger */
.chat-attach,
.chat-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--chat-cta);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.chat-attach:hover,
.chat-send:hover {
    background: #a8370a;
}

.chat-attach .nav-icon {
    width: 23px;
    height: 23px;
    stroke-width: 2.4;
}

.chat-send .nav-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}

.chat-send[hidden] {
    display: none;
}

.chat-send:disabled {
    opacity: .6;
    cursor: wait;
}

/* 🔥 Snabb-🔥 när skrivrutan är tom */
.chat-fire {
    background: var(--orange-soft-2);
    color: #E8590C;
}

.chat-fire:hover {
    background: var(--orange-soft-2);
    filter: brightness(.96);
}

.chat-fire .nav-icon {
    width: 24px;
    height: 24px;
}

.chat-fire .f {
    fill: currentColor;
}

.chat-error {
    margin: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--chat-line);
    color: var(--red-text);
    font-size: 13px;
    font-weight: 600;
}

.chat-error.is-note {
    color: var(--text-muted);
}


/* ---------- 🍽️-rutan ---------- */

.chat-pick-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-pick-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
}

.chat-pick-results {
    max-height: min(46vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-pick-heading {
    margin: 2px 0 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.chat-pick-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-pick-items form {
    margin: 0;
}

.chat-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.chat-pick-item:hover,
.chat-pick-item:focus-visible {
    background: var(--surface-2);
}

.chat-pick-item:disabled {
    opacity: .6;
    cursor: wait;
}

.chat-pick-item img {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: cover;
}

.chat-pick-item > span:not(.chat-pick-send) {
    flex: 1;
    min-width: 0;
}

.chat-pick-item strong,
.chat-pick-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-pick-item small {
    color: var(--text-muted);
    font-size: 12px;
}

.chat-pick-send {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--chat-cta);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.chat-pick-empty,
.chat-pick-loading {
    margin: 8px 0;
    color: var(--text-muted);
    font-size: 14px;
}

.chat-pick-poll {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed rgb(var(--shade-rgb) / .15);
    color: var(--dark-text);
    text-decoration: none;
}

.chat-pick-poll > span:first-child {
    font-size: 22px;
}

.chat-pick-poll strong,
.chat-pick-poll small {
    display: block;
}

.chat-pick-poll small {
    color: var(--text-muted);
    font-size: 12px;
}

.chat-pick-poll:hover {
    background: var(--surface-2);
}

/* ===== lists/css/lists.css ===== */
/* =====================================================
   📋 LISTOR — sidan /@namn/listor/<slug>/, formuläret och bladet
   lists/templates/lists/*, lists/javascript/lists.js
===================================================== */

.list-hero h1 {
    margin: 4px 0 8px;
    overflow-wrap: anywhere;
}

.list-kicker {
    margin: 0;
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 700;
}

.list-by {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.list-by-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.list-by-link .avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

.list-by-link strong {
    color: var(--dark-text);
}

.list-description {
    margin: 12px 0 0;
    color: var(--text-2, var(--dark-text));
    line-height: 1.5;
}

.list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.list-items {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    background: var(--pure-white);
    scroll-margin-top: 80px;
}

.list-item:target {
    border-color: var(--hype-orange);
}

.list-item-rank {
    flex-shrink: 0;
    width: 26px;
    padding-top: 22px;
    color: var(--orange-text);
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.list-item-media img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-warm);
}

.list-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.list-item-name {
    color: var(--dark-text);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.list-item-name:hover {
    color: var(--orange-text);
}

.list-item-sub {
    color: var(--text-muted);
    font-size: 13px;
}

.list-item-note {
    margin: 4px 0 0;
    color: var(--dark-text);
    font-size: 14px;
    font-style: italic;
}

.list-item-edit summary {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12.5px;
    cursor: pointer;
}

.list-note-form {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.list-note-form input,
.list-form input[type=text],
.list-form input[type=number],
.list-form textarea,
.list-sheet-new input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgb(var(--shade-rgb) / 0.14);
    background: var(--pure-white);
    color: var(--dark-text);
    font: inherit;
}

.list-item-tools {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.list-tool {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgb(var(--shade-rgb) / 0.12);
    background: var(--pure-white);
    color: var(--dark-text);
    font-size: 14px;
    cursor: pointer;
}

.list-tool:hover {
    border-color: var(--hype-orange);
}

.list-empty {
    margin-top: 18px;
    padding: 24px;
    border-radius: 16px;
    border: 2px dashed rgba(255, 111, 0, .3);
    text-align: center;
}

/* Formuläret */
.list-form {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.list-form label:not(.settings-switch) {
    margin-top: 6px;
    font-weight: 600;
}

.list-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.list-delete {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgb(var(--shade-rgb) / 0.08);
}

.list-delete + .list-delete {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

.list-form-cover {
    width: 160px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}


/* ---------- 📍 Matguide ---------- */

/* Omslaget kant i kant, rubrikkortet (.guide-head) ligger över dess nederkant */
.list-cover {
    height: clamp(200px, 30vw, 340px);
    border-radius: 24px;
    overflow: hidden;
    background: var(--surface-warm);
}

.list-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-head {
    position: relative;
    border-radius: 24px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .1);
}

.list-cover + .guide-head {
    margin: -88px 28px 0;
}

.guide-head h1 {
    margin: 12px 0 10px;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.08;
}

.guide-head .list-actions {
    margin-top: 18px;
}

.guide-head .list-actions .mh-hype,
.guide-head .list-actions .mh-ghost {
    min-height: 44px;
    border-radius: 14px;
}

/* 🔖 Spara guiden är huvudknappen för den som tittar */
.guide-head .guide-save:not(.is-saved) {
    border-color: var(--hype-orange);
    background: var(--hype-orange);
    color: #fff;
}

/* Raderna: numret i en orange rund bricka */
.is-guide .list-item {
    align-items: center;
    gap: 14px;
    border-radius: 18px;
    border-color: var(--border);
    transition: border-color .15s ease;
}

.is-guide .list-item:hover {
    border-color: rgba(255, 111, 0, .4);
}

.is-guide .list-item-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: var(--hype-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.is-guide .list-item-media img {
    width: 68px;
    height: 68px;
    border-radius: 14px;
}

.is-guide .list-item-note {
    color: var(--text-2);
}

@media (max-width: 768px) {
    .list-cover {
        height: 220px;
        border-radius: 20px;
    }

    .list-cover + .guide-head {
        margin: -36px 8px 0;
        border-radius: 22px;
    }

    .is-guide .list-item {
        gap: 10px;
        padding: 10px;
    }

    .is-guide .list-item-rank {
        width: 26px;
        height: 26px;
        font-size: 12.5px;
    }

    .is-guide .list-item-media img {
        width: 60px;
        height: 60px;
    }
}

.list-intro {
    max-width: 680px;
    margin-top: 12px;
    color: var(--text-2, var(--dark-text));
    font-size: 1.02rem;
    line-height: 1.6;
}

.list-intro p {
    margin: 0 0 10px;
}

.list-inline-form {
    display: contents;
}

.list-report {
    margin-left: auto;
}

.list-report-btn {
    color: var(--text-muted);
}

.list-hidden-note {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 111, 0, .1);
    color: var(--orange-text);
    font-weight: 600;
}

.list-share-hint {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.list-share-off {
    opacity: .55;
    cursor: not-allowed;
}

.guide-save.is-saved {
    border-color: rgba(255, 111, 0, .45);
    color: var(--orange-text);
}

/* 📍 Guidekortet (lists/_guide_card.html): i flödet, på /guider/, Upptäck och Sparat.
   Bild med märke överst, 🔖 Spara som en knapp på bilden, staplade småbilder + antal. */
.guide-card {
    position: relative;
    margin-top: 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

.guide-card-link {
    display: block;
    color: var(--dark-text);
    text-decoration: none;
}

.guide-card-link:hover .guide-card-open {
    text-decoration: underline;
}

.guide-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--surface-warm);
}

.guide-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nere till vänster på bilden — uppe till höger sitter 🔖 Spara */
.guide-card-kicker {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgb(20 21 24 / .78);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
}

.guide-card-body {
    display: grid;
    gap: 5px;
    padding: 14px 16px 16px;
}

.guide-card-title {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.guide-card-by {
    color: var(--text-muted);
    font-size: 13px;
}

.guide-card-text {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.45;
}

.guide-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.guide-card-thumbs {
    display: flex;
    flex: none;
}

.guide-card-thumbs img {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 2px solid var(--pure-white);
    object-fit: cover;
    background: var(--surface-warm);
}

.guide-card-thumbs img + img {
    margin-left: -9px;
}

.guide-card-meta {
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: right;
}

.guide-card-open {
    color: var(--orange-text);
    font-size: 13.5px;
    font-weight: 700;
}

/* 🔖 Spara: en knapp uppe till höger på bilden */
.guide-card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
}

.guide-card-actions .guide-save {
    min-height: 34px;
    padding: 0 12px;
    border: none;
    background: rgb(20 21 24 / .78);
    color: #fff;
    font-size: 12.5px;
    backdrop-filter: blur(6px);
}

.guide-card-actions .guide-save.is-saved {
    background: var(--hype-orange);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .guide-card {
        transition: none;
    }

    .guide-card:hover {
        transform: none;
    }
}

.guide-card-off {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgb(var(--shade-rgb) / 0.05);
    color: var(--text-muted);
    font-size: 14px;
}

/* 🔖 Sparat → Sparade guider */
.saved-guides {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.saved-guides .guide-card {
    margin-top: 0;
}

/* ⭐ Utvald av MatHajp-teamet (lists/discovery.py) */
.guide-card-kicker.is-featured {
    background: #c2410c;   /* samma i mörkt läge — vit text på den håller kontrasten */
}

/* Märkena: ⭐ Utvald (guld) · 📍 Matguide · 🎯 Utmaning */
.guide-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 111, 0, .35);
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}

.guide-badge--featured {
    border-color: #e0a526;
    background: #fff4d6;
    color: #8a5a00;
}

.guide-badge--challenge {
    border-color: rgba(37, 99, 235, .35);
    background: #e8f0ff;
    color: #1d4ed8;
}

:root[data-theme="dark"] .guide-badge--featured {
    border-color: #6b4e16;
    background: #3a2a10;
    color: #ffc24d;
}

:root[data-theme="dark"] .guide-badge--challenge {
    border-color: #24476a;
    background: #14273a;
    color: #7cc4ff;
}

/* 🧭 /guider/ (lists/guides_page.html) och raden på Upptäck */
.guides-more {
    margin: 18px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.guides-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 8px 0 20px;
}

.guides-head-text {
    flex: 1 1 420px;
    min-width: 0;
}

.guides-head h1 {
    margin: 6px 0 8px;
    color: var(--dark-text);
    font-size: clamp(1.8rem, 3.6vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.guides-lead {
    max-width: 580px;
    margin: 0;
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.5;
}

.guides-create {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 15px;
    box-shadow: 0 10px 24px rgba(255, 111, 0, .25);
}

/* Alla guider | 🎯 Utmaningar + orterna */
.guides-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.guides-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--pure-white);
}

.guides-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.guides-tab:hover {
    color: var(--dark-text);
}

.guides-tab.is-active {
    background: var(--hype-orange);
    color: #fff;
    font-weight: 800;
}

.guides-tab:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.guides-places {
    margin: 0;
}

.guides-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ⭐ Den utvalda guiden stort överst (lists/_guide_hero.html) */
.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    margin-bottom: 24px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .1);
}

.guide-hero-cover {
    position: relative;
    display: block;
    min-height: 300px;
    background: var(--surface-warm);
}

/* Bilden fyller rutan — textens höjd bestämmer kortets höjd, inte bildens */
.guide-hero-cover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-hero-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 28px 30px;
}

.guide-hero-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.12;
}

.guide-hero-title a {
    color: var(--dark-text);
    text-decoration: none;
}

.guide-hero-title a:hover {
    color: var(--orange-text);
}

.guide-hero-text {
    margin: 0;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.55;
}

.guide-hero-by {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
}

.guide-hero-by .avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.guide-hero-by strong {
    color: var(--dark-text);
}

.guide-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.guide-hero-stats strong {
    color: var(--dark-text);
}

.guide-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}

.guide-hero-actions .mh-hype,
.guide-hero-actions .guide-save {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 14px;
}

@media (max-width: 768px) {
    .guides-head {
        align-items: flex-start;
    }

    .guides-create {
        width: 100%;
        justify-content: center;
    }

    .guides-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .guides-tab {
        justify-content: center;
    }

    .guide-hero {
        grid-template-columns: 1fr;
    }

    .guide-hero-cover {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .guide-hero-cover img {
        position: static;
    }

    .guide-hero-body {
        padding: 18px 18px 20px;
    }

    .guide-hero-actions .mh-hype {
        flex: 1;
        justify-content: center;
    }
}

/* Upptäck på mobil: svep-rad som rätterna och restaurangerna (explore.css → discover-rail) */
@media (max-width: 768px) and (pointer: coarse) {

    .saved-guides.guides-rail {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .guides-rail::-webkit-scrollbar {
        display: none;
    }

    .guides-rail > * {
        scroll-snap-align: start;
    }

}

.list-share-preview-label {
    margin: 10px 0 0;
    font-weight: 600;
}

/* 🗺️ Guiden på kartan (lists/_guide_map.html, mini_map.js) */
.guide-map {
    margin-top: 22px;
}

.guide-map-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.guide-map-head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.guide-map-head small {
    color: var(--text-muted);
}

.guide-map-box {
    position: relative;
    isolation: isolate;   /* Leaflets z-index stannar i rutan */
    height: 280px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgb(var(--ink-rgb) / .08);
    background: var(--surface-warm);
}

.guide-map-box[hidden] {
    display: none;
}

.guide-map-canvas {
    position: absolute;
    inset: 0;
    font: inherit;
    background: var(--surface-warm);
}

[data-theme="dark"] .guide-map-box .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.6);
}

.guide-map-box .leaflet-control-attribution {
    background: rgb(var(--surface-rgb) / .85);
    color: var(--text-muted);
    font-size: 10px;
}

.guide-map-open {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgb(var(--ink-rgb) / .12);
    background: var(--pure-white);
    color: var(--dark-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgb(0 0 0 / .12);
}

@media (max-width: 600px) {
    .guide-map-box {
        height: 230px;
    }
}

/* 📋 LISTA | 🗺️ KARTA (guide_view.js) — med flikarna är kartan stor och går att dra i */
.guide-views {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

.guide-views[hidden],
.guide-map[hidden],
.list-items[hidden],
.list-item-distance[hidden],
.guide-near[hidden],
.guide-near-status[hidden] {
    display: none;
}

.guide-views-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--pure-white);
}

.guide-view-tab {
    min-height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--text-2, var(--dark-text));
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.guide-view-tab.is-active {
    background: var(--hype-orange);
    color: #fff;
    font-weight: 800;
}

.guide-near {
    min-height: 40px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .guide-views {
        margin-top: 16px;
    }

    .guide-views-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 1 1 100%;
    }
}

.guide-view-tab:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

.guide-near-status {
    margin: -4px 0 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.list-item-distance {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 12px;
    font-weight: 800;
}

.has-guide-views .guide-map {
    margin-top: 0;
}

.has-guide-views .guide-map-box {
    height: min(70vh, 560px);
}

.guide-map-legend {
    color: var(--green-engaging, #00a865);
    font-weight: 700;
}

/* 🖥️ Dator: raderna till vänster, kartan står still till höger (guide_view.js visar båda) */
@media (min-width: 1024px) {
    .guide-split.has-map {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .guide-split.has-map .list-items {
        margin-top: 0;
    }

    .guide-split.has-map .guide-map {
        position: sticky;
        top: 92px;   /* under den klistrade headern */
        margin-top: 0;
    }

    .has-guide-views .guide-split.has-map .guide-map-box {
        height: calc(100vh - 140px);
        max-height: 760px;
    }

    .guide-views-tabs {
        display: none;   /* båda syns */
    }

    .guide-views {
        justify-content: flex-end;
    }
}

/* Raden markerad från kartan (tryck på en markör) */
.list-item.is-highlight {
    border-color: rgba(255, 111, 0, .55);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .18);
}

/* Rutan vid en markör (mini_map.js → guidePopup) */
.guide-popup-wrap .leaflet-popup-content {
    margin: 12px 14px;
    font: inherit;
}

.guide-popup-place {
    margin: 0 0 6px;
    font-weight: 800;
}

.guide-popup ul {
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.guide-popup li {
    display: grid;
    gap: 2px;
    font-size: 13px;
}

.guide-popup-note {
    color: var(--text-muted);
}

.guide-popup a {
    color: var(--orange-text);
    font-weight: 700;
}

/* 🎯 Utmaning (lists/_challenge_box.html): ikon + rubrik, förloppsstapel, stegen som rader
   (klara = orange bock), favoriten och "Dela på Stories" när allt är klart */
.challenge-box {
    display: grid;
    gap: 16px;
    margin: 18px 0;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    scroll-margin-top: 80px;
}

.challenge-box.is-complete {
    border-color: rgba(255, 111, 0, .55);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .12);
}

.challenge-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.challenge-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--hype-orange);
    color: #fff;
    box-shadow: 0 10px 22px rgba(255, 111, 0, .28);
}

.challenge-icon svg {
    width: 26px;
    height: 26px;
}

.challenge-title-wrap {
    flex: 1 1 240px;
    min-width: 0;
}

.challenge-head h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
}

.challenge-sub {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.challenge-count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
}

.challenge-login {
    justify-self: start;
}

.challenge-progress {
    display: grid;
    gap: 8px;
}

.challenge-progress-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
    font-size: 14px;
}

.challenge-progress-text small {
    color: var(--text-muted);
    font-size: 13px;
}

.challenge-track {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.challenge-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--hype-orange);
    transition: width .3s ease;
}

.challenge-steps {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.challenge-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1.5px dashed var(--border-strong);
}

.challenge-step.is-done {
    border: 1px solid rgba(255, 111, 0, .35);
    background: var(--orange-soft);
}

.challenge-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    color: var(--text-2);
    font-weight: 900;
}

.challenge-step.is-done .challenge-check {
    border-color: var(--hype-orange);
    background: var(--hype-orange);
    color: #fff;
}

.challenge-step-text {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.challenge-step-text strong {
    font-size: 15px;
}

.challenge-step-text small {
    color: var(--text-muted);
    font-size: 13px;
}

.challenge-step-text a {
    color: var(--orange-text);
    font-weight: 700;
}

.challenge-step-state {
    color: var(--orange-text);
    font-size: 13px;
    font-weight: 800;
}

.challenge-favorite {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.challenge-favorite label {
    font-weight: 800;
}

.challenge-favorite select {
    flex: 1;
    min-width: 160px;
}

.challenge-favorite .mh-hype {
    min-height: 42px;
    border-radius: 12px;
}

.challenge-share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.challenge-share-locked {
    color: var(--text-muted);
    font-size: 13.5px;
}

.challenge-share-locked strong {
    color: var(--text-2);
}

@media (max-width: 768px) {
    .challenge-box {
        padding: 18px 16px;
        border-radius: 22px;
    }

    .challenge-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .challenge-step {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .challenge-bar {
        transition: none;
    }
}

.guide-card-kicker .guide-card-challenge {
    margin-left: 4px;
}

/* ➕ Lägg till (ägaren) */
.list-add {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 2px dashed rgba(255, 111, 0, .3);
}

.list-add h2 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.list-add .composer-search,
.list-add .composer-select {
    width: 100%;
}

.list-add-picked {
    display: grid;
    gap: 8px;
}

.list-add-picked[hidden] {
    display: none;
}

.list-add-picked label {
    font-weight: 600;
}

.list-add-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 768px) {
    .list-report {
        margin-left: 0;
    }
}

/* Profilens flik 📋 Listor */
.profile-lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-list-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    background: var(--pure-white);
    color: var(--dark-text);
    text-decoration: none;
    box-sizing: border-box;
}

.profile-list-card:hover {
    border-color: var(--hype-orange);
}

.profile-list-card small {
    color: var(--text-muted);
}

.profile-list-card.is-guide {
    border-color: rgba(255, 111, 0, .25);
}

/* 📍 Guidens omslag överst i kortet */
.profile-list-cover {
    width: calc(100% + 28px);
    margin: -14px -14px 6px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.profile-list-card--new {
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 111, 0, .35);
    background: var(--surface-cream);
    font-weight: 700;
}

/* Bladet */
.list-sheet {
    width: min(420px, calc(100vw - 32px));
    max-height: min(560px, 80vh);
    padding: 16px;
    border: 0;
    border-radius: 18px;
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 20px 60px rgb(0 0 0 / .25);
}

.list-sheet::backdrop {
    background: rgb(0 0 0 / .4);
}

.list-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 17px;
}

.list-sheet-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgb(var(--shade-rgb) / 0.06);
    color: var(--dark-text);
    font-size: 20px;
    cursor: pointer;
}

.list-sheet-rows {
    display: grid;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.list-sheet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
}

.list-sheet-row:hover {
    background: rgba(255, 111, 0, .07);
}

.list-sheet-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--hype-orange);
}

.list-sheet-name {
    overflow-wrap: anywhere;
}

.list-sheet-new {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgb(var(--shade-rgb) / 0.08);
}

.list-sheet-empty,
.list-sheet-loading {
    margin: 4px 0;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .list-item-rank {
        display: none;
    }

    .list-item-media img {
        width: 60px;
        height: 60px;
    }
}


/* ---------- ✓ Framsteg på listan (lists/progress.py) ---------- */

.list-progress {
    display: grid;
    gap: 8px;
    max-width: 480px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.list-progress-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
}

.list-progress-text small {
    color: var(--text-muted);
}

.list-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.list-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green, #34c98a);
    transition: width .3s ease;
}

.list-progress.is-complete {
    border-color: #34c98a;
}

.list-item.is-tried .list-item-media img {
    box-shadow: 0 0 0 2px #34c98a;
}

.list-item-tried,
.list-item-try {
    justify-self: start;
    align-self: flex-start;
    width: fit-content;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.list-item-tried {
    display: inline-block;
    background: rgb(52 201 138 / .15);
    color: var(--green-text, #15803d);
}

.list-item-try {
    border: 1px solid var(--border);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.list-item-try:hover {
    border-color: var(--border-strong);
}

.list-item-try:disabled {
    opacity: .6;
    cursor: default;
}

/* ---------- 📍 Ny / ändra matguide (lists/list_form.html, guide_form.js) ----------
   Steg överst (1 Om guiden · 2 Lägg till ställen · 3 Dela), formuläret till vänster och
   förhandsvisningen av kortet till höger på dator. */

.settings-page.guide-form-page {
    max-width: 1100px;
}

.guide-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.guide-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 800;
}

.guide-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
}

.guide-step.is-current {
    border: 1.5px solid var(--hype-orange);
    background: var(--orange-soft);
    color: var(--orange-text);
}

.guide-step.is-current .guide-step-num {
    background: var(--hype-orange);
    color: #fff;
}

.guide-form-layout {
    display: grid;
    gap: 20px;
}

@media (min-width: 1024px) {
    .guide-form-layout {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }

    .guide-preview {
        position: sticky;
        top: 92px;
    }
}

.guide-form-page .settings-card {
    border-radius: 24px;
}

.guide-form-page .list-form input[type=text],
.guide-form-page .list-form input[type=number],
.guide-form-page .list-form textarea {
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.guide-form-page .list-form input[type=text]:focus,
.guide-form-page .list-form input[type=number]:focus,
.guide-form-page .list-form textarea:focus {
    border-color: var(--hype-orange);
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .15);
}

/* Omslagsbilden: en streckad yta att släppa/välja en bild i */
.guide-form-page .list-form input[type=file] {
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 18px;
    border: 1.5px dashed var(--border-strong);
    background: var(--surface-warm);
    color: var(--text-muted);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.guide-form-page .list-form input[type=file]:hover {
    border-color: var(--hype-orange);
}

.guide-form-page .list-form input[type=file]::file-selector-button {
    margin-right: 12px;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: var(--hype-orange);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

/* Brytarna som egna rutor */
.guide-form-page .settings-switch {
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.guide-form-page .settings-switch:has(input:checked) {
    border-color: rgba(255, 111, 0, .4);
    background: var(--orange-soft);
}

.guide-form-page .list-form-actions .mh-hype,
.guide-form-page .list-form-actions .mh-ghost {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 15px;
}

.guide-form-page .list-form-actions .mh-hype {
    box-shadow: 0 10px 24px rgba(255, 111, 0, .25);
}

/* 👀 Förhandsvisningen */
.guide-preview {
    display: grid;
    gap: 14px;
}

.guide-preview-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.guide-card--preview {
    margin: 0;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .1);
}

.guide-card--preview:hover {
    transform: none;
}

.guide-preview-tip {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.guide-preview-tip strong {
    color: var(--dark-text);
    font-size: 14px;
}

@media (max-width: 1023px) {
    /* Mobil: förhandsvisningen efter formuläret, utan tipsrutan */
    .guide-preview-tip {
        display: none;
    }
}

/* ===== cravings/css/sugen.css ===== */
/* =====================================================
   🍽️ SUGEN? (cravings/) — frågorna, förslagen, 📱 tillsammans
   och kortet på startsidan. Färgerna är sajtens tokens (main.css),
   så mörkt läge följer med av sig självt.
   ===================================================== */

.sugen {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 0 32px;
}

.sugen [hidden] {
    display: none !important;
}

/* ---------- Frågorna ---------- */

.sugen-form fieldset {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sugen-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.sugen-progress li {
    width: 28px;
    height: 5px;
    border-radius: 999px;
    background: var(--surface-3);
    transition: background .2s ease, width .2s ease;
}

.sugen-progress li.is-done {
    background: rgba(255, 111, 0, .45);
}

.sugen-progress li.is-current {
    width: 44px;
    background: var(--hype-orange);
}

.sugen-step-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    text-align: center;
}

.sugen-step-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffb366, var(--hype-orange));
    box-shadow: 0 10px 24px rgba(255, 111, 0, .28);
    font-size: 28px;
}

.sugen-title {
    margin: 6px 0 0;
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--dark-text);
}

.sugen-title:focus {
    outline: none;
}

.sugen-lead {
    max-width: 440px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}

/* Steg 1: suget som story-ringar (main/css/rings.css) i ett rutnät.
   Radioknappen är dold — hela ringen är valet; vald = gradientring + ✓-pillret. */
.sugen-tiles {
    --ring-gap: var(--soft-gray);   /* ringens springa i innehållsytans grå */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 10px;
}

.sugen-ring {
    --ring-size: clamp(72px, 22vw, 96px);
    position: relative;
    width: 100%;
    gap: 14px;
    padding: 4px 0;
}

.sugen-ring .mh-ring-face img {
    width: 70%;
    height: 70%;
}

.sugen-ring .mh-ring-name {
    font-size: 14px;
    font-weight: 800;
    white-space: normal;   /* hela namnet, gärna på två rader */
    overflow: visible;
}

.sugen-ring-hint {
    margin-top: -10px;
    color: var(--text-faint);
    font-size: 11px;
    line-height: 1.2;
}

.sugen-option input,
.sugen-chip-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sugen-option:has(input:focus-visible),
.sugen-chip-check:has(input:focus-visible) {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Steg 2 och 3: rader att välja */
.sugen-options {
    display: grid;
    gap: 10px;
}

.sugen-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 2px solid var(--border);
    background: var(--pure-white);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sugen-option::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--pure-white);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sugen-option--check::before {
    display: none;
}

.sugen-option:has(input:checked) {
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 4px rgba(255, 111, 0, .14);
}

.sugen-option:has(input:checked)::before {
    border-color: var(--hype-orange);
    box-shadow: inset 0 0 0 4px var(--pure-white), inset 0 0 0 10px var(--hype-orange);
}

.sugen-option.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.sugen-option-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--orange-soft);
    font-size: 21px;
}

.sugen-option--check:has(input:checked) .sugen-option-icon {
    background: var(--hype-orange);
}

.sugen-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sugen-option-text strong {
    color: var(--dark-text);
    font-size: 16px;
}

.sugen-option-text small {
    color: var(--text-muted);
    font-size: 13px;
}

.sugen-option--check::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 2px solid var(--border-strong);
}

.sugen-option--check:has(input:checked)::after {
    content: "✓";
    display: grid;
    place-items: center;
    border-color: var(--hype-orange);
    background: var(--hype-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.sugen-position,
.sugen-hint,
.sugen-error {
    margin: 12px 2px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.sugen-error {
    color: var(--red-text);
    font-weight: 700;
}

/* 📍 Steg 2: raden står ovanför avstånden */
.sugen-step > .sugen-position {
    margin: 0 2px 12px;
}

.sugen-position.is-busy {
    color: var(--dark-text);
    font-weight: 700;
}

/* Ingen position → tydlig ruta med "Försök igen", inte en grå rad man missar */
.sugen-position.is-error {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 111, 0, .35);
    background: var(--orange-soft);
    color: var(--dark-text);
    font-size: 14px;
    line-height: 1.45;
}

.sugen-position-retry {
    display: flex;
    margin-top: 10px;
    min-height: 40px;
}

.sugen-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Bestäm tillsammans: knappen ligger direkt i formuläret (inte i ett steg) — samma luft under som "Nästa →" */
.sugen-form > .sugen-actions {
    margin-bottom: 28px;
}

/* 🌱🐕 Måste passa (main/diet.py) — rutorna har samma stil som tipsen (detail.css) */
.sugen-must {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.sugen-must-title {
    margin: 0 0 10px;
    color: var(--dark-text);
    font-size: 15px;
    font-weight: 800;
}

.sugen-must-title small {
    color: var(--text-muted);
    font-weight: 600;
}

.sugen-must-note {
    margin: 10px 2px 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.sugen-actions .mh-hype,
.sugen-actions .mh-ghost {
    justify-content: center;
    min-height: 50px;
    font-size: 16px;
}

.sugen-next,
.sugen-submit {
    flex: 1;
}

/* Andra vägar: 📱 tillsammans, 📊 vänner */
.sugen-together-link {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.sugen-alt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--pure-white);   /* kort på innehållsytan, inte grått på grått */
    color: var(--text-2);
    font-size: 14px;
    text-decoration: none;
}

.sugen-alt > span:first-child {
    font-size: 22px;
}

.sugen-alt strong {
    display: block;
    color: var(--dark-text);
}

.sugen-alt:hover {
    background: var(--orange-soft);
}

/* ---------- Förslagen ---------- */

.sugen-results {
    max-width: 1100px;
}

.sugen-results-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.sugen-back-link {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--pure-white);
    color: var(--dark-text);
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
}

.sugen-results-title {
    margin: 0;
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    font-weight: 900;
    color: var(--dark-text);
}

.sugen-results-sub {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.sugen-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 600;
}

.sugen-cards {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sugen-card {
    position: relative;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--pure-white);
    box-shadow: 0 6px 20px rgb(0 0 0 / .05);
    transition: border-color .15s ease, box-shadow .15s ease, opacity .2s ease;
}

.sugen-card:hover {
    border-color: rgba(255, 111, 0, .35);
}

.sugen-card.is-highlight {
    border-color: rgba(255, 111, 0, .55);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, .18);
}

.sugen-card.is-swapping {
    opacity: .45;
}

.sugen-card.is-new {
    animation: sugen-in .35s ease;
}

@keyframes sugen-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sugen-card.is-new { animation: none; }
}

.sugen-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.sugen-card-media {
    position: relative;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-warm);
}

.sugen-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sugen-card-number {
    position: absolute;
    top: 6px;
    left: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hype-orange);
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 2px 8px rgb(0 0 0 / .25);
}

.sugen-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sugen-chip {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--orange-soft);
    color: var(--orange-text);
    font-size: 12px;
    font-weight: 800;
}

.sugen-card-title {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--dark-text);
}

.sugen-card-place {
    margin: 0;
    color: var(--text-2);
    font-size: 14px;
}

.sugen-card-place-link {
    position: relative;
    z-index: 2;
    color: inherit;
    font-weight: 700;
}

.sugen-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.sugen-card-meta .mh-chip {
    position: static;
}

.sugen-card-reason {
    margin: 4px 0 0;
    color: var(--dark-text);
    font-size: 13.5px;
    line-height: 1.35;
}

.sugen-card-fits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 0;
}

.sugen-person {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
}

.sugen-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: start;
}

.sugen-card-actions .sugen-save {
    position: static;
}

.sugen-swap {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.sugen-swap:hover {
    background: var(--orange-soft);
    color: var(--orange-text);
}

.sugen-swap-status {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.sugen-results-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.sugen-results-actions > * {
    justify-content: center;
    min-height: 48px;
}

.sugen-results-more {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.sugen-results-more > * {
    flex: 1 1 auto;
    justify-content: center;
}

.sugen-empty {
    padding: 32px 18px;
    border-radius: 18px;
    background: var(--pure-white);
    border: 1px solid var(--border);
    text-align: center;
}

.sugen-empty-emoji {
    margin: 0;
    font-size: 42px;
}

.sugen-empty h2 {
    margin: 6px 0;
    font-size: 1.2rem;
}

.sugen-empty p {
    color: var(--text-muted);
}

.sugen-empty-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px 0;
}

.sugen-results .guide-split {
    margin-top: 4px;
}

@media (max-width: 560px) {
    .sugen-tiles {
        gap: 16px 6px;
    }

    .sugen-card {
        grid-template-columns: 92px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 8px;
    }

    .sugen-card-title {
        font-size: 16px;
    }

    .sugen-swap-text {
        display: none;
    }
}

/* ---------- 📱 Vi sitter tillsammans ---------- */

.sugen-people {
    display: grid;
    gap: 12px;
}

.sugen-person-card {
    position: relative;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
    border-radius: 16px;
    border: 1px solid var(--border) !important;
    background: var(--pure-white);
}

.sugen-person-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-weight: 800;
    color: var(--dark-text);
}

.sugen-person-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hype-orange);
    color: #fff;
    font-size: 13px;
}

.sugen-person-name {
    width: 100%;
    margin: 8px 0 4px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--dark-text);
    font: inherit;
    font-size: 15px;
}

.sugen-person-remove {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 18px;
    cursor: pointer;
}

.sugen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.sugen-chip-check {
    position: relative;
    cursor: pointer;
}

.sugen-chip-check span {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
}

.sugen-chip-check input:checked + span {
    border-color: var(--hype-orange);
    background: var(--hype-orange);
    color: #fff;
}

.sugen-add-person {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

.sugen-step-head--small {
    margin: 24px 0 10px;
}

.sugen-step-head--small .sugen-title {
    font-size: 1.15rem;
}

.sugen-options--row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.sugen-option--compact {
    padding: 10px 12px;
}

/* ---------- 🔥 Upptäck: rutan bredvid Trendigt + "Få 3 förslag" vid Kategorier ---------- */

.explore-shortcut--sugen {
    background: var(--orange-soft);
    border-color: rgba(255, 111, 0, .25);
}

.explore-shortcut--sugen strong {
    color: var(--orange-text);
}

.explore-section .home-section-links {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 14px;
}

/* =====================================================
   🔥 Startsidan, inloggad: Sugen-kortet är hälsningen (cravings/_home_tiles.html)
   "God kväll, Anna" + "Få 3 förslag", suget som story-ringar (main/css/rings.css)
   och en länk till alla kategorier. Utloggade har ringarna i heron (home_hero.css).
===================================================== */
.sugen-home {
    margin: 0;
    padding: 22px 22px 16px;
    border-radius: 24px;
    border: 1px solid rgb(var(--shade-rgb) / .08);
    background: var(--pure-white);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .06);
}

.sugen-home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 14px;
}

.sugen-home-hi {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

.sugen-home-title {
    margin: 0;
    color: var(--dark-text);
    font-size: clamp(1.45rem, 2.6vw, 1.75rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.sugen-home-title span {
    color: var(--orange-text);
}

.sugen-home-go {
    flex-shrink: 0;
}

/* Ringarnas springa i kortets färg */
.sugen-home .mh-rings-scroller {
    --ring-gap: var(--pure-white);
}

.sugen-home-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgb(var(--shade-rgb) / .07);
    color: var(--text-muted);
    font-size: 13px;
}

.sugen-home-foot a {
    color: var(--orange-text);
    font-weight: 700;
}

@media (max-width: 768px) {
    /* Mobil: rubrik → ringarna (svep ut i kanten) → knappen i full bredd → länken.
       Huvudet "försvinner" (display: contents) så att knappen kan flyttas under ringarna. */
    .sugen-home {
        display: flex;
        flex-direction: column;
        padding: 18px 0 14px 16px;
        border-radius: 20px;
    }

    .sugen-home-head {
        display: contents;
    }

    .sugen-home-heading {
        margin-bottom: 10px;
        padding-right: 16px;
    }

    .sugen-home .mh-rings {
        margin: 0;
        padding: 4px 16px 6px 0;
    }

    .sugen-home-go {
        order: 3;
        margin: 14px 16px 0 0;
        justify-content: center;
        text-align: center;
    }

    .sugen-home-foot {
        order: 4;
        margin-right: 16px;
        font-size: 12.5px;
    }

    .sugen-home-foot > span {
        display: none;
    }
}

/* ===== main/css/menu.css ===== */
/* =====================================================
   📋 HELA MENYN (main/menu.py)
   - menysidan /restaurang/<slug>/meny/ (menu/menu.html, menu/_menu_row.html)
   - "Se hela menyn" på restaurangsidan
   - ägarpanelens kort #meny (owners/_menu_card.html) och "Klistra in menyn"
   Färger från tokens i main.css, så mörkt läge följer med.
===================================================== */

/* ---------- Restaurangsidan ---------- */

.rd-full-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgb(var(--shade-rgb) / 0.1);
    background: var(--pure-white);
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: none;
}

.rd-full-menu:hover {
    border-color: var(--hype-orange);
    color: var(--orange-text);
}

/* 📜 "Visa alla N rätter" (detail_page.js) — hela bredden, som "Se hela menyn" */
.rd-more-dishes {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

.rd-more-dishes[hidden] {
    display: none;
}


/* ---------- Menysidan ---------- */

.menu-page {
    max-width: 760px;
    margin: 0 auto;
}

.menu-header h1 {
    margin: 6px 0 6px;
    overflow-wrap: anywhere;
}

.menu-header-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.menu-header-meta a {
    color: var(--orange-text);
    font-weight: 600;
}

.menu-edit {
    margin-top: 12px;
}

.menu-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.menu-jump .mh-chip {
    text-decoration: none;
}

.menu-section {
    margin-top: 26px;
    scroll-margin-top: 80px;
}

.menu-section-title {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgb(var(--shade-rgb) / 0.08);
    font-size: 19px;
}

.menu-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgb(var(--shade-rgb) / 0.06);
}

.menu-row:last-child {
    border-bottom: 0;
}

.menu-row-text {
    flex: 1;
    min-width: 0;
}

.menu-row-name {
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.menu-row-name:hover {
    color: var(--orange-text);
}

/* Text-rader (inte rätter) lite lugnare än ⭐-raderna */
.menu-row:not(.is-dish) .menu-row-name {
    font-weight: 600;
}

.menu-row-star {
    font-size: 13px;
}

.menu-popular .food-card-feed-grid {
    margin-top: 4px;
}

.menu-row-when {
    margin-left: 6px;
    color: var(--orange-text);
    font-size: 12px;
    font-weight: 700;
}

/* 🌱 Kost efter namnet (main/diet.py) */
.menu-row-diet {
    margin-left: 6px;
    font-size: 13px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.menu-row-description {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.menu-row-price {
    flex-shrink: 0;
    padding-top: 1px;
    color: var(--dark-text);
    font-weight: 700;
    white-space: nowrap;
}

.menu-hype {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 54px;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgb(var(--shade-rgb) / 0.12);
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.menu-hype.active {
    border-color: rgba(255, 111, 0, .45);
    background: rgba(255, 111, 0, .12);
    color: var(--orange-text);
}

.menu-files-updated {
    margin: -4px 0 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.menu-files-kind {
    margin: 16px 0 8px;
    font-size: 15px;
}

.menu-files-list {
    display: grid;
    gap: 12px;
}

.menu-photo {
    margin: 0;
}

.menu-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
}

.menu-photo figcaption {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.menu-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgb(var(--shade-rgb) / 0.1);
    background: var(--pure-white);
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: none;
}

.menu-pdf:hover {
    border-color: var(--hype-orange);
}

.menu-guest-upload {
    padding: 16px;
    border-radius: 16px;
    border: 1px dashed rgb(var(--shade-rgb) / 0.18);
}

.menu-guest-upload p {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 14px;
}

.menu-upload-form {
    display: grid;
    gap: 12px;
    max-width: 460px;
}

.menu-upload-form .suggest-food-form-group,
.menu-upload-form .suggest-food-submit {
    margin: 0;
}

/* Samma fält som formulären i suggest_food.css (mörkt läge följer med) */
.menu-import-fields input,
.menu-import-fields select {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 9px 12px;
    background: var(--soft-gray);
    border: 1px solid rgb(var(--ink-rgb) / 0.12);
    border-radius: 10px;
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.menu-import-fields input:focus,
.menu-import-fields select:focus {
    border-color: var(--hype-orange);
    box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.12);
}

.menu-import-fields input::placeholder {
    color: var(--dark-text);
    opacity: 0.45;
}


/* ---------- Ägarpanelen: kortet #meny ---------- */

.owner-menu-subtitle {
    margin: 18px 0 8px;
    font-size: 15px;
}

.owner-menu-note {
    color: var(--text-muted);
    font-size: 14px;
}

.owner-menu-sections {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.owner-menu-section-form,
.owner-menu-add-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.owner-menu-section-form input[type="text"],
.owner-menu-add-section input[type="text"] {
    flex: 1 1 160px;
    min-width: 0;
}

.owner-menu-section-form small {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.owner-menu-section-buttons {
    display: inline-flex;
    gap: 4px;
}

.owner-menu-add-section {
    margin-top: 14px;
}

/* En rubrik med sina menyrader */
.owner-menu-group {
    margin-top: 16px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
}

.owner-menu-section-form .owner-menu-section-name {
    font-weight: 700;
}

.owner-menu-loose {
    margin: 0;
    font-size: 15px;
}

.owner-menu-loose small {
    color: var(--text-muted);
    font-weight: 400;
}

.owner-menu-items {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.owner-menu-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 8px 0;
    border-top: 1px solid rgb(var(--shade-rgb) / 0.06);
}

.owner-menu-item-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.owner-menu-item-text strong {
    overflow-wrap: anywhere;
}

.owner-menu-item-text small {
    color: var(--text-muted);
    white-space: nowrap;
}

.owner-menu-item-buttons,
.owner-menu-item-move {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.owner-menu-item-buttons form {
    margin: 0;
}

.owner-menu-add-item {
    display: inline-block;
    margin-top: 8px;
    color: var(--orange-text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.owner-menu-import {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgb(var(--shade-rgb) / 0.1);
    color: var(--dark-text);
    text-decoration: none;
}

.owner-menu-import:hover {
    border-color: var(--hype-orange);
}

.owner-menu-import > span:first-child {
    font-size: 24px;
}

.owner-menu-import small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
}

.owner-menu-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.owner-menu-file {
    display: grid;
    gap: 6px;
    align-content: start;
}

.owner-menu-file small {
    color: var(--text-muted);
    font-size: 12px;
}

.owner-menu-file-media {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgb(var(--shade-rgb) / 0.08);
    background: rgb(var(--shade-rgb) / 0.04);
}

.owner-menu-file-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.owner-menu-file-pdf {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 40px;
}

.owner-menu-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.owner-menu-upload {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.owner-menu-upload .suggest-food-form-group {
    margin: 0;
}

/* 📷 Foton | eller | 📄 PDF — bredvid varandra på bred skärm, under varandra på mobilen */
.owner-menu-upload-choices {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.owner-menu-upload-or {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.owner-menu-upload-choices .suggest-food-upload,
.menu-upload-form .suggest-food-upload {
    min-width: 0;
}

.owner-menu-upload-submit {
    margin-top: 0;
}

@media (max-width: 640px) {
    .owner-menu-upload-choices {
        grid-template-columns: 1fr;
    }

    .owner-menu-upload-or {
        text-align: center;
    }
}


/* ---------- Klistra in menyn: granskningen ---------- */

.menu-import-table {
    display: grid;
    gap: 8px;
}

.menu-import-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgb(var(--shade-rgb) / 0.1);
    min-width: 0;
}

.menu-import-row.is-existing {
    opacity: .6;
}

.menu-import-row.has-error {
    border-color: #b3261e;
}

.menu-import-include {
    padding-top: 8px;
}

.menu-import-include input {
    width: 18px;
    height: 18px;
}

.menu-import-fields {
    flex: 1;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.menu-import-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.menu-import-fields .menu-import-name {
    flex: 1 1 180px;
    font-weight: 700;
}

.menu-import-price {
    flex: 0 0 90px;
    width: 90px;
}

.menu-import-kr {
    color: var(--text-muted);
    font-size: 13px;
}

.menu-import-section {
    flex: 1 1 140px;
}

.menu-import-dish {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgb(var(--shade-rgb) / 0.12);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.menu-import-dish:has(input:checked) {
    border-color: rgba(255, 111, 0, .45);
    background: rgba(255, 111, 0, .12);
    color: var(--orange-text);
}

.menu-import-exists {
    color: var(--text-muted);
    font-size: 12px;
}

.menu-import-hint {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.menu-import-restart {
    margin-top: 10px;
    text-align: center;
}

/* ===== main/css/confirm_dialog.css ===== */
/* =====================================================
   BEKRÄFTELSERUTA (confirm_dialog.js) — ersätter webbläsarens confirm()
   Knapparna är .mh-ghost (Avbryt) och .mh-hype.active (bekräfta), som på korten.
===================================================== */

.mh-confirm {
    width: min(92vw, 380px);
    padding: 0;
    border: 1px solid rgb(var(--ink-rgb) / .12);
    border-radius: 22px;
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.mh-confirm::backdrop {
    background: rgba(10, 12, 18, .55);
    backdrop-filter: blur(3px);
}

.mh-confirm[open] {
    animation: mh-confirm-in .18s ease-out;
}

.mh-confirm[open]::backdrop {
    animation: mh-confirm-fade .18s ease-out;
}

@keyframes mh-confirm-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes mh-confirm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Sidan bakom rutan ska inte scrolla */
.mh-confirm-open {
    overflow: hidden;
}

.mh-confirm-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 26px 22px 20px;
    text-align: center;
}

.mh-confirm-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: rgba(59, 130, 246, .12);
    font-size: 24px;
    line-height: 1;
}

.mh-confirm.is-danger .mh-confirm-icon {
    background: rgba(240, 64, 12, .12);
}

.mh-confirm-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.mh-confirm-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
}

.mh-confirm-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
}

.mh-confirm-actions button,
.mh-confirm-actions a {
    flex: 1;
    justify-content: center;
    height: 44px;
    font-size: 15px;
}

/* "Skapa konto"-rutan (signup_prompt.js) har länkar och ett × i hörnet */
.mh-signup .mh-confirm-box {
    position: relative;
}

.mh-signup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.mh-signup-close:hover {
    background: rgb(var(--ink-rgb) / .06);
}

/* 📬 "Bekräfta din e-post" (verify_email.js) — större ikon, adressen får brytas */
.mh-verify .mh-confirm-icon {
    width: 64px;
    height: 64px;
    background: var(--orange-soft-2);
    font-size: 30px;
}

.mh-verify .mh-confirm-title {
    font-size: 20px;
}

.mh-verify-address {
    color: var(--dark-text);
    overflow-wrap: anywhere;
}

.mh-verify-hint {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.mh-verify-status {
    margin: 10px 0 0;
    color: var(--dark-text);
    font-size: 13px;
    font-weight: 600;
}

.mh-verify-later {
    margin-top: 8px;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mh-verify-later:hover {
    color: var(--dark-text);
}

/* Farlig åtgärd: röd i stället för orange */
.mh-confirm-ok--danger.mh-hype.active {
    border-color: transparent;
    background: linear-gradient(135deg, #e5484d, #b3261e);
    box-shadow: 0 4px 14px rgba(179, 38, 30, .35);
}

.mh-confirm-ok--danger.mh-hype.active:hover {
    background: linear-gradient(135deg, #d93a40, #9f1f19);
}

@media (prefers-reduced-motion: reduce) {
    .mh-confirm[open],
    .mh-confirm[open]::backdrop {
        animation: none;
    }
}

/* ===== main/css/share.css ===== */
/* =====================================================
   DELA-KNAPP OCH DELA-RUTA (partials/share_button.html, share.js)
   Rutan återanvänder .mh-confirm / .mh-signup (confirm_dialog.css).
===================================================== */

.mh-share {
    position: relative;
    z-index: 2;   /* ovanpå kortlänken (.mh-card-link) */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* display ovan skulle annars slå ut hidden (knappen visas först när share.js körts) */
.mh-share[hidden] {
    display: none;
}

.mh-share-icon {
    flex: none;
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* På korten: bara ikonen, i samma stil som kommentera-knappen */
.mh-share--icon {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;

    border: 1.5px solid rgb(var(--ink-rgb) / .12);
    border-radius: 50%;
    background: var(--pure-white);
    color: var(--dark-text);

    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.mh-share--icon:hover {
    border-color: rgba(59, 130, 246, .4);
    background: rgba(59, 130, 246, .08);
    color: var(--blue-text);
}

.mh-share--icon:active {
    transform: scale(.96);
}

.mh-share:focus-visible {
    outline: 3px solid var(--hype-orange);
    outline-offset: 2px;
}

/* Matkortet: längst till höger efter Hajpa och Kommentera */
.mh-card-actions .mh-share--icon:last-child {
    margin-left: auto;
}


/* ---------- Rutan ---------- */

.mh-share-dialog {
    width: min(92vw, 400px);
}

.mh-share-copy {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
}

.mh-share-link {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 12px;

    border: 1.5px solid rgb(var(--ink-rgb) / .15);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--dark-text);
    font: inherit;
    font-size: 14px;
    text-overflow: ellipsis;
}

.mh-share-copy .mh-hype {
    flex: none;
    height: 44px;
    min-width: 104px;
    justify-content: center;
}

.mh-share-targets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}

.mh-share-targets .mh-ghost {
    justify-content: center;
    height: 44px;
}


/* ---------- 📸 Delningskortet (share.js → shareImage): bilden + Dela / Ladda ner / Kopiera länk ---------- */

.mh-share-image-dialog {
    width: min(92vw, 380px);
}

.mh-share-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    margin-top: 12px;
    aspect-ratio: 9 / 16;
    max-height: 58vh;
    max-height: 58dvh;
    overflow: hidden;
    border-radius: 14px;
    background: #111;
}

/* Bilden är 1080×1920: hela kortet syns, utan att rutan blir högre än skärmen */
.mh-share-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mh-share-preview img[hidden] {
    display: none;
}

.mh-share-preview-spinner {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid rgb(255 255 255 / .25);
    border-top-color: var(--hype-orange);
    border-radius: 50%;
    animation: mh-share-spin .8s linear infinite;
}

.mh-share-preview:not([aria-busy]) .mh-share-preview-spinner {
    display: none;
}

@keyframes mh-share-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mh-share-preview-spinner { animation-duration: 2.4s; }
}

.mh-share-image-error {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.mh-share-image-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}

.mh-share-image-actions > * {
    justify-content: center;
    height: 44px;
    min-width: 0;
}

/* Dela (när enheten kan) tar hela raden överst */
.mh-share-image-actions [data-share-image-share] {
    grid-column: 1 / -1;
}

.mh-share-image-actions [hidden] {
    display: none;
}

.mh-share-image-actions button:disabled {
    opacity: .5;
    cursor: wait;
}

/* ===== main/css/tips.css ===== */
/* =====================================================
   💡 TIPSBUBBLAN (tips.js, main/tips.py) — en liten ruta med pil mot en knapp.
   Ingen mörk bakgrund: sidan går att använda som vanligt bakom.
   tips.js sätter left/top, data-side (below = under knappen, above = ovanför)
   och --arrow-x (var pilen sitter).
===================================================== */

.mh-tip {
    position: fixed;
    z-index: 10001;   /* över bottenmenyn (9999) och ＋-menyn (10000), navigation.css */
    width: min(300px, calc(100vw - 24px));
    padding: 14px 14px 10px;
    border: 1px solid rgb(var(--ink-rgb) / .12);
    border-radius: 16px;
    background: var(--pure-white);
    color: var(--dark-text);
    box-shadow: 0 12px 36px rgb(var(--shade-rgb) / .28);
    animation: mh-tip-in .2s ease-out;
}

/* Knappen har rullat ur bild — bubblan väntar */
.mh-tip.is-away {
    visibility: hidden;
}

/* Pilen: en vriden fyrkant med bubblans kant på de två synliga sidorna */
.mh-tip-arrow {
    position: absolute;
    left: var(--arrow-x, 50%);
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: inherit;
    border: inherit;
    transform: rotate(45deg);
}

.mh-tip[data-side="below"] .mh-tip-arrow {
    top: -8px;
    border-right: 0;
    border-bottom: 0;
}

.mh-tip[data-side="above"] .mh-tip-arrow {
    bottom: -8px;
    border-left: 0;
    border-top: 0;
}

.mh-tip-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.mh-tip-text {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.mh-tip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.mh-tip-off {
    padding: 8px 2px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.mh-tip-off:hover {
    color: var(--dark-text);
}

.mh-tip-off:focus-visible {
    outline: 2px solid var(--hype-orange);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Knappen tipset pekar på: en orange ring som andas (följer knappens egen rundning) */
.mh-tip-target {
    outline: 2px solid var(--hype-orange);
    outline-offset: 3px;
    animation: mh-tip-pulse 1.6s ease-in-out infinite;
}

/* Menypunkterna är fyrkantiga — en rundad ring ser mindre ut som en markering i ett formulär */
.nav-item.mh-tip-target {
    border-radius: 14px;
}

@keyframes mh-tip-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes mh-tip-pulse {
    50% { outline-offset: 6px; outline-color: rgb(255 111 0 / .35); }
}

html[data-animations="off"] .mh-tip,
html[data-animations="off"] .mh-tip-target {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .mh-tip,
    .mh-tip-target {
        animation: none;
    }
}