/* FILE: assets/css/notices.css */

/* =========================
   GENERIC NOTICE BOX
========================= */

.notice {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  text-align: center;

  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));

  box-shadow:
    0 10px 24px rgba(0,0,0,.22);
}

.notice + .notice {
  margin-top: 0;
}

/* =========================
   HEADINGS / TEXT
========================= */

.notice strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 3px;
  letter-spacing: .3px;
  text-align: center;
}

.notice h2,
.notice h3 {
  margin: 0 0 4px;
  color: #ffffff;
  text-align: center;
}

.notice p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
}

.notice small {
  color: var(--muted);
  font-size: 12px;
}

/* =========================
   LINKS
========================= */

.notice a {
  color: #7db7ff;
  text-decoration: none;
  transition:
    color .18s ease,
    transform .18s ease;
}

.notice a:hover {
  color: #ffffff;
}

/* =========================
   IMAGES INSIDE NOTICE
========================= */

.notice img {
  max-width: 100%;
  height: auto;
}

.notice a img {
  transition:
    transform .18s ease,
    filter .18s ease;
}

.notice a:hover img {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* =========================
   NOTICE VARIANTS
========================= */

.notice.emergency {
  border-color: rgba(255,59,48,.45);

  box-shadow:
    0 0 0 1px rgba(255,59,48,.10),
    0 12px 26px rgba(0,0,0,.26);
}

.notice.success {
  border-color: rgba(22,163,74,.40);
}

.notice.info {
  border-color: rgba(47,129,247,.35);
}

.notice.warning {
  border-color: rgba(255,204,0,.35);
}

/* =========================
   INCIDENT MAP BOX
========================= */

.notice.incident-map-open-box {
  padding: 6px 14px;
  text-align: center;
  border-color: rgba(47,129,247,.75);

  box-shadow:
    0 0 0 1px rgba(47,129,247,.16),
    0 0 14px rgba(47,129,247,.32),
    0 10px 24px rgba(0,0,0,.22);
}

.notice.incident-map-open-box > strong:first-child {
  position: relative;
  padding-bottom: 3px;
  margin-bottom: 4px;
  text-align: center;

  text-shadow: 0 0 6px rgba(47,129,247,.45);
}

.notice.incident-map-open-box > strong:first-child::after {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: 0;

  height: 2px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(47,129,247,.95),
    transparent
  );

  box-shadow:
    0 0 6px rgba(47,129,247,.85),
    0 0 12px rgba(47,129,247,.55);
}

.notice.incident-map-open-box p {
  margin: 0;
  line-height: 1.25;
  text-align: center;
}

.notice.incident-map-open-box .mini {
  margin-top: 3px !important;
  padding-top: 6px;
  padding-bottom: 6px;
  width: 100%;
  text-align: center;
}

.notice.incident-map-open-box button {
  margin-top: 0 !important;
}

/* =========================
   COMMUNITY CHAT FIX (HEADER CENTER + GAP FIX)
========================= */

/* FORCE HEADER CENTER (your actual issue) */
.notice .chat-head,
.notice div.chat-head {
  display: block;
  width: 100%;
  text-align: center !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

/* tighten text spacing */
.notice:not(.incident-map-open-box) p {
  margin: 0;
  line-height: 1.25;
}

/* fix button gap (same issue as before) */
.notice:not(.incident-map-open-box) .mini {
  margin-top: 3px !important;
  padding-top: 6px;
  padding-bottom: 6px;
  width: 100%;
  text-align: center;
}

.notice:not(.incident-map-open-box) button {
  margin-top: 0 !important;
}

/* =========================
   SIMPLE LIST STYLE
========================= */

.notice ul,
.notice ol {
  margin: 6px 0 0 18px;
  color: var(--text);
}

.notice li {
  margin-bottom: 4px;
}

/* =========================
   BUTTONS INSIDE NOTICE
========================= */

.notice button {
  cursor: pointer;
}

.notice .mini {
  margin-top: 3px !important;
}

/* =========================
   HORIZONTAL SPACING HELPERS
========================= */

.notice-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notice-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* =========================
   MUTED LINE BREAK
========================= */

.notice hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 0;
}