/* Isolated shared-admin notices: no modification to approved v67 page layout. */
.bs-notice-layer{position:fixed;inset:0;z-index:15000;display:flex;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));color:#f7ffff}
.bs-notice-shade{position:absolute;inset:0;background:rgba(0,15,22,.76);backdrop-filter:blur(6px)}
.bs-notice-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:0;width:min(100%,430px);max-height:min(88dvh,780px);min-width:0;overflow:auto;overscroll-behavior:contain;border:1px solid rgba(139,232,226,.55);border-radius:24px;background:linear-gradient(160deg,#114b55,#062f3a 78%);box-shadow:0 24px 70px rgba(0,12,20,.7);animation:bs-notice-in .18s ease-out}
.bs-notice-head{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;padding:21px 20px 7px}
.bs-notice-name{min-width:0;flex:1;overflow-wrap:anywhere;font-size:19px;font-weight:750;line-height:1.35;color:#fff}
/* A vector X is geometrically centered; no font baseline/padding offset. */
.bs-notice-x{flex:0 0 34px;width:34px;min-width:34px;height:34px;display:grid;place-items:center;margin:0;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#ffffff12;color:#e5fdff;line-height:0;cursor:pointer}
.bs-notice-x svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.bs-notice-message{margin:0;padding:10px 20px 16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.55;color:#dceeee}
.bs-notice-image{display:block;width:calc(100% - 40px);max-height:min(54dvh,460px);object-fit:contain;margin:12px 20px 10px;border-radius:12px;background:#03252e}
.bs-notice-foot{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding:15px 20px 20px}
.bs-notice-action,.bs-notice-done{display:inline-flex;justify-content:center;align-items:center;min-height:42px;padding:10px 20px;border-radius:13px;font-size:14px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
.bs-notice-action{color:#052d36;background:#75e3e0}
.bs-notice-done{background:#ffffff14;color:#f7ffff;border:1px solid #ffffff40}
.bs-notice-action:focus-visible,.bs-notice-done:focus-visible,.bs-notice-x:focus-visible{outline:2px solid #8af1ea;outline-offset:2px}
@keyframes bs-notice-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bs-notice-card{animation:none}}
@media(max-width:410px){.bs-notice-card{border-radius:20px}.bs-notice-head{padding:17px 16px 6px}.bs-notice-message{padding:10px 16px 14px}.bs-notice-image{width:calc(100% - 32px);margin:10px 16px}.bs-notice-foot{padding:12px 16px 16px}}

/* v67.6: Image-only card must hug the visible poster, not its letterboxed 540px box.
   The popup width follows the intrinsic poster aspect ratio (set on image load).
   This prevents dark sidebars for tall portraits while preserving the entire image. */
.bs-notice-card--image-only{
  display:block;
  width:var(--bs-notice-image-card-width,min(100%,430px));
  max-width:calc(100vw - 32px);
  min-width:0;
  padding:0;
  max-height:min(88dvh,780px);
  overflow:hidden;
  background:#062f3a;
}
.bs-notice-card--image-only .bs-notice-image{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:initial;
  margin:0;
  border-radius:0;
  background:transparent;
}
.bs-notice-card--image-only .bs-notice-x{
  position:absolute;
  z-index:2;
  top:12px;
  right:12px;
  flex:none;
  width:38px;
  height:38px;
  min-width:38px;
  background:rgba(0,28,35,.75);
  border-color:rgba(255,255,255,.65);
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}
@media(max-width:410px){
  .bs-notice-card--image-only .bs-notice-x{top:9px;right:9px}
}

/* v67.14: original Arabic Islamic duas stay centered and legible. */
.bs-notice-message--arabic-dua{direction:rtl;text-align:center;font-size:18px;line-height:1.85;unicode-bidi:plaintext}