/* ============================================================
   DEMONSTRATION BANNER
   Shared by all five Kazira demonstrations.

   This bar is deliberately not dismissible. Anyone who opens a
   demo must be able to see, at any moment, that the company in
   it is invented and the data is fictional. That honesty is the
   whole point of showing demonstrations instead of fake clients.
   ============================================================ */

:root {
  --demo-bar-h: 44px;
}

.demo-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  min-height: var(--demo-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem .9rem;
  flex-wrap: wrap;
  padding: .5rem 1rem;
  background: #0A2724;
  color: #EAF2EF;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.demo-bar strong {
  color: #E8A33D;
  font-weight: 800;
  letter-spacing: .02em;
}

.demo-bar a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.demo-bar a:hover { color: #E8A33D; }

.demo-bar .demo-sep { opacity: .4; }

/* Push the page down so the fixed bar never covers the site's own header. */
body { padding-top: var(--demo-bar-h); }

@media (max-width: 620px) {
  :root { --demo-bar-h: 62px; }
  .demo-bar { font-size: 12px; }
  .demo-bar .demo-sep { display: none; }
}

/* A small marker for sample content inside a demo, e.g. invented reviews. */
.demo-note {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #FDF0DC;
  color: #7A4F06;
  border: 1px solid #F0D4A3;
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}