/* Talnt Pixel Modal — CSS/native JS adapter based on Mekari Pixel Modal.
   https://docs.mekari.design/components/modal.html
   Sizes: sm/md/lg/xl/2xl/full, overlay, content, header, body, footer.
   Scoped selectors preserve existing PHP form actions, buttons and drawer workflows. */
:root {
 --px-modal-sm:400px; --px-modal-md:512px; --px-modal-lg:640px;
 --px-modal-xl:768px; --px-modal-2xl:960px;
 --px-modal-surface:var(--mk-colors-white,#fff);
 --px-modal-border:var(--mk-colors-gray-100,#e5e7eb);
 --px-modal-text:var(--mk-colors-dark,#17202f);
 --px-modal-muted:var(--mk-colors-gray-600,#626b79);
 --px-modal-overlay:rgba(16,24,40,.56);
 --px-modal-shadow:0 24px 65px rgba(15,23,42,.22),0 6px 18px rgba(15,23,42,.1);
}
html.px-modal-lock,body.px-modal-lock {overflow:hidden!important}
html body .px-modal[hidden], html body .px-modal[aria-hidden="true"] {display:none!important}
html body .jf-settings-modal-layer.px-modal.is-open,
html body .jf-user-modal.px-modal.is-open,
html body .jf-company-modal.px-modal.is-open,
html body .job-share-modal-v086.px-modal:not([hidden]),
html body .coming-modal.px-modal:not([hidden]) {
 position:fixed;inset:0;z-index:var(--mk-zIndices-modal,1400);
 display:grid;place-items:center;padding:24px;
 box-sizing:border-box;isolation:isolate;
}
html body .px-modal .px-modal__overlay {position:absolute;inset:0;background:var(--px-modal-overlay);backdrop-filter:none}
html body .px-modal .px-modal__content {
 position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;
 display:block;box-sizing:border-box;min-width:0;
 width:min(var(--px-modal-width,var(--px-modal-md)),100%);
 max-width:100%;max-height:calc(100dvh - 48px);
 overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
 background:var(--px-modal-surface);color:var(--px-modal-text);
 border:1px solid var(--px-modal-border);border-radius:12px;
 box-shadow:var(--px-modal-shadow);scrollbar-gutter:stable;
 outline:0;text-align:left;animation:pxModalEnter .16s cubic-bezier(.2,.7,.3,1) both;
}
html body .px-modal[data-pixel-modal-size="sm"] {--px-modal-width:var(--px-modal-sm)}
html body .px-modal[data-pixel-modal-size="md"] {--px-modal-width:var(--px-modal-md)}
html body .px-modal[data-pixel-modal-size="lg"] {--px-modal-width:var(--px-modal-lg)}
html body .px-modal[data-pixel-modal-size="xl"] {--px-modal-width:var(--px-modal-xl)}
html body .px-modal[data-pixel-modal-size="2xl"] {--px-modal-width:var(--px-modal-2xl)}
html body .px-modal[data-pixel-modal-size="full"] {--px-modal-width:100%}
/* Heading and descriptive content follows existing typography tokens. */
html body .px-modal .px-modal__header {min-width:0;text-align:left}
html body .px-modal .px-modal__header :is(h2,h3) {color:var(--px-modal-text);font-size:20px;line-height:1.4;letter-spacing:-.025em;font-weight:600}
html body .px-modal .px-modal__header p {color:var(--px-modal-muted);font-size:14px;line-height:1.55}
html body .px-modal .px-modal__body {min-width:0}
html body .px-modal .px-modal__footer {display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
html body .px-modal .px-modal__close {
 width:32px;min-width:32px;height:32px;min-height:32px;
 display:grid;place-items:center;flex:0 0 32px;
 padding:0;border:0;border-radius:8px;background:transparent;
 color:var(--px-modal-muted);font-size:24px;line-height:1;font-weight:400;
 cursor:pointer;box-shadow:none;
}
html body .px-modal .px-modal__close:hover {background:var(--mk-colors-gray-50,#f3f4f6);color:var(--px-modal-text)}
html body .px-modal .px-modal__close:focus-visible,
html body .px-modal .px-modal__content:focus-visible {outline:2px solid var(--mk-colors-blue-500,#0768EB);outline-offset:2px}
html body .px-modal .px-modal__danger {background:var(--mk-colors-red-500,#c83e39);color:#fff;border-color:transparent}
/* Settings dialog. Retain real forms, OTP validators, and flash banners. */
html body .jf-settings-modal-layer.px-modal {align-items:center;justify-items:center}
html body .jf-settings-modal-layer.px-modal .jf-settings-modal.px-modal__content {padding:24px}
html body .jf-settings-modal-layer.px-modal .jf-settings-modal-head {padding-right:40px;margin-bottom:20px}
html body .jf-settings-modal-layer.px-modal .jf-settings-modal-actions {padding-top:16px;margin-top:20px;border-top:1px solid var(--px-modal-border);position:static;background:transparent}
html body .jf-settings-modal-layer.px-modal .jf-settings-modal-close {position:absolute;top:14px;right:14px}
/* Company dialogs with action buttons inside existing forms. */
html body .jf-company-modal.px-modal .jf-company-modal-card.px-modal__content {padding:0}
html body .jf-company-modal.px-modal .jf-company-modal-card>header {padding:20px 24px;grid-template-columns:40px minmax(0,1fr) 32px;gap:12px;border-bottom:1px solid var(--px-modal-border)}
html body .jf-company-modal.px-modal .jf-company-modal-card>header>button.px-modal__close {position:relative;inset:auto;max-width:32px}
html body .jf-company-modal.px-modal .jf-company-form {padding:24px;max-width:100%;box-sizing:border-box}
html body .jf-company-modal.px-modal .jf-company-form>footer {grid-column:1/-1;border-top:1px solid var(--px-modal-border);padding-top:16px;margin-top:8px}
/* Admin user create dialog. */
html body .jf-user-modal.px-modal .jf-user-modal-panel.px-modal__content {padding:24px}
html body .jf-user-modal.px-modal .jf-user-modal-x {position:absolute;right:16px;top:14px}
html body .jf-user-modal.px-modal .jf-user-modal-title {padding-right:40px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--px-modal-border)}
html body .jf-user-modal.px-modal .jf-user-create-actions {padding-top:16px;border-top:1px solid var(--px-modal-border)}
/* Job sharing modal. */
html body .job-share-modal-v086.px-modal .job-share-dialog-v086 {padding:24px}
html body .job-share-modal-v086.px-modal .job-share-head-v086 {margin-bottom:12px}
html body .job-share-modal-v086.px-modal .job-share-close-v086 {font-size:24px}
/* Employer announcement dialog — centered content remains centered like existing flow. */
html body .coming-modal.px-modal .coming-modal-card {padding:28px 24px 24px;text-align:center}
html body .coming-modal.px-modal .coming-modal-card>h2,
html body .coming-modal.px-modal .coming-modal-card>p {text-align:center}
html body .coming-modal.px-modal .coming-modal-close {position:absolute;right:12px;top:12px}
/* Drawer overlays are not centered modals. Preserve drawer, align overlay and focus affordance. */
html body .px-modal-drawer .aj-backdrop {background:var(--px-modal-overlay);backdrop-filter:none}
html body .px-modal-drawer :is(.aj-drawer,.aj-editor) {outline:none;overscroll-behavior:contain}
html body .px-modal-drawer :is(.aj-drawer,.aj-editor):focus-visible {outline:2px solid var(--mk-colors-blue-500,#0768EB);outline-offset:-2px}
@keyframes pxModalEnter {from {opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media (max-width:767.98px) {
 html body .jf-settings-modal-layer.px-modal.is-open,
 html body .jf-user-modal.px-modal.is-open,
 html body .jf-company-modal.px-modal.is-open,
 html body .job-share-modal-v086.px-modal:not([hidden]),
 html body .coming-modal.px-modal:not([hidden]) {padding:12px;place-items:center}
 html body .px-modal .px-modal__content {width:100%;max-height:calc(100dvh - 24px);border-radius:12px}
 html body .jf-settings-modal-layer.px-modal .jf-settings-modal.px-modal__content,
 html body .jf-user-modal.px-modal .jf-user-modal-panel.px-modal__content,
 html body .job-share-modal-v086.px-modal .job-share-dialog-v086 {padding:18px 16px}
 html body .jf-company-modal.px-modal .jf-company-modal-card>header {padding:16px;grid-template-columns:32px minmax(0,1fr) 32px;gap:8px}
 html body .jf-company-modal.px-modal .jf-company-form {padding:16px}
 html body .px-modal .px-modal__header :is(h2,h3) {font-size:18px}
 html body .px-modal .px-modal__footer {justify-content:stretch}
 html body .px-modal .px-modal__footer>button {flex:1;min-width:0}
 html body .px-modal[data-pixel-modal-size="full"] .px-modal__content {max-height:calc(100dvh - 16px)}
}
@media (max-height:520px) {html body .px-modal .px-modal__content {max-height:calc(100dvh - 16px)}}
@media (prefers-reduced-motion:reduce) {html body .px-modal .px-modal__content{animation:none}}
@media (forced-colors:active) {html body .px-modal .px-modal__content {border:2px solid CanvasText}html body .px-modal .px-modal__overlay {background:Canvas}}