/* Admin-managed top-bar announcement.
   Fixed at top:0, full width, sits above all navbars. Pages should pad
   their own content; .announcement-bar exposes its height via CSS var
   --ab-height set by JS so layouts can shift accordingly. */

:root { --ab-height: 0px; }

.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  direction: rtl;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* When a Bootstrap modal is open, the backdrop (z-index 1050) must dim the
   announcement bar too — it's no exception. Drop the bar below the backdrop so
   the shadow/overlay covers it like every other element behind the modal, while
   staying under the modal dialog itself (z-index 1055). */
body.modal-open .announcement-bar { z-index: 1040; }
.announcement-bar .ab-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 46px;
  text-align: center;
  position: relative;
  min-height: 46px;
}
.announcement-bar .ab-msg {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  /* Explicit font list with emoji-capable fonts. The locale's face (--app-font,
     published by header.tpl) comes first so its script renders in the same face
     as the rest of the UI — hardcoding Cairo here put Urdu/Hindi text in a
     different font from every neighbouring element. Emojis fall through to the
     system emoji font; without this list, pages whose font chain lacks an emoji
     fallback render emojis as tofu/question marks. */
  font-family: var(--app-font, "Cairo"), system-ui, -apple-system, "Segoe UI", Tahoma,
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", "EmojiOne Color", sans-serif;
}
/* Inline HTML elements admins can use (matches HTMLPurifier allow-list) */
.announcement-bar .ab-msg p { margin: 0; display: inline; }
.announcement-bar .ab-msg a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.announcement-bar .ab-msg a:hover { opacity: 0.85; }
.announcement-bar .ab-msg strong, .announcement-bar .ab-msg b { font-weight: 700; }
.announcement-bar .ab-msg ul, .announcement-bar .ab-msg ol { display: inline-block; margin: 0; padding-inline-start: 1em; }

/* Clickable coupon pill */
.announcement-bar .ab-coupon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  margin: 0 4px;
  border: 1.5px dashed currentColor;
  border-radius: 5px;
  background: rgba(255,255,255,0.10);
  color: inherit;
  font-family: inherit;
  font-weight: 700;
  font-size: inherit;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.announcement-bar .ab-coupon:hover  { background: rgba(255,255,255,0.20); }
.announcement-bar .ab-coupon:active { transform: scale(0.97); }
.announcement-bar .ab-coupon.copied {
  background: rgba(255,255,255,0.25);
  outline: 1px solid currentColor;
}
.announcement-bar .ab-coupon-icon { opacity: 0.85; }

/* Dismiss button */
.announcement-bar .ab-close {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.75;
}
.announcement-bar .ab-close:hover { opacity: 1; }

/* Copy toast */
.ab-toast {
  position: fixed;
  top: calc(var(--ab-height, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ab-toast.show { opacity: 1; }

@media (max-width: 640px) {
  .announcement-bar { font-size: 13px; }
  .announcement-bar .ab-inner { padding: 9px 38px; min-height: 38px; }
  .announcement-bar .ab-close { font-size: 20px; }
}

/* When the bar is present, push fixed-top elements down by its height.
   Pages opt in by adding the class `has-announcement-bar` to <html>. */
.has-announcement-bar body { padding-top: var(--ab-height, 0px); }
.has-announcement-bar header.fixed,
.has-announcement-bar .navbar-fixed,
.has-announcement-bar .header-container,
.has-announcement-bar .logo-top,
.has-announcement-bar [data-shift-on-announcement] { top: var(--ab-height, 0px) !important; }

/* Admin/dashboard sidebar (rayano-666 + app): fixed to viewport — shift down
   AND shorten by the bar height so it doesn't overflow past the viewport. */
.has-announcement-bar .sidebar {
  top: var(--ab-height, 0px) !important;
  height: calc(100% - var(--ab-height, 0px)) !important;
}
/* Hamburger button in the admin sidebar sits at top:15px — nudge it too. */
.has-announcement-bar .hamburger-menu {
  top: calc(15px + var(--ab-height, 0px)) !important;
}