/* =========================================================================
   Demo-modus for appen (/demo). Lastes KUN i demo-modus, etter styles.css.
   Endrer ingen komponenter i appen: legger bare til en stripe øverst,
   en CTA-modal for handlinger som er sperret, og skjuler knapper som ikke
   gir mening uten konto (logg ut).
   ========================================================================= */

/* Overstyrer 0px i styles.css. Header, nav og scroll-offsets i appen flytter
   seg ned tilsvarende (styles.css regner med --demo-bar-h overalt). */
:root { --demo-bar-h: 44px; }

/* Festet øverst mens man scroller: utgangen, merkelappen «Eksempeldata» og
   CTA skal alltid være tilgjengelige. env(): under statuslinjen i frittstående
   PWA på iPhone. */
.demo-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 120; background: #004d40; color: #fff; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
/* Stripen er ALLTID nøyaktig --demo-bar-h høy: header og nav fester seg rett
   under den ut fra den verdien, så en stripe som vokser til to linjer ville
   lagt seg over naven. Derfor fast høyde, og meldingen bryter aldri (ellipsis
   som siste sikring). */
.demo-bar__inner { height: var(--demo-bar-h); max-width: 1400px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
/* Utgangen: venstre kant, alltid synlig (stripen er sticky) */
.demo-bar__back { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; min-height: 32px; margin-left: -6px; padding: 6px 10px 6px 4px; border-radius: 8px; color: rgba(255,255,255,0.88); font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.demo-bar__back:hover { color: #fff; background: rgba(255,255,255,0.1); }
.demo-bar__back:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.demo-bar__back svg { width: 16px; height: 16px; flex-shrink: 0; }
.demo-bar__back-short { display: none; }
.demo-bar__text { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; overflow: hidden; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.18); font-size: 0.82rem; line-height: 1.35; }
.demo-bar__badge { flex-shrink: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #26a69a; color: #fff; padding: 4px 8px; border-radius: 999px; }
.demo-bar__msg { color: rgba(255,255,255,0.85); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-bar__msg--short { display: none; }
.demo-bar__msg--short strong { color: #fff; font-weight: 700; }
.demo-bar__cta-short { display: none; }
.demo-bar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.demo-bar__link { color: rgba(255,255,255,0.75); font-size: 0.8rem; font-weight: 500; text-decoration: none; padding: 6px 8px; white-space: nowrap; }
.demo-bar__link:hover { color: #fff; }
.demo-bar__cta { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border-radius: 999px; background: #26a69a; color: #fff; font-size: 0.8rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s ease, box-shadow .2s ease; }
.demo-bar__cta:hover { background: #1e8c82; color: #fff; box-shadow: 0 4px 16px rgba(38,166,154,0.35); }

/* Lasteskjermen dekker ikke stripen. Header og nav trenger ingen egne regler:
   styles.css legger --demo-bar-h inn i sticky-posisjonene sine. */
body[data-demo="1"] #app-loading { top: var(--demo-bar-h); }

/* Uten konto er «Logg ut» meningsløst */
body[data-demo="1"] #logout-btn { display: none !important; }

/* CTA-modal for sperrede handlinger */
.demo-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12,20,33,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.demo-modal.open { opacity: 1; visibility: visible; }
.demo-modal__card { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: 28px 24px 22px; box-shadow: 0 24px 80px rgba(0,0,0,0.3); transform: translateY(12px); transition: transform .25s ease; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1a2332; }
.demo-modal.open .demo-modal__card { transform: none; }
.demo-modal__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: none; color: #94a3b8; cursor: pointer; }
.demo-modal__close:hover { background: #f5f7fa; color: #1a2332; }
.demo-modal__close svg { width: 18px; height: 18px; }
.demo-modal__badge { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #e0f2f1; color: #004d40; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.demo-modal__card h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.25; }
.demo-modal__card p { font-size: 0.93rem; color: #5f6d7e; line-height: 1.6; margin: 0 0 18px; }
.demo-modal__actions { display: flex; flex-direction: column; gap: 8px; }
.demo-modal__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border-radius: 999px; background: #26a69a; color: #fff; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.demo-modal__cta:hover { background: #1e8c82; color: #fff; }
.demo-modal__secondary { min-height: 44px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #5f6d7e; font: inherit; font-weight: 600; cursor: pointer; }
.demo-modal__secondary:hover { border-color: #26a69a; color: #004d40; }
.demo-modal__note { margin: 12px 0 0 !important; font-size: 0.76rem !important; color: #94a3b8 !important; text-align: center; }

/* ?shot=1: skjul krom og animasjon for stabile produktbilder. */
body[data-shot="1"] { --demo-bar-h: 0px; }
body[data-shot="1"] .demo-bar,
body[data-shot="1"] #demo-modal,
body[data-shot="1"] #cmp-banner,
body[data-shot="1"] #health-chat-fab,
body[data-shot="1"] #feedback-fab,
body[data-shot="1"] .toast-container,
body[data-shot="1"] #toast-container { display: none !important; }
body[data-shot="1"] *,
body[data-shot="1"] *::before,
body[data-shot="1"] *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }

/* Under ~1200 px får ikke den fulle setningen plass på én linje. Da vises den
   korte varianten (fet «Eksempeldata» erstatter merkelappen) i stedet for en
   avkuttet setning. Tablet og små laptoper beholder ellers desktop-oppsettet. */
@media (max-width: 1199px) {
    .demo-bar__badge { display: none; }
    .demo-bar__msg { display: none; }
    .demo-bar__msg--short { display: inline; }
}
@media (max-width: 767px) {
    :root { --demo-bar-h: 40px; }
    .demo-bar__inner { padding: 0 12px; gap: 8px; }
    .demo-bar__back { min-height: 30px; margin-left: -4px; padding: 6px 6px 6px 2px; gap: 2px; font-size: 0.76rem; }
    .demo-bar__back-long { display: none; }
    .demo-bar__back-short { display: inline; }
    .demo-bar__text { padding-left: 8px; }
    .demo-bar__msg--short { font-size: 0.76rem; }
    .demo-bar__link { display: none; }
    .demo-bar__cta { font-size: 0.76rem; padding: 6px 12px; min-height: 30px; }
}
@media (max-width: 480px) {
    .demo-bar__cta-long { display: none; }
    .demo-bar__cta-short { display: inline; }
}
@media (max-width: 359px) {
    /* Svært smale skjermer: bare merkelappen i midten, utgang og CTA beholdes */
    .demo-bar__msg-detail { display: none; }
}

body[data-demo="1"] .health-chat-title-wrap {
    flex: 1 1 0%;
    min-width: 0;
    text-align: center;
}
body[data-demo="1"] .health-chat-title-wrap .health-chat-title {
    display: block;
    text-align: center;
}
body[data-demo="1"] .health-chat-demo-note {
    margin: 2px 0 0;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: #0f766e;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}