/* ==========================================================================
   MatiQ product support (SupportSite): the /support/ page form, the floating
   feedback button + its dialog, and the console's Support dashboard (.npe-sd).

   Loaded on every front-end page (the button is on every page), so it is small
   and every rule is scoped under .npe-sup / .npe-sup-* / .npe-sd. The site's
   brand kit drives the colours (--npe-primary, --npe-on-primary,
   --npe-primary-strong, --npe-heading-font from Branding::css_tokens()); the
   theme (Divi) styles bare inputs and buttons, so each control sets what it needs.
   ========================================================================== */

.npe-sup{--npe-sup-fg:#1b1d21;--npe-sup-fg2:#4a4f57;--npe-sup-line:#c7cad1;--npe-sup-bg:#fff;--npe-sup-soft:#f5f6f8;--npe-sup-crit:#b3261e;--npe-sup-ok:#1f7a4d;color:var(--npe-sup-fg);font-size:16px;line-height:1.5;}
.npe-sup *,.npe-sup *::before,.npe-sup *::after{box-sizing:border-box;}
/* Divi gives every <p> a 1em bottom padding: the form sets its own spacing. */
.npe-sup p{padding:0;}

/* ---------- the page ---------- */
.npe-sup-page{max-width:720px;margin:0 auto;padding:8px 0 32px;}
.npe-sup .npe-sup__eyebrow{margin:0 0 4px;padding:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--npe-primary,#15659f);}
.npe-sup .npe-sup__title{margin:0 0 8px;padding:0;font-family:var(--npe-heading-font,inherit);font-size:28px;font-weight:800;line-height:1.2;color:var(--npe-sup-fg);}
.npe-sup .npe-sup__lead{margin:0 0 20px;padding:0;color:var(--npe-sup-fg2);}
.npe-sup .npe-sup__form{display:flex;flex-direction:column;gap:16px;margin:0;}
.npe-sup .npe-sup__form[hidden],.npe-sup [hidden]{display:none !important;}
.npe-sup .npe-sup__reqnote{margin:0;font-size:14px;color:var(--npe-sup-fg2);}
.npe-sup .npe-sup__field{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0;}
.npe-sup .npe-sup__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.npe-sup .npe-sup__label{display:block;margin:0;padding:0;font-size:15px;font-weight:700;color:var(--npe-sup-fg);}
.npe-sup .npe-sup__req{color:var(--npe-sup-crit);}
.npe-sup .npe-sup__input{display:block;width:100%;min-height:44px;margin:0;padding:10px 12px;border:1px solid var(--npe-sup-line);border-radius:8px;background:var(--npe-sup-bg);color:var(--npe-sup-fg);font:inherit;font-size:16px;line-height:1.4;box-shadow:none;}
.npe-sup textarea.npe-sup__input{min-height:140px;resize:vertical;}
.npe-sup select.npe-sup__input{appearance:auto;height:auto;}
.npe-sup .npe-sup__input:focus{outline:3px solid var(--npe-primary,#15659f);outline-offset:1px;border-color:var(--npe-primary,#15659f);}
.npe-sup .npe-sup__input[aria-invalid="true"]{border-color:var(--npe-sup-crit);}
.npe-sup .npe-sup__help{margin:0;padding:0;font-size:14px;color:var(--npe-sup-fg2);}
.npe-sup .npe-sup__err{margin:0;padding:0;font-size:14px;font-weight:600;color:var(--npe-sup-crit);}
.npe-sup .npe-sup__summary{margin:0;padding:12px 16px;border:2px solid var(--npe-sup-crit);border-radius:8px;background:#fdf1f0;color:var(--npe-sup-fg);}
.npe-sup .npe-sup__summary p{margin:0 0 6px;font-weight:700;}
.npe-sup .npe-sup__summary ul{margin:0;padding:0 0 0 20px;}
.npe-sup .npe-sup__summary a{color:var(--npe-sup-crit);text-decoration:underline;}
.npe-sup .npe-sup__privacy{margin:0;font-size:14px;color:var(--npe-sup-fg2);}
.npe-sup .npe-sup__privacy a,.npe-sup .npe-sup__alt a{color:var(--npe-primary,#15659f);text-decoration:underline;}
.npe-sup .npe-sup__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;}
.npe-sup .npe-sup__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 20px;border:1px solid var(--npe-primary,#15659f);border-radius:8px;background:var(--npe-primary,#15659f);color:var(--npe-on-primary,#fff);font:inherit;font-size:16px;font-weight:700;line-height:1;text-transform:none;letter-spacing:normal;cursor:pointer;}
.npe-sup .npe-sup__btn:hover{background:var(--npe-primary-strong,#0f4a78);border-color:var(--npe-primary-strong,#0f4a78);color:var(--npe-on-primary,#fff);}
.npe-sup .npe-sup__btn:focus-visible,.npe-sup .npe-sup-dialog__x:focus-visible,.npe-sup .npe-sup-ctx summary:focus-visible{outline:3px solid var(--npe-primary-strong,#0f4a78);outline-offset:2px;}
.npe-sup .npe-sup__btn[disabled]{opacity:.7;cursor:progress;}
.npe-sup .npe-sup__btn.is-ghost{background:var(--npe-sup-bg);color:var(--npe-sup-fg);border-color:var(--npe-sup-line);}
.npe-sup .npe-sup__btn.is-ghost:hover{background:var(--npe-sup-soft);color:var(--npe-sup-fg);}
.npe-sup .npe-sup__status{margin:0;font-weight:600;color:var(--npe-sup-crit);}
.npe-sup .npe-sup__status:empty{display:none;}
.npe-sup .npe-sup__done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0 0 16px;padding:16px;border:1px solid var(--npe-sup-ok);border-left-width:4px;border-radius:8px;background:#eef7f2;}
.npe-sup .npe-sup__done p{margin:0;font-weight:600;}
.npe-sup .npe-sup__alt{margin:20px 0 0;font-size:15px;color:var(--npe-sup-fg2);}

/* ---------- the floating button ---------- */
.npe-sup-widget{font-size:16px;}
.npe-sup-widget .npe-sup-fab{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));z-index:9980;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0;padding:0;border:2px solid #fff;border-radius:50%;background:var(--npe-primary,#15659f);color:var(--npe-on-primary,#fff);box-shadow:0 6px 18px rgba(0,0,0,.24);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.npe-sup-widget.is-left .npe-sup-fab{left:max(20px,env(safe-area-inset-left));}
.npe-sup-widget.is-right .npe-sup-fab{right:max(20px,env(safe-area-inset-right));}
.npe-sup-widget .npe-sup-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3);}
.npe-sup-widget .npe-sup-fab:focus-visible{outline:3px solid var(--npe-primary-strong,#0b3f66);outline-offset:3px;}
.npe-sup-widget .npe-sup-fab svg{display:block;}
/* The tour guide's ? bubble (npe-tours.css) is bottom left too: stand above it. */
body:has(.npe-tg) .npe-sup-widget.is-left .npe-sup-fab{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 64px);}
/* GTranslate's switcher sits fixed in a bottom corner (like the Donate button's rule): lift the button above it on that side. */
body:has(.gtranslate_wrapper .gt_switcher_wrapper[style*="right"]) .npe-sup-widget.is-right .npe-sup-fab,body:has(.gtranslate_wrapper .gt_switcher_wrapper[style*="left"]) .npe-sup-widget.is-left .npe-sup-fab{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 44px);}
@media (prefers-reduced-motion:reduce){.npe-sup-widget .npe-sup-fab{transition:none;}.npe-sup-widget .npe-sup-fab:hover{transform:none;}}
.npe-sup .npe-sup-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- the dialog ---------- */
.npe-sup .npe-sup-dialog{width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:20px;overflow-y:auto;border:0;border-radius:12px;background:var(--npe-sup-bg);color:var(--npe-sup-fg);box-shadow:0 20px 40px rgba(16,25,43,.24);font-size:16px;line-height:1.5;}
.npe-sup .npe-sup-dialog::backdrop{background:rgba(20,26,38,.45);}
.npe-sup .npe-sup-dialog__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.npe-sup .npe-sup-dialog__title{margin:0;padding:0;font-family:var(--npe-heading-font,inherit);font-size:22px;font-weight:800;line-height:1.25;color:var(--npe-sup-fg);}
.npe-sup .npe-sup-dialog__x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:-8px -8px 0 0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--npe-sup-fg2);cursor:pointer;}
.npe-sup .npe-sup-dialog__x:hover{background:var(--npe-sup-soft);color:var(--npe-sup-fg);}
.npe-sup .npe-sup-dialog .npe-sup__lead{margin:0;font-size:15px;}
.npe-sup .npe-sup-dialog textarea.npe-sup__input{min-height:110px;}
.npe-sup .npe-sup-ctx{margin:0;padding:0;border:1px solid var(--npe-sup-line);border-radius:8px;background:var(--npe-sup-soft);}
.npe-sup .npe-sup-ctx summary{min-height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:15px;font-weight:700;cursor:pointer;list-style:none;}
.npe-sup .npe-sup-ctx summary::-webkit-details-marker{display:none;}
.npe-sup .npe-sup-ctx summary::before{content:"";flex:none;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;transition:transform .15s ease;}
.npe-sup .npe-sup-ctx[open] > summary::before{transform:rotate(90deg);}
.npe-sup .npe-sup-ctx > .npe-sup__help{padding:0 12px;}
.npe-sup .npe-sup-ctx__list{margin:8px 0 0;padding:0 12px 12px;font-size:14px;}
.npe-sup .npe-sup-ctx__list > div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid var(--npe-sup-line);}
.npe-sup .npe-sup-ctx__list dt{margin:0;font-weight:700;color:var(--npe-sup-fg2);}
.npe-sup .npe-sup-ctx__list dd{margin:0;overflow-wrap:anywhere;}

@media (max-width:720px){
  .npe-sup .npe-sup__row{grid-template-columns:minmax(0,1fr);}
  .npe-sup .npe-sup__title{font-size:24px;}
  .npe-sup .npe-sup-dialog{padding:16px;}
  .npe-sup .npe-sup-ctx__list > div{grid-template-columns:minmax(0,1fr);gap:2px;}
  .npe-sup .npe-sup__actions{justify-content:stretch;}
  .npe-sup .npe-sup__actions .npe-sup__btn{flex:1 1 auto;}
}
@media print{.npe-sup-widget{display:none;}}

/* ---------- the console's Support dashboard (views/console/view-support.php) ---------- */
.npe-sd .npe-sd-sub{display:block;font-size:var(--t-meta,11.5px);color:var(--fg2,#727880);}
.npe-sd .npe-sd-page{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.npe-sd .npe-sd-ref{white-space:nowrap;}
.npe-sd .npe-sd-desc{margin:var(--s3,12px) 0 0;white-space:normal;overflow-wrap:anywhere;}
.npe-sd .npe-sd-errors{margin:var(--s3,12px) 0 0;padding-left:20px;}
.npe-sd .npe-sd-errors code{white-space:pre-wrap;overflow-wrap:anywhere;}
.npe-sd .npe-sd-detail .npe-k-field{display:flex;flex-direction:column;gap:var(--s1,4px);margin:0 0 var(--s3,12px);}
.npe-sd .npe-sd-detail textarea{width:100%;}
@media (max-width:1080px){.npe-sd .npe-sd-detail.cols-2{grid-template-columns:minmax(0,1fr);}}