/* ─────────────────────────────────────────────────────────────────────────
 * demo.css — shared chrome for every Iqbal Media demo site.
 *
 * Loaded LAST, after whatever stylesheet the demo itself uses, so the ribbon
 * always wins. It is deliberately scoped to .imdemo-* class names so it can
 * never collide with a host page's utility classes (the gold demo ships a
 * full Tailwind build; the cat demo ships hand-written CSS).
 *
 * 🔴 Every demo MUST include the ribbon. A prospect who is sent a deep link
 * has no other way to know this is not a real shop they can buy from.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  --im-blue-700: #1049B0;   /* Iqbal Media primary — matches the live landing */
  --im-blue-900: #0A2A63;
  --im-ink:      #0E1B2E;
  --im-paper:    #FFFFFF;
}

/* ── The DEMO ribbon ───────────────────────────────────────────────────── */
.imdemo-ribbon {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .85rem;
  margin: 0 .75rem .75rem 0;
  border-radius: 999px;
  background: var(--im-blue-700);
  color: #fff;
  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(10, 42, 99, .38);
  transition: transform .18s ease, box-shadow .18s ease;
}

.imdemo-ribbon:hover,
.imdemo-ribbon:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(10, 42, 99, .48);
  color: #fff;
}

.imdemo-ribbon__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7FE3A1;
  flex: none;
}

.imdemo-ribbon__label { opacity: .85; font-weight: 500; }

/* The trailing chevron is decorative; hide it on very narrow screens so the
   pill never crowds a mobile layout it is sitting on top of. */
@media (max-width: 380px) {
  .imdemo-ribbon { font-size: 11px; padding: .45rem .7rem; }
  .imdemo-ribbon__label { display: none; }
}

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

/* ── Neutered interactive elements ─────────────────────────────────────────
 * Demos keep the VISUAL of a form, a login icon or an add-to-cart button, but
 * none of them go anywhere. Ruebe's rule, 2026-09-16: "it just need there as
 * sample" — so these must still LOOK completely normal.
 *
 * 🔴 THIS IS A data- ATTRIBUTE, NOT A CLASS, AND THAT IS LOAD-BEARING.
 * It was a class first. The build rewrites href="...php" into
 * href="#" <marker> on elements that ALREADY carry a class attribute, which
 * produced two class attributes on one tag — and a browser honours the FIRST
 * and silently discards the second. 67 elements across the two pages lost all
 * their styling that way, including the whole shop product grid. A data
 * attribute cannot collide with the host page's classes.
 *
 * Deliberately NO hover/cursor override: a "not-allowed" cursor would tell a
 * prospect the button is broken. It should feel like a real site that simply
 * has nothing behind it.
 * ───────────────────────────────────────────────────────────────────────── */
[data-demo-inert] { /* visual no-op, marker only */ }