/* File: src/css/broadcast-banner.css
   Styles for all three banner types (persistent strip, modal overlay,
   inline HTML slot). Ported and consolidated from the previous banner
   rules that lived in base.css.

   IMPORTANT — [hidden] gating:
   The persistent strip and the modal overlay both live in the DOM at
   page load with the `hidden` attribute set. The renderer only removes
   `hidden` after it has real content to show. Without the guards below,
   an equal-specificity `display: flex` on `.bb-modal` or
   `.broadcast-banner` beats the browser's UA `[hidden] { display: none }`
   rule (because cascade order — later wins — trumps equal specificity),
   and the empty template shell renders visibly on every page load. */

/* ── Persistent strip ────────────────────────────────────────────── */
.broadcast-banner[hidden] { display: none !important; }
.broadcast-banner:not([hidden]) {
  position: sticky; top: 0; z-index: 100;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  background: #fff3cd; color: #664d03;
  border-bottom: 1px solid #ffe69c;
  font-size: 14px;
}
.broadcast-banner[data-severity="warning"]  { background: #ffe69c; }
.broadcast-banner[data-severity="critical"] { background: #f8d7da; color: #842029; border-bottom-color: #f5c2c7; }
.broadcast-banner-icon { font-size: 18px; }
.broadcast-banner-text { flex: 1; }
.broadcast-banner-close { background: none; border: none; cursor: pointer; font-size: 18px; padding: 0 6px; color: inherit; }
.broadcast-banner-cta-wrap { display: inline-flex; }
.broadcast-banner-cta { color: inherit; text-decoration: underline; margin-left: 4px; }

/* ── Modal ───────────────────────────────────────────────────────── */
.bb-modal[hidden] { display: none !important; }
.bb-modal:not([hidden]) {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000;
}
.bb-modal-content { background: #fff; max-width: 480px; width: calc(100% - 32px); border-radius: 12px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
.bb-modal-content[data-severity="info"]     { border-top: 4px solid #0dcaf0; }
.bb-modal-content[data-severity="warning"]  { border-top: 4px solid #ffc107; }
.bb-modal-content[data-severity="critical"] { border-top: 4px solid #dc3545; }
.bb-modal-title { margin: 0 0 10px; font-size: 18px; }
.bb-modal-body { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.bb-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.bb-modal-dont-show { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: auto; font-size: 13px; color: #495057; cursor: pointer; user-select: none; }
.bb-modal-dont-show input { margin: 0; cursor: pointer; }
.bb-modal-cta { padding: 8px 14px; border: 1px solid #0d6efd; color: #0d6efd; border-radius: 6px; text-decoration: none; }
.bb-modal-cta[hidden] { display: none !important; }
.bb-modal-close { background: #0d6efd; color: #fff; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; }

/* ── HTML slots ──────────────────────────────────────────────────── */
[data-banner-slot]:empty { display: none; }
[data-banner-slot]:not(:empty) { padding: 12px; border-radius: 6px; margin: 8px 0; background: #f8f9fa; border: 1px solid #e9ecef; position: relative; }
.bb-slot-close { position: absolute; top: 6px; right: 6px; background: none; border: none; cursor: pointer; font-size: 16px; color: #6c757d; }
.bb-slot-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #212529; }
.bb-slot-body { margin: 0; }
.bb-slot-cta { display: inline-block; margin-top: 8px; padding: 6px 12px; background: #0d6efd; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 13px; }
.bb-slot-cta:hover { background: #0b5ed7; }

html[dir="rtl"] .broadcast-banner-cta { margin-left: 0; margin-right: 4px; }
html[dir="rtl"] .bb-slot-close { right: auto; left: 6px; }
html[dir="rtl"] .bb-modal-actions { justify-content: flex-start; }