/* ══════════════════════════════════════════════════════
   admin-demo.css - the demo-deployment ribbon
   (demo.10xcourse.ai; AdminLayout.vue renders it when the
   admin store's `isDemo` is true)

   One fixed band across the top of every admin screen, the
   login card included. The shell RESERVES the band instead
   of letting the ribbon float over content: `.admin-layout`
   is the 100dvh flex shell (row on desktop, column at or
   below 1024px), so the modifier adds the ribbon's height as
   padding-top and everything in flow - the desktop sidebar,
   the sticky mobile top bar with its 44px targets, the
   scrolling `.admin-main` - starts below it. Nothing is
   covered and no tap target shrinks.

   z-index 1017: above every piece of in-flow chrome (mobile
   top bar 1010, docked phone bars 1015, peeked sidebar 1016)
   and below every overlay (`.modal-overlay` 1018, nav scrim
   1020, drawer 1030, sheets 1040/1050, toast 2000). A modal
   dims the ribbon like the rest of the page; the drawer
   slides over it. The ladder itself is documented above
   `.adm-sheet-layer` in admin.css.

   Amber, not the brand gradient: a striped warning band is
   the universal "test environment" signal, and the brand
   ramp on a persistent strip would read as decoration.
   ══════════════════════════════════════════════════════ */

.admin-layout {
  --adm-demo-h: 0px;
}

.admin-layout--demo {
  --adm-demo-h: 34px;
  padding-top: var(--adm-demo-h);
}

.admin-demo-ribbon {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--adm-demo-h);
  z-index: 1017;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 0.75rem;
  direction: rtl;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #3B2A00;
  background: repeating-linear-gradient(-45deg, #FFC84A 0 14px, #FFD97A 14px 28px);
  border-bottom: 1px solid rgba(25, 26, 35, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
}

.admin-demo-ribbon .fas {
  font-size: 0.8rem;
  flex-shrink: 0;
}

.admin-demo-ribbon__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The sticky mobile top bar pins to `top: 0`. The shell's padding already
   keeps it below the ribbon in flow; this keeps it there should the document
   ever gain scroll slack on a phone (the URL-bar delta case admin.css
   describes above `#app:has(.admin-layout)`). */
.admin-layout--demo .admin-mobile-bar {
  top: var(--adm-demo-h);
}

@media (max-width: 767px) {
  /* Two lines of room: the sentence is ~55 Hebrew characters and a 360px
     phone cannot always fit it on one. The band height is fixed (the shell's
     padding has to know it), so the text wraps inside a taller band rather
     than being clipped. */
  .admin-layout--demo {
    --adm-demo-h: 42px;
  }

  .admin-demo-ribbon {
    font-size: 0.74rem;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    padding-inline: 0.5rem;
  }

  .admin-demo-ribbon .fas {
    display: none;
  }
}

/* ── AdminPayments: the Telepay placeholders ─────────────────────────────
   In demo mode the two hosted-form tabs and the backoffice launcher render
   this panel instead of any redirect.telepay.co.il / backoffice.telepay.co.il
   URL (AdminPayments.vue, decision N12). Kept here rather than in
   admin-payments.css so every demo-only rule lives in one file; the panel
   mirrors `.pay-launcher`'s geometry so the tab strip does not jump between
   the real form and its stand-in. */
.pay-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed rgba(59, 42, 0, 0.35);
  border-radius: var(--radius-md);
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    repeating-linear-gradient(-45deg, #FFC84A 0 14px, #FFD97A 14px 28px);
}

.pay-demo__icon {
  font-size: 1.6rem;
  color: #8A6400;
}

.pay-demo__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3B2A00;
}

.pay-demo__text {
  margin: 0;
  max-inline-size: 48ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--adm-ink-2, #5A5B6A);
}

@media (max-width: 767px) {
  .pay-demo {
    padding: 44px 16px;
  }
}