/* ==========================================================================
   Magnetrix — header button pair
   --------------------------------------------------------------------------
   Xpro's button style controls cannot be written through the API, so the two
   header buttons arrived with plugin defaults: identical teal fills, uppercase
   text with wide tracking, labels wrapping to two lines, and no gap between
   them. Rebuilt here against the markup Xpro actually renders:

     a.xpro-elementor-button > span.xpro-elementor-button-inner > span.xpro-button-text

   The two buttons are told apart by classes written into the template:
   .mx-hbtn--ghost (Track Shipment) and .mx-hbtn--primary (Get a Quote).
   ========================================================================== */

.mx-hbtn-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}
.mx-hbtn-row > .elementor-element { width: auto; flex: 0 0 auto; }

/* ---- shared shape ---- */
.mx-hbtn .xpro-elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 11px 20px;
  min-height: 42px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background-image: none;
  box-shadow: none;
  text-decoration: none;
  transition: background-color .18s, color .18s, border-color .18s,
              transform .18s, box-shadow .18s;
}
.mx-hbtn .xpro-elementor-button-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Xpro ships uppercase with wide tracking. Restore the brand type. */
.mx-hbtn .xpro-button-text {
  font-family: var(--mx-font-display), 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.1;
  white-space: nowrap;
}

.mx-hbtn .xpro-elementor-button:hover { transform: translateY(-1px); }
.mx-hbtn .xpro-elementor-button:active { transform: translateY(0); }
.mx-hbtn .xpro-elementor-button:focus-visible {
  outline: 3px solid var(--mx-accent);
  outline-offset: 3px;
}

/* ---- secondary: ghost on dark chrome ---- */
.mx-hbtn--ghost .xpro-elementor-button {
  background-color: transparent;
  color: #F7FCFC;
  border-color: rgba(255, 255, 255, .22);
}
.mx-hbtn--ghost .xpro-elementor-button:hover,
.mx-hbtn--ghost .xpro-elementor-button:focus-visible {
  background-color: rgba(32, 230, 242, .10);
  border-color: var(--mx-accent);
  color: var(--mx-accent);
}

/* ---- primary: cyan is the only thing that gets a fill ---- */
.mx-hbtn--primary .xpro-elementor-button {
  background-color: var(--mx-accent);
  color: var(--mx-ink);
  border-color: var(--mx-accent);
  box-shadow: 0 6px 18px rgba(32, 230, 242, .28);
}
.mx-hbtn--primary .xpro-elementor-button:hover,
.mx-hbtn--primary .xpro-elementor-button:focus-visible {
  background-color: #4CEDF6;
  border-color: #4CEDF6;
  color: var(--mx-ink);
  box-shadow: 0 10px 26px rgba(32, 230, 242, .36);
}

/* ---- narrow desktop: drop the label size a touch before anything wraps ---- */
@media (max-width: 1180px) and (min-width: 1025px) {
  .mx-hbtn .xpro-elementor-button { padding: 10px 16px; }
  .mx-hbtn .xpro-button-text { font-size: 13.5px; }
}

/* ---- below 1024px the drawer carries navigation, but the primary CTA
       stays put. The ghost button is redundant there because the drawer
       already lists Tracking. ---- */
@media (max-width: 1024px) {
  .mx-hbtn-row { order: 2; gap: 8px; }
  .mx-hbtn--ghost { display: none !important; }
  .mx-hbtn--primary .xpro-elementor-button { padding: 10px 16px; min-height: 38px; }
  .mx-hbtn--primary .xpro-button-text { font-size: 13.5px; }
}
@media (max-width: 420px) {
  .mx-hbtn--primary .xpro-elementor-button { padding: 9px 14px; }
  .mx-hbtn--primary .xpro-button-text { font-size: 13px; }
}