/*
 * MXAI Standard Button System
 * Shared visual contract for MXAI Portal + App Connector.
 * Palette intentionally avoids red/pink for normal, hover, focus and active states.
 */
:root{
  --mxai-btn-primary:#2f6bff;
  --mxai-btn-primary-hover:#1f57dd;
  --mxai-btn-cyan:#12bde5;
  --mxai-btn-green:#16a66a;
  --mxai-btn-green-hover:#128453;
  --mxai-btn-text:#17324f;
  --mxai-btn-muted:#5d7189;
  --mxai-btn-border:#bfd4ef;
  --mxai-btn-border-hover:#60a5fa;
  --mxai-btn-soft:#f4f8ff;
  --mxai-btn-soft-hover:#e8f2ff;
  --mxai-btn-focus:rgba(47,107,255,.18);
  --mxai-btn-radius:10px;
  --mxai-btn-height:44px;
}

/* Base contract — explicit class for new UI. */
.mxai-btn,
.mxai-btn:visited{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--mxai-btn-height);
  padding:0 18px;
  border:1px solid var(--mxai-btn-border)!important;
  border-radius:var(--mxai-btn-radius)!important;
  background:#fff!important;
  color:var(--mxai-btn-text)!important;
  -webkit-text-fill-color:var(--mxai-btn-text)!important;
  font:700 14px/1.2 inherit;
  text-decoration:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.mxai-btn:hover,
.mxai-btn:focus,
.mxai-btn:active{
  background:var(--mxai-btn-soft-hover)!important;
  border-color:var(--mxai-btn-border-hover)!important;
  color:#1f57dd!important;
  -webkit-text-fill-color:#1f57dd!important;
  text-decoration:none!important;
}
.mxai-btn:focus-visible{outline:0!important;box-shadow:0 0 0 3px var(--mxai-btn-focus)!important}
.mxai-btn:active{transform:translateY(1px)}

.mxai-btn-primary,
.mxai-btn-primary:visited{
  border-color:var(--mxai-btn-primary)!important;
  background:linear-gradient(135deg,var(--mxai-btn-primary) 0%,#4f67f7 58%,var(--mxai-btn-cyan) 125%)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.mxai-btn-primary:hover,
.mxai-btn-primary:focus,
.mxai-btn-primary:active{
  border-color:var(--mxai-btn-primary-hover)!important;
  background:linear-gradient(135deg,var(--mxai-btn-primary-hover) 0%,#3158e7 58%,#0ea5c6 125%)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 8px 18px rgba(47,107,255,.16)!important;
}

.mxai-btn-success,
.mxai-btn-success:visited{border-color:var(--mxai-btn-green)!important;background:var(--mxai-btn-green)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.mxai-btn-success:hover,.mxai-btn-success:focus,.mxai-btn-success:active{border-color:var(--mxai-btn-green-hover)!important;background:var(--mxai-btn-green-hover)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

.mxai-btn-outline,
.mxai-btn-outline:visited{border-color:#8bb9ef!important;background:#fff!important;color:#245ea8!important;-webkit-text-fill-color:#245ea8!important}
.mxai-btn-outline:hover,.mxai-btn-outline:focus,.mxai-btn-outline:active{border-color:#4f8cff!important;background:#eff6ff!important;color:#174ea6!important;-webkit-text-fill-color:#174ea6!important}

.mxai-btn-soft,
.mxai-btn-soft:visited{border-color:#d8e6f5!important;background:var(--mxai-btn-soft)!important;color:#315b89!important;-webkit-text-fill-color:#315b89!important}
.mxai-btn-soft:hover,.mxai-btn-soft:focus,.mxai-btn-soft:active{border-color:#9bc2ee!important;background:#e9f3ff!important;color:#174ea6!important;-webkit-text-fill-color:#174ea6!important}

/* Destructive actions stay non-red by design: amber emphasis + clear label. */
.mxai-btn-caution,
.mxai-btn-caution:visited{border-color:#e5c66d!important;background:#fffaf0!important;color:#7a5a05!important;-webkit-text-fill-color:#7a5a05!important}
.mxai-btn-caution:hover,.mxai-btn-caution:focus,.mxai-btn-caution:active{border-color:#d7b44e!important;background:#fff4d6!important;color:#674b00!important;-webkit-text-fill-color:#674b00!important}

.mxai-btn-sm{min-height:36px;padding:0 13px;font-size:12px}
.mxai-btn-lg{min-height:48px;padding:0 22px;font-size:15px;border-radius:12px!important}
.mxai-btn-icon{width:44px;min-width:44px;padding:0!important}
.mxai-btn[disabled],.mxai-btn.is-disabled,.mxai-btn[aria-disabled="true"]{opacity:.52!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}

/* Children must never lose text/icon color on hover because of WP/theme rules. */
.mxai-btn *,
.mxai-btn:hover *,
.mxai-btn:focus *,
.mxai-btn:active *{color:inherit!important;-webkit-text-fill-color:inherit!important}
.mxai-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}

/* Normalize existing WordPress buttons inside MXAI surfaces. */
.mxai-admin .button,
.mxai-one .button,
.mxpay-admin .button,
.mxai-auth-admin .button,
.mxai-center-wrap .button,
.mxa-shell .button,
.mxa-center-packages .button{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:44px!important;
  height:auto!important;
  padding:0 18px!important;
  border:1px solid var(--mxai-btn-border)!important;
  border-radius:var(--mxai-btn-radius)!important;
  background:#fff!important;
  color:var(--mxai-btn-text)!important;
  -webkit-text-fill-color:var(--mxai-btn-text)!important;
  font-weight:700!important;
  line-height:1.2!important;
  text-decoration:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
  vertical-align:middle!important;
}
.mxai-admin .button:hover,.mxai-admin .button:focus,.mxai-admin .button:active,
.mxai-one .button:hover,.mxai-one .button:focus,.mxai-one .button:active,
.mxpay-admin .button:hover,.mxpay-admin .button:focus,.mxpay-admin .button:active,
.mxai-auth-admin .button:hover,.mxai-auth-admin .button:focus,.mxai-auth-admin .button:active,
.mxai-center-wrap .button:hover,.mxai-center-wrap .button:focus,.mxai-center-wrap .button:active,
.mxa-shell .button:hover,.mxa-shell .button:focus,.mxa-shell .button:active,
.mxa-center-packages .button:hover,.mxa-center-packages .button:focus,.mxa-center-packages .button:active{
  border-color:var(--mxai-btn-border-hover)!important;
  background:var(--mxai-btn-soft-hover)!important;
  color:#1f57dd!important;
  -webkit-text-fill-color:#1f57dd!important;
  text-decoration:none!important;
}

.mxai-admin .button-primary,.mxai-admin .button-primary:visited,
.mxai-one .button-primary,.mxai-one .button-primary:visited,
.mxpay-admin .button-primary,.mxpay-admin .button-primary:visited,
.mxai-auth-admin .button-primary,.mxai-auth-admin .button-primary:visited,
.mxai-center-wrap .button-primary,.mxai-center-wrap .button-primary:visited,
.mxa-shell .button-primary,.mxa-shell .button-primary:visited,
.mxa-center-packages .button-primary,.mxa-center-packages .button-primary:visited{
  border-color:var(--mxai-btn-primary)!important;
  background:linear-gradient(135deg,var(--mxai-btn-primary) 0%,#4f67f7 58%,var(--mxai-btn-cyan) 125%)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.mxai-admin .button-primary:hover,.mxai-admin .button-primary:focus,.mxai-admin .button-primary:active,
.mxai-one .button-primary:hover,.mxai-one .button-primary:focus,.mxai-one .button-primary:active,
.mxpay-admin .button-primary:hover,.mxpay-admin .button-primary:focus,.mxpay-admin .button-primary:active,
.mxai-auth-admin .button-primary:hover,.mxai-auth-admin .button-primary:focus,.mxai-auth-admin .button-primary:active,
.mxai-center-wrap .button-primary:hover,.mxai-center-wrap .button-primary:focus,.mxai-center-wrap .button-primary:active,
.mxa-shell .button-primary:hover,.mxa-shell .button-primary:focus,.mxa-shell .button-primary:active,
.mxa-center-packages .button-primary:hover,.mxa-center-packages .button-primary:focus,.mxa-center-packages .button-primary:active{
  border-color:var(--mxai-btn-primary-hover)!important;
  background:linear-gradient(135deg,var(--mxai-btn-primary-hover) 0%,#3158e7 58%,#0ea5c6 125%)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:none!important;
  box-shadow:0 8px 18px rgba(47,107,255,.16)!important;
}

/* Force nested text/icons to inherit, fixing the disappearing-text hover bug. */
.mxai-admin .button *, .mxai-one .button *, .mxpay-admin .button *, .mxai-auth-admin .button *, .mxai-center-wrap .button *, .mxa-shell .button *, .mxa-center-packages .button *,
.mxai-admin .button:hover *, .mxai-one .button:hover *, .mxpay-admin .button:hover *, .mxai-auth-admin .button:hover *, .mxai-center-wrap .button:hover *, .mxa-shell .button:hover *, .mxa-center-packages .button:hover *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}

/* Copy / utility controls. */
.mxai-copy-button,.mxa-copy-field{
  min-height:40px!important;
  border:1px solid #9dc3ef!important;
  border-radius:10px!important;
  background:#eff6ff!important;
  color:#1d4ed8!important;
  -webkit-text-fill-color:#1d4ed8!important;
  font-weight:800!important;
  padding:0 14px!important;
}
.mxai-copy-button:hover,.mxai-copy-button:focus,.mxa-copy-field:hover,.mxa-copy-field:focus{
  border-color:#60a5fa!important;
  background:#dbeafe!important;
  color:#174ea6!important;
  -webkit-text-fill-color:#174ea6!important;
}

/* Focus ring is always blue, never red/pink. */
.mxai-admin .button:focus-visible,.mxai-one .button:focus-visible,.mxpay-admin .button:focus-visible,.mxai-auth-admin .button:focus-visible,.mxai-center-wrap .button:focus-visible,.mxa-shell .button:focus-visible,.mxa-center-packages .button:focus-visible,.mxai-btn:focus-visible,.mxai-copy-button:focus-visible,.mxa-copy-field:focus-visible{
  outline:0!important;
  box-shadow:0 0 0 3px var(--mxai-btn-focus)!important;
}

/* Portal public/frontend buttons use legacy classes; normalize them into the same contract. */
.mx-site .primary,.mx-site .primary:visited,
.mx-portal-page .primary,.mx-portal-page .primary:visited,
.mx-portal-login .primary,.mx-portal-login .primary:visited{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  min-height:44px!important;padding:0 18px!important;border:1px solid var(--mxai-btn-primary)!important;border-radius:10px!important;
  background:linear-gradient(135deg,var(--mxai-btn-primary) 0%,#4f67f7 58%,var(--mxai-btn-cyan) 125%)!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:800!important;text-decoration:none!important;text-shadow:none!important;box-shadow:none!important;
}
.mx-site .primary:hover,.mx-site .primary:focus,.mx-site .primary:active,
.mx-portal-page .primary:hover,.mx-portal-page .primary:focus,.mx-portal-page .primary:active,
.mx-portal-login .primary:hover,.mx-portal-login .primary:focus,.mx-portal-login .primary:active{
  border-color:var(--mxai-btn-primary-hover)!important;background:linear-gradient(135deg,var(--mxai-btn-primary-hover) 0%,#3158e7 58%,#0ea5c6 125%)!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 8px 18px rgba(47,107,255,.16)!important;text-decoration:none!important;
}
.mx-site .ghost,.mx-site .soft,.mx-portal-page .ghost,.mx-portal-login .ghost{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:44px!important;padding:0 18px!important;
  border:1px solid #bcd2ee!important;border-radius:10px!important;background:#fff!important;color:#245ea8!important;-webkit-text-fill-color:#245ea8!important;font-weight:700!important;text-decoration:none!important;
}
.mx-site .ghost:hover,.mx-site .ghost:focus,.mx-site .soft:hover,.mx-site .soft:focus,.mx-portal-page .ghost:hover,.mx-portal-page .ghost:focus,.mx-portal-login .ghost:hover,.mx-portal-login .ghost:focus{
  border-color:#60a5fa!important;background:#eff6ff!important;color:#174ea6!important;-webkit-text-fill-color:#174ea6!important;text-decoration:none!important;
}
.copy-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;min-height:36px!important;padding:0 12px!important;
  border:1px solid #9dc3ef!important;border-radius:9px!important;background:#eff6ff!important;color:#1d4ed8!important;-webkit-text-fill-color:#1d4ed8!important;font-weight:800!important;cursor:pointer!important;text-shadow:none!important;box-shadow:none!important;
}
.copy-btn:hover,.copy-btn:focus,.copy-btn:active{border-color:#60a5fa!important;background:#dbeafe!important;color:#174ea6!important;-webkit-text-fill-color:#174ea6!important;box-shadow:0 0 0 3px rgba(47,107,255,.12)!important}
.copy-btn *,.copy-btn:hover *,.copy-btn:focus *{color:inherit!important;-webkit-text-fill-color:inherit!important}


/* ================================================================
   MXAI Button Label Visibility Guard v1.1
   Final cascade guard. Prevents button text/icons disappearing on
   hover/focus/active because of WordPress, admin theme or plugin CSS.
   ================================================================ */
body[class*="wp-admin"] .mxai-admin button,
body[class*="wp-admin"] .mxai-admin input[type="submit"],
body[class*="wp-admin"] .mxai-admin input[type="button"],
body[class*="wp-admin"] .mxai-admin a.button,
body[class*="wp-admin"] .mxai-one button,
body[class*="wp-admin"] .mxai-one input[type="submit"],
body[class*="wp-admin"] .mxai-one input[type="button"],
body[class*="wp-admin"] .mxai-one a.button,
body[class*="wp-admin"] .mxpay-admin button,
body[class*="wp-admin"] .mxpay-admin input[type="submit"],
body[class*="wp-admin"] .mxpay-admin input[type="button"],
body[class*="wp-admin"] .mxpay-admin a.button,
body[class*="wp-admin"] .mxai-auth-admin button,
body[class*="wp-admin"] .mxai-auth-admin input[type="submit"],
body[class*="wp-admin"] .mxai-auth-admin input[type="button"],
body[class*="wp-admin"] .mxai-auth-admin a.button,
body[class*="wp-admin"] .mxai-center-wrap button,
body[class*="wp-admin"] .mxai-center-wrap input[type="submit"],
body[class*="wp-admin"] .mxai-center-wrap input[type="button"],
body[class*="wp-admin"] .mxai-center-wrap a.button,
body[class*="wp-admin"] .mxa-shell button,
body[class*="wp-admin"] .mxa-shell input[type="submit"],
body[class*="wp-admin"] .mxa-shell input[type="button"],
body[class*="wp-admin"] .mxa-shell a.button,
.mxai-btn,
.mxai-copy-button,
.mxa-copy-field{
  opacity:1!important;
  visibility:visible!important;
  text-indent:0!important;
  text-shadow:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}

/* Non-primary buttons: keep a readable navy/blue label on every state. */
body[class*="wp-admin"] .mxai-admin .button:not(.button-primary):hover,
body[class*="wp-admin"] .mxai-admin .button:not(.button-primary):focus,
body[class*="wp-admin"] .mxai-admin .button:not(.button-primary):active,
body[class*="wp-admin"] .mxai-one .button:not(.button-primary):hover,
body[class*="wp-admin"] .mxai-one .button:not(.button-primary):focus,
body[class*="wp-admin"] .mxai-one .button:not(.button-primary):active,
body[class*="wp-admin"] .mxpay-admin .button:not(.button-primary):hover,
body[class*="wp-admin"] .mxpay-admin .button:not(.button-primary):focus,
body[class*="wp-admin"] .mxpay-admin .button:not(.button-primary):active,
body[class*="wp-admin"] .mxai-auth-admin .button:not(.button-primary):hover,
body[class*="wp-admin"] .mxai-auth-admin .button:not(.button-primary):focus,
body[class*="wp-admin"] .mxai-auth-admin .button:not(.button-primary):active,
body[class*="wp-admin"] .mxai-center-wrap .button:not(.button-primary):hover,
body[class*="wp-admin"] .mxai-center-wrap .button:not(.button-primary):focus,
body[class*="wp-admin"] .mxai-center-wrap .button:not(.button-primary):active,
body[class*="wp-admin"] .mxa-shell .button:not(.button-primary):hover,
body[class*="wp-admin"] .mxa-shell .button:not(.button-primary):focus,
body[class*="wp-admin"] .mxa-shell .button:not(.button-primary):active{
  color:#174ea6!important;
  -webkit-text-fill-color:#174ea6!important;
  opacity:1!important;
}

/* Primary buttons: white labels must stay white on every interactive state. */
body[class*="wp-admin"] .mxai-admin .button-primary,
body[class*="wp-admin"] .mxai-admin .button-primary:hover,
body[class*="wp-admin"] .mxai-admin .button-primary:focus,
body[class*="wp-admin"] .mxai-admin .button-primary:active,
body[class*="wp-admin"] .mxai-one .button-primary,
body[class*="wp-admin"] .mxai-one .button-primary:hover,
body[class*="wp-admin"] .mxai-one .button-primary:focus,
body[class*="wp-admin"] .mxai-one .button-primary:active,
body[class*="wp-admin"] .mxpay-admin .button-primary,
body[class*="wp-admin"] .mxpay-admin .button-primary:hover,
body[class*="wp-admin"] .mxpay-admin .button-primary:focus,
body[class*="wp-admin"] .mxpay-admin .button-primary:active,
body[class*="wp-admin"] .mxai-auth-admin .button-primary,
body[class*="wp-admin"] .mxai-auth-admin .button-primary:hover,
body[class*="wp-admin"] .mxai-auth-admin .button-primary:focus,
body[class*="wp-admin"] .mxai-auth-admin .button-primary:active,
body[class*="wp-admin"] .mxai-center-wrap .button-primary,
body[class*="wp-admin"] .mxai-center-wrap .button-primary:hover,
body[class*="wp-admin"] .mxai-center-wrap .button-primary:focus,
body[class*="wp-admin"] .mxai-center-wrap .button-primary:active,
body[class*="wp-admin"] .mxa-shell .button-primary,
body[class*="wp-admin"] .mxa-shell .button-primary:hover,
body[class*="wp-admin"] .mxa-shell .button-primary:focus,
body[class*="wp-admin"] .mxa-shell .button-primary:active,
.mxai-btn-primary,
.mxai-btn-primary:hover,
.mxai-btn-primary:focus,
.mxai-btn-primary:active{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

/* Nested labels, SVG wrappers and icons always inherit the resolved button color. */
body[class*="wp-admin"] .mxai-admin :is(button,.button) *,
body[class*="wp-admin"] .mxai-one :is(button,.button) *,
body[class*="wp-admin"] .mxpay-admin :is(button,.button) *,
body[class*="wp-admin"] .mxai-auth-admin :is(button,.button) *,
body[class*="wp-admin"] .mxai-center-wrap :is(button,.button) *,
body[class*="wp-admin"] .mxa-shell :is(button,.button) *,
.mxai-btn *, .mxai-copy-button *, .mxa-copy-field *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:none!important;
}