/* Public-facing styles for rendered Announcements (see
   frontend/templates/public/common/_announcements.html /
   backend/utils/announcement_presets.go's renderAnnouncementContent). This
   file used to be dead/orphaned - a leftover, mistaken duplicate of the
   admin editor's own preview-pane CSS that was never linked from anywhere -
   replaced here with real content and wired into _page_shell.html's
   styles block. */

#container-announcements-bottom { margin-top: 2rem; }
#container-announcements-bottom:empty { margin-top: 0; }

.announcement-banner { border-radius: .5rem; overflow: hidden; }

.announcement-coupon [data-announcement-copy-code] {
  cursor: pointer;
  user-select: all;
  transition: background-color .15s ease;
}
.announcement-coupon [data-announcement-copy-code]:hover {
  background: var(--bs-tertiary-bg);
}

/* Popup zone: the modal is just a centered, transparent frame. Each
   preset's own box (.alert / .announcement-banner / .announcement-coupon)
   is the visible popup surface, so the modal-content wrapper carries no
   background, border or padding of its own - otherwise it reads as a
   redundant "modal card" around the announcement, with two close buttons
   (its header's, and the alert preset's alert-dismissible one). */
#announcementPopupModal .announcement-popup-content {
  position: relative;
  background: transparent;
  border: 0;
}
#announcementPopupModal .announcement-popup-content > [data-announcement-key] {
  margin: 0;
}
#announcementPopupModal .announcement-popup-content .alert,
#announcementPopupModal .announcement-popup-content .announcement-banner,
#announcementPopupModal .announcement-popup-content .announcement-coupon {
  margin: 0;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35);
}
/* A round close button pinned to the popup's top-right corner, deliberately
   overlapping it by half - reads unambiguously as "close this popup"
   without straddling the announcement box's own rounded border, and stays
   visible over any preset (a light chip works on alert-danger's pink and
   on a dark banner image alike). .modal-content / .modal-dialog don't clip
   overflow, so the half that sits outside the box isn't cut off. */
#announcementPopupModal .announcement-popup-close {
  position: absolute;
  top: -0.85rem;
  right: -0.85rem;
  z-index: 3;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  /* Always a white chip with the default dark X glyph - filter:none
     overrides Bootstrap's dark-mode .btn-close invert (which would make
     the glyph white and vanish against this white circle). */
  background-color: #fff;
  background-size: 0.85rem;
  filter: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  opacity: 0.97;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.4);
}
#announcementPopupModal .announcement-popup-close:hover { opacity: 1; }