/* WafaRadius live demo layer (CT 108): Signal Amber identity, compact, never over the panel's own controls. */
.wrd-card, .wrd-pill { font-family: Cairo, "Segoe UI", Tahoma, sans-serif; box-sizing: border-box; }
.wrd-card *, .wrd-pill * { box-sizing: border-box; }

/* sign-in page: one slim strip above the panel, in the page's flow — «نسخة عرض حيّة» and three small pills
   «جرّب كمدير / كوكيل / كمشترك» (one click signs in). The owner 2026-11-04: «زغرهم قد ما فيك… ما حابين كبار». */
.wrd-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  margin: 0; padding: 7px 14px; background: #1C1B19; color: #F5F5F4;
  border-bottom: 2px solid #F59E0B; font-size: 12.5px; line-height: 1.5; position: relative; z-index: 1;
}
.wrd-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wrd-card-head { display: flex; align-items: center; gap: 7px; flex: none; }
.wrd-card-head b { font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap; }
.wrd-card-top p { margin: 0; color: #A8A29E; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.wrd-tries { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.wrd-try {
  appearance: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06);
  color: #fff; font: 700 12px/1 Cairo, "Segoe UI", sans-serif; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, background-color .15s ease;
}
.wrd-try:hover { border-color: #F59E0B; background: rgba(245, 158, 11, .14); }
.wrd-try:active { background: rgba(245, 158, 11, .22); }
.wrd-try:focus-visible { outline: 2px solid #FBBF24; outline-offset: 2px; }
.wrd-try .ic { width: 14px; height: 14px; flex: none; color: #FBBF24; }
.wrd-try b { font-weight: 700; }
/* the manager's pill leads: solid amber */
.wrd-try.primary { background: #F59E0B; border-color: #F59E0B; color: #1C1B19; }
.wrd-try.primary:hover { background: #FBBF24; border-color: #FBBF24; }
.wrd-try.primary .ic { color: #1C1B19; }
.wrd-try[disabled] { cursor: progress; opacity: .55; }
.wrd-try.busy { opacity: 1; }
.wrd-try.busy .ic { animation: wrd-pulse 1s ease-in-out infinite; }
@keyframes wrd-pulse { 50% { opacity: .35; } }

.wrd-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
  flex: none; }

/* every other page: a small pill in the corner — above the panel's «install the app» banner (z 80) and the subscriber
   portal's tab bar (--wp-bar-h), under its dialogs (1000+); on a phone in the right-hand corner, clear of the banner's
   buttons. It can be dragged anywhere (demo.js keeps its place); the dotted grip says so */
.wrd-pill {
  position: fixed; bottom: calc(14px + var(--wp-bar-h, 0px)); left: 14px; z-index: 86; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 6px; background: rgba(28, 27, 25, .92); color: #fff; border-radius: 999px;
  font-size: 12px; line-height: 1.6; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); backdrop-filter: blur(6px);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.wrd-pill b { font-weight: 700; }
.wrd-grip { display: inline-grid; place-items: center; width: 14px; height: 20px; color: rgba(255, 255, 255, .5); flex: none; }
.wrd-grip svg { width: 14px; height: 14px; }
.wrd-pill:hover .wrd-grip { color: #FBBF24; }
.wrd-pill.dragging { cursor: grabbing; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); background: rgba(28, 27, 25, .97); }
.wrd-pill .wrd-link { cursor: pointer; }
.wrd-link { appearance: none; border: 0; background: transparent; color: #FCD34D; font: 600 12px/1.6 Cairo, sans-serif;
  cursor: pointer; padding: 2px 6px; border-radius: 999px; text-decoration: none; }
.wrd-link:hover { background: rgba(255, 255, 255, .08); }
.wrd-link[disabled] { opacity: .5; cursor: default; }

@media (max-width: 760px) {
  .wrd-card { padding: 6px 10px; gap: 5px 10px; }
  .wrd-card-top p { display: none; }
  .wrd-try { height: 26px; padding: 0 9px; font-size: 11.5px; gap: 4px; }
  .wrd-try .ic { width: 13px; height: 13px; }
  .wrd-pill { bottom: calc(10px + var(--wp-bar-h, 0px)); left: auto; right: 10px; }
}
@media (max-width: 380px) {
  .wrd-try .ic { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wrd-try { transition: none; }
  .wrd-try.busy .ic { animation: none; }
}
@media print { .wrd-card, .wrd-pill { display: none !important; } }