/* TALNT / Mekari Pixel Button Icon (native PHP/JS equivalent)
 * https://docs.mekari.design/components/button.html#button-icon
 * Loads AFTER pixel-button.css. Square sm=32px/md=40px; visual tokens inherited.
 * Only controls with no visible text are enhanced. Tab, banner, menu and switches retain their semantics.
 */
:root {
  --px-ib-neutral: var(--mk-colors-gray-600, #626B79);
  --px-ib-ink: var(--mk-colors-dark, #232933);
  --px-ib-blue: var(--mk-colors-blue-500, #0768EB);
  --px-ib-blue-hover: var(--mk-colors-blue-700, #0558C7);
  --px-ib-soft: var(--mk-colors-gray-50, #EDF0F2);
  --px-ib-alert: var(--mk-colors-red-500, #C83E39);
}
[data-pixel-icon-button="true"] {
  --px-ib-size: var(--mk-space-10, 40px);
  --px-ib-icon-size: var(--mk-space-5, 20px);
  --px-btn-bg: transparent;
  --px-btn-fg: var(--px-ib-neutral);
  --px-btn-stroke: transparent;
  --px-btn-hover-bg: var(--px-ib-soft);
  --px-btn-hover-fg: var(--px-ib-blue-hover);
  --px-btn-hover-stroke: transparent;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: var(--px-ib-size) !important;
  min-width: var(--px-ib-size) !important;
  max-width: var(--px-ib-size) !important;
  height: var(--px-ib-size) !important;
  min-height: var(--px-ib-size) !important;
  max-height: var(--px-ib-size) !important;
  padding: 0 !important;
  margin-inline: 0;
  gap: 0 !important;
  border: 1px solid var(--px-btn-stroke) !important;
  border-radius: var(--mk-radii-md, 6px) !important;
  background: var(--px-btn-bg) !important;
  background-image: none !important;
  color: var(--px-btn-fg) !important;
  font-family: var(--mk-fonts-body, Inter, system-ui, sans-serif) !important;
  font-size: var(--mk-fontSizes-xl, 20px) !important;
  font-weight: var(--mk-fontWeights-medium, 500) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-align: center;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
[data-pixel-icon-button="true"][data-pixel-icon-size="sm"] {
  --px-ib-size: var(--mk-space-8, 32px);
  --px-ib-icon-size: var(--mk-space-4-5, 18px);
}
[data-pixel-icon-button="true"][data-pixel-icon-variant="secondary"] {
  --px-btn-bg: var(--mk-colors-white, #fff);
  --px-btn-fg: var(--px-ib-blue);
  --px-btn-stroke: var(--mk-colors-blue-100, #D6DFFF);
  --px-btn-hover-bg: var(--mk-colors-blue-50, #EAECFB);
  --px-btn-hover-fg: var(--px-ib-blue-hover);
  --px-btn-hover-stroke: var(--mk-colors-blue-400, #0768EB);
}
[data-pixel-icon-button="true"][data-pixel-icon-variant="primary"] {
  --px-btn-bg: var(--px-ib-blue);
  --px-btn-fg: var(--mk-colors-white, #fff);
  --px-btn-stroke: var(--px-ib-blue);
  --px-btn-hover-bg: var(--px-ib-blue-hover);
  --px-btn-hover-fg: var(--mk-colors-white, #fff);
  --px-btn-hover-stroke: var(--px-ib-blue-hover);
}
[data-pixel-icon-button="true"][data-pixel-icon-variant="danger"] {
  --px-btn-bg: var(--px-ib-alert);
  --px-btn-fg: var(--mk-colors-white, #fff);
  --px-btn-stroke: var(--px-ib-alert);
  --px-btn-hover-bg: var(--mk-colors-red-700, #AB3129);
  --px-btn-hover-fg: var(--mk-colors-white, #fff);
  --px-btn-hover-stroke: var(--mk-colors-red-700, #AB3129);
}
/* Destructive compact actions stay quiet until hover (not every delete icon is a red square). */
[data-pixel-icon-button="true"][data-pixel-icon-tone="danger"]:not([data-pixel-icon-variant="danger"]) {
  --px-btn-fg: var(--px-ib-alert);
  --px-btn-hover-bg: var(--mk-colors-red-50, #FDF1F0);
  --px-btn-hover-fg: var(--mk-colors-red-700, #AB3129);
}
[data-pixel-icon-button="true"][data-pixel-icon-rounded="true"] {border-radius: 9999px !important;}
[data-pixel-icon-button="true"][aria-pressed="true"]:not([data-pixel-icon-variant="primary"]):not([data-pixel-icon-tone="danger"]) {
  --px-btn-fg: var(--px-ib-blue);
  --px-btn-bg: var(--mk-colors-blue-50, #EAECFB);
}
[data-pixel-icon-button="true"]:is(:hover,:active):not(:disabled):not([aria-disabled="true"]):not([data-pixel-icon-loading="true"]):not([data-pixel-loading="true"]) {
  background: var(--px-btn-hover-bg) !important;
  border-color: var(--px-btn-hover-stroke) !important;
  color: var(--px-btn-hover-fg) !important;
}
[data-pixel-icon-button="true"]:focus-visible {
  outline: 2px solid var(--mk-colors-blue-400, #0768EB) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--mk-colors-blue-50, #EAECFB) !important;
}
[data-pixel-icon-button="true"] :is(svg, i, .px-button-icon) {
  flex: none;
  max-width: 100%;
  pointer-events: none;
}
[data-pixel-icon-button="true"] svg {
  width: var(--px-ib-icon-size);
  height: var(--px-ib-icon-size);
}
[data-pixel-icon-button="true"]:is(:disabled,[aria-disabled="true"]) {
  opacity: .5 !important;
  cursor: not-allowed !important;
}
[data-pixel-icon-button="true"]:is(:disabled,[aria-disabled="true"]):is(:hover,:active) {
  background: var(--px-btn-bg) !important;
  color: var(--px-btn-fg) !important;
  border-color: var(--px-btn-stroke) !important;
}
[data-pixel-icon-button="true"][data-pixel-icon-loading="true"] {
  pointer-events: none;
  cursor: progress !important;
  opacity: 1 !important;
}
[data-pixel-icon-button="true"][data-pixel-icon-loading="true"] > * {visibility: hidden;}
[data-pixel-icon-button="true"][data-pixel-icon-loading="true"] {font-size: 0 !important;}
[data-pixel-icon-button="true"][data-pixel-icon-loading="true"]::after {
  content: "";
  position: absolute;
  width: var(--mk-space-4, 16px);
  height: var(--mk-space-4, 16px);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: px-button-spin .8s linear infinite;
}
/* Shared Button's own loader must not be duplicated if one has been activated there. */
[data-pixel-icon-button="true"][data-pixel-loading="true"]:before {display: none !important;}
[data-pixel-icon-button="true"][data-pixel-loading="true"]:after {
  content: "";
  position: absolute;
  width: var(--mk-space-4,16px);
  height: var(--mk-space-4,16px);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: px-button-spin .8s linear infinite;
}
/* Protect native responsive visibility: menu and mobile filter closing control
 * are hidden at breakpoints by earlier rules with !important. No forced display here. */
@media (prefers-reduced-motion: reduce) {
  [data-pixel-icon-button="true"] {transition:none !important;}
  [data-pixel-icon-button="true"]::after {animation:none !important;}
}

/* Existing Button base applies position:relative to all enhanced controls.
 * Preserve absolute positioning for inline form toggles and modal/avatar overlays. */
:is(.ux-password-toggle,.jf-settings-modal-close,.jf-user-modal-x)[data-pixel-icon-button="true"],
.jf-settings-photo-wrap .camera[data-pixel-icon-button="true"] {position:absolute !important;}
/* Preserve responsive visibility despite shared Button's display:inline-flex!important. */
@media (min-width: 1024px) {
  .site-header .menu-btn[data-pixel-icon-button="true"] {display:none!important;}
}
@media (min-width: 768px) {
  .filter-close-v079[data-pixel-icon-button="true"],
  .mobile-only[data-pixel-icon-button="true"] {display:none!important;}
}

[data-pixel-icon-button="true"][data-pixel-icon-loading="true"] {position:relative;}