/* Talnt semantic Banner, compatible with Mekari Pixel Banner API (PHP/JS equivalent).
 * Source: https://docs.mekari.design/components/banner.html
 * Variants: info, success, warning, danger; inline, icon, link, close.
 * Deliberately excludes ad creatives (.ds-banner) and notification cards (.nt-message).
 */
.px-banner {
  --px-bg:var(--mk-colors-lightBlue,#F5F9FF);
  --px-border:var(--mk-colors-blue-100,#D6DFFF);
  --px-icon:var(--mk-colors-blue-500,#0768EB);
  display:flex !important;
  align-items:flex-start !important;
  gap:var(--mk-space-3,12px) !important;
  width:100%;max-width:100%;min-width:0;
  box-sizing:border-box;
  margin:0 0 var(--mk-space-4,16px);
  padding:var(--mk-space-4,16px) var(--mk-space-5,20px) !important;
  border:1px solid var(--px-border) !important;
  border-radius:var(--mk-radii-lg,8px) !important;
  background:var(--px-bg) !important;
  color:var(--mk-colors-dark,#232933) !important;
  box-shadow:none !important;
  font-family:Inter,system-ui,sans-serif;
  font-size:var(--mk-fontSizes-sm,14px);
  line-height:1.55;
  text-align:left;
  position:relative;
  overflow-wrap:anywhere;
  word-break:normal;
}
.px-banner--info {--px-bg:var(--mk-colors-lightBlue,#F5F9FF);--px-border:var(--mk-colors-blue-100,#D6DFFF);--px-icon:var(--mk-colors-blue-500,#0768EB)}
.px-banner--success {--px-bg:var(--mk-colors-green-50,#E8F5EB);--px-border:var(--mk-colors-green-400,#68BE79);--px-icon:var(--mk-colors-green-700,#3C914D)}
.px-banner--warning {--px-bg:var(--mk-colors-orange-50,#FBF3DD);--px-border:var(--mk-colors-orange-400,#E0AB00);--px-icon:var(--mk-colors-orange-700,#DB8000)}
.px-banner--danger {--px-bg:var(--mk-colors-red-50,#FDECEE);--px-border:var(--mk-colors-red-400,#DA473F);--px-icon:var(--mk-colors-red-700,#AB3129)}
.px-banner--inline {padding:var(--mk-space-3,12px) var(--mk-space-4,16px) !important;border-radius:var(--mk-radii-md,6px) !important;margin-bottom:var(--mk-space-3,12px)}
.px-banner__icon {flex:0 0 var(--mk-space-5,20px);width:var(--mk-space-5,20px);height:var(--mk-space-5,20px);margin-top:1px;display:inline-flex;align-items:center;justify-content:center;color:var(--px-icon) !important}
.px-banner__icon svg {display:block;width:20px;height:20px;stroke:currentColor;flex:none}
.px-banner__content {min-width:0;flex:1;max-width:100%;display:flex;flex-direction:column;gap:var(--mk-space-1,4px);color:inherit !important}
.px-banner__title,.px-banner__content > strong,.px-banner__content > b,.px-banner__content > div > strong:first-child {font-size:var(--mk-fontSizes-sm,14px);font-weight:var(--mk-fontWeights-semibold,600);line-height:1.45;color:inherit !important}
.px-banner__description,.px-banner__content > p,.px-banner__content > div > p {margin:0;color:inherit !important;line-height:1.55;max-width:none !important}
.px-banner__description {min-width:0;overflow-wrap:anywhere}
.px-banner__link,.px-banner__content a:not(.btn):not(.ac-btn):not(.jr-btn) {color:var(--px-icon) !important;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.px-banner__content a:is(.btn,.ac-btn,.jr-btn){align-self:flex-start}
.px-banner :is(a,button):focus-visible {outline:2px solid var(--px-icon) !important;outline-offset:2px}
.px-banner__close {appearance:none;flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent !important;border:0 !important;border-radius:6px !important;color:var(--mk-colors-gray-600,#626B79) !important;cursor:pointer;box-shadow:none !important;padding:5px !important;margin:-4px -7px 0 0 !important;line-height:1 !important}
.px-banner__close svg{width:16px;height:16px}
.px-banner__close:hover {background:rgba(0,0,0,.06) !important;color:var(--mk-colors-dark,#232933) !important}
.px-banner [hidden]{display:none !important}
.px-banner .jr-alert-icon{display:none !important}
.px-banner .px-banner__content > :is(p,div,span,ul,ol){max-width:100%;margin-block:0}
/* Past admin flash was fixed-position toast; make it an in-flow Banner in the admin main pane. */
.jf-admin-main > .px-banner {position:relative !important;top:auto !important;right:auto !important;left:auto !important;transform:none !important;opacity:1 !important;visibility:visible !important;z-index:auto !important;max-width:none !important;animation:none !important}
/* Announcement spanning site content, not floating or overlaying nav. */
.px-site-announcement {width:100%;padding-block:var(--mk-space-2,8px);background:var(--mk-colors-white,#fff)}
.px-site-announcement > .container {width:calc(100% - var(--page-gutter,32px));max-width:none;margin-inline:auto}
.px-site-announcement .px-banner {margin:0}
/* Legacy layout fragments must not compete with their new banner layout. */
.jf-settings-modal-status.px-banner,.jf-settings-modal-message.px-banner,.jf-users-v2-status.px-banner,.jf-company-status.px-banner,.kb-import-alert.px-banner,.ac-notice.px-banner,.jr-alert.px-banner,.aj-notice.px-banner,.nt-notice.px-banner,.jf-candidate-alert.px-banner,.jf-reg-alert.px-banner,.jf-settings-alert.px-banner {max-height:none !important;height:auto !important;min-height:0;transform:none !important}
.jf-settings-modal-status.px-banner .px-banner__content > div,.jr-alert.px-banner .px-banner__content > div {flex:initial}
.px-banner .jf-settings-modal-status b{display:none}
/* Desktop full-width retained; on narrow devices reserve the button/icon space. */
@media (max-width:639.98px){.px-banner{padding:var(--mk-space-3,12px) var(--mk-space-4,16px) !important;gap:var(--mk-space-2,8px) !important}.px-banner__icon{flex-basis:18px;width:18px;height:18px}.px-banner__icon svg{width:18px;height:18px}.px-banner__close{flex-basis:24px;width:24px;height:24px;margin: -3px -5px 0 0 !important}}
@media (prefers-reduced-motion:reduce){.px-banner,.px-banner *{transition:none !important;animation:none !important}}