/* =======================================================
   MPA BUTTON CORE STYLES (shared)
   Variables can be overridden inline per instance.
======================================================= */
.mpa-btn {
  /* Defaults (can be overridden via inline style vars) */
  --mpa-bg: #0a1310;               /* Primary bg (normal) */
  --mpa-bg-hover: #343d3a;         /* Primary bg (hover/active) */
  --mpa-bg-disabled: #9e9f9f;      /* Disabled */
  --mpa-text: #ffffff;             /* Label color for filled */
  --mpa-border: #0a1310;           /* Secondary border/label */
  --mpa-border-hover: #343d3a;     /* Secondary hover border/label */
  --mpa-border-disabled: #c8c8c8;  /* Secondary disabled */
  --mpa-badge-bg: #ffffff;         /* Badge circle background */
  --mpa-badge-color: #0a1310;      /* Icon color inside badge */
  --mpa-radius: 9999px;            /* Border radius (overridden per instance) */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  font-family: "Public Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
}

/* Heights & paddings (LG default: 44px) */
.mpa-btn { height: 44px; }

/* Small breakpoint: 40px tall */
@media (max-width: 767px) {
  .mpa-btn { height: 40px; }
}

/* =======================
   VARIANTS
======================= */

/* Primary (pill) */
.mpa-btn--primary {
  background: var(--mpa-bg);
  color: var(--mpa-text);
  border-radius: var(--mpa-radius);
  padding: 12px 20px;
}
.mpa-btn--primary:hover,
.mpa-btn--primary:active,
.mpa-btn--primary:focus {
  background: var(--mpa-bg-hover);
  color: var(--mpa-text);
}

/* Primary with icon badge (pill + white circle badge) */
.mpa-btn--primary-icon {
  background: var(--mpa-bg);
  color: var(--mpa-text);
  border-radius: var(--mpa-radius);
  padding-left: 16px;
  padding-right: 8px; /* tighter to snug the badge */
  gap: 8px;
}
.mpa-btn--primary-icon:hover,
.mpa-btn--primary-icon:active,
.mpa-btn--primary-icon:focus {
  background: var(--mpa-bg-hover);
  color: var(--mpa-text);
}

/* Badge for the primary-icon variant */
.mpa-badge {
  --mpa-badge-radius: var(--mpa-radius);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mpa-badge-radius);
  background: var(--mpa-badge-bg);
  color: var(--mpa-badge-color);
  flex: 0 0 auto;
  transition: background-color .2s ease, color .2s ease;
}
.mpa-badge .mpa-icon,
.mpa-badge .mpa-icon--svg svg { width: 18px; height: 18px; display: block; }

/* Scale badge on small screens */
@media (max-width: 767px) {
  .mpa-badge { width: 28px; height: 28px; }
  .mpa-badge .mpa-icon,
  .mpa-badge .mpa-icon--svg svg { width: 16px; height: 16px; }
}

/* Keep badge white on hover; icon color remains brand */
.mpa-btn--primary-icon:hover .mpa-badge,
.mpa-btn--primary-icon:active .mpa-badge,
.mpa-btn--primary-icon:focus .mpa-badge {
  background: var(--mpa-badge-bg);
  color: var(--mpa-badge-color);
}

/* Secondary (outline) */
.mpa-btn--secondary {
  background: transparent;
  color: var(--mpa-border);
  border: 1.5px solid var(--mpa-border);
  border-radius: var(--mpa-radius);
  padding: 10px 18px; /* slightly slimmer than filled */
}
.mpa-btn--secondary:hover,
.mpa-btn--secondary:active,
.mpa-btn--secondary:focus {
  color: var(--mpa-border-hover);
  border-color: var(--mpa-border-hover);
  background: transparent;
}
/* Optional icon support for secondary (no white badge, simple inline icon) */
.mpa-btn--secondary .mpa-icon--svg svg { fill: currentColor; }

/* Disabled state (applies to all variants) */
.mpa-btn[aria-disabled="true"],
.mpa-btn.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.9;
}
.mpa-btn--primary[aria-disabled="true"],
.mpa-btn--primary.is-disabled,
.mpa-btn--primary-icon[aria-disabled="true"],
.mpa-btn--primary-icon.is-disabled {
  background: var(--mpa-bg-disabled);
  color: #fff;
}
.mpa-btn--secondary[aria-disabled="true"],
.mpa-btn--secondary.is-disabled {
  color: var(--mpa-border-disabled);
  border-color: var(--mpa-border-disabled);
}

/* NEW: Icon (circle) variant */
.mpa-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--mpa-bg);
  color: var(--mpa-text);
  border-radius: var(--mpa-radius);
}
.mpa-btn--icon:hover,
.mpa-btn--icon:active,
.mpa-btn--icon:focus {
  background: var(--mpa-bg-hover);
  color: var(--mpa-text);
}
.mpa-btn--icon[aria-disabled="true"],
.mpa-btn--icon.is-disabled {
  background: var(--mpa-bg-disabled);
  color: #fff;
}

/* Icon helpers */
.mpa-label { white-space: nowrap; }
.mpa-icon { width: 18px; height: 18px; display: inline-flex; }
.mpa-icon--svg svg { width: 18px; height: 18px; display: block; fill: currentColor; }

/* Center and size icon correctly inside circle */
.mpa-btn--icon .mpa-icon,
.mpa-btn--icon .mpa-icon--svg svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Icon placement (for primary-icon if you prefer label then badge on right) */
.mpa-btn.icon-right { flex-direction: row-reverse; }


/* Helpers for Elementor alignment */
.mpa-btn-wrap { display:flex; }
.mpa-btn--block { width:100%; justify-content:center; }
.mpa-icon--svg img { width:18px; height:18px; display:block; }