/* Shared public/Admin close control. Footer Cancel/Save actions are intentionally separate. */
:is(dialog,[role="dialog"]) button.bf-popup-close {
  --popup-close-ink:#2c645b;
  appearance:none;box-sizing:border-box;position:relative;display:inline-flex;
  align-items:center;justify-content:center;flex:0 0 44px;
  width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;
  margin:0;margin-inline-start:auto;padding:0!important;border:1px solid #dce4dc;
  border-radius:12px;background:#f6f7f2;color:var(--popup-close-ink);
  box-shadow:none;cursor:pointer;font-family:inherit;font-size:0!important;line-height:1;
  vertical-align:middle;text-decoration:none;touch-action:manipulation;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;
}
:is(dialog,[role="dialog"]) button.bf-popup-close::before,
:is(dialog,[role="dialog"]) button.bf-popup-close::after {
  content:"";position:absolute;inset:auto;top:50%;left:50%;width:18px;height:2px;
  border-radius:2px;background:currentColor;pointer-events:none;
  transform:translate(-50%,-50%) rotate(45deg);
}
:is(dialog,[role="dialog"]) button.bf-popup-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
:is(dialog,[role="dialog"]) button.bf-popup-close>*{display:none!important}
@media(hover:hover){:is(dialog,[role="dialog"]) button.bf-popup-close:hover:not(:disabled){background:#e6eee8;border-color:#a5bdb0;color:#163f36}}
:is(dialog,[role="dialog"]) button.bf-popup-close:focus-visible{outline:3px solid #c59139;outline-offset:3px;box-shadow:0 0 0 1px #fff}
:is(dialog,[role="dialog"]) button.bf-popup-close:active:not(:disabled){background:#d9e6dc;border-color:#7b9e8b}
:is(dialog,[role="dialog"]) button.bf-popup-close:disabled{opacity:.45;cursor:not-allowed}
.bf-popup-header{display:flex;align-items:center;gap:16px;min-height:44px;margin-block-end:16px}
.bf-popup-header h2{margin:0;font-family:inherit;font-size:18px;line-height:1.5;color:#214e45}
/* Physical left is intentional in both directions, matching the Admin's close convention. */
:is(dialog,[role="dialog"]) :is(.dialog-header,.bf-popup-header,[data-popup-header]):has(>button.bf-popup-close){position:relative;padding-left:76px}
:is(dialog,[role="dialog"]) :is(.dialog-header,.bf-popup-header,[data-popup-header])>button.bf-popup-close{position:absolute;left:16px;right:auto;top:50%;transform:translateY(-50%);margin:0!important}
@media(prefers-reduced-motion:reduce){:is(dialog,[role="dialog"]) button.bf-popup-close{transition:none}}
@media(forced-colors:active){:is(dialog,[role="dialog"]) button.bf-popup-close{border-color:ButtonText;color:ButtonText;background:ButtonFace}}