/* =========================================================
   Corner decoration: "pharmacy" — capsule pill + dotted halo.
   Add-on styling, linked by base templates only when
   VisualSettings.corner_decoration_style selects it; draws on
   main.corner-decoration-on set by the same preference. Shared
   infrastructure (the custom-image variant, hide-under-modals/loader,
   top-right space reservation) stays in kometa.css.
   To add a decoration style: create decorations/<style>.css and
   add the choice in settings/models.py.
   ========================================================= */
/* The capsule sits in the content's top-right corner, above the content and
   anchored to the top of the page (position: absolute inside the scrolling
   <main>, so it scrolls away with the content instead of a fixed overlay that
   followed the viewport and overlapped whatever scrolled under it).
   Gated by the VisualSettings corner-decoration preference: this file is
   linked, and .corner-decoration-on set on <main>, only when the admin
   selects the "pharmacy" style (default: off). */
main.corner-decoration-on::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 24px !important;
  top: 24px !important;
  width: min(40vw, 560px) !important;
  height: min(44vw, 520px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: .85 !important;
  filter: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 72% 24%, rgba(37,99,235,.1) 0 2px, transparent 2px 58px),
    radial-gradient(circle at 34% 70%, rgba(109,93,252,.07) 0 2px, transparent 2px 62px) !important;
}
main.corner-decoration-on::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 44px !important;
  top: 26px !important;
  width: 156px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(18,27,38,.05) !important;
  background: linear-gradient(90deg, #FBFCFD 0 49.2%, rgba(167,186,214,.55) 49.2% 50.8%, #F3F6F9 50.8% 100%) !important;
  transform: rotate(-19deg) !important;
  box-shadow: 0 26px 55px rgba(18,27,38,.10) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 3 !important;
}

@media (max-width: 1024px) {
  main.corner-decoration-on::before,
  main.corner-decoration-on::after {
    content: none !important;
    display: none !important;
  }
}