/* "Most Popular" badge. Add class "most-popular" to any Elementor
   widget/container (Advanced > CSS Classes) to show it above the element. */
.most-popular {
  position: relative;
}

.most-popular::after {
  content: "🔥 MOST POPULAR";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-62%, -25px);
  background: #e6f5ff;
  color: #017fdd;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
  padding: 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(1, 127, 221, .18);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(1, 127, 221, .12);
  pointer-events: none;
  z-index: 2;
}

/* On Nested Tabs content panels the badge is rendered above the matching
   tab title/button instead, via assets/js/hello-theme-most-popular.js
   (a mobile-scrollable tab bar clips a ::after positioned above the button). */
.e-n-tabs-content > .most-popular::after {
  content: none;
}

.hello-most-popular-badge {
  position: absolute;
  transform: translate(-50%, -16px);
  background: #e6f5ff;
  color: #017fdd;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
  padding: 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(1, 127, 221, .18);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(1, 127, 221, .12);
  pointer-events: none;
  z-index: 10;
}

@media (max-width: 768px) {
  .most-popular::after {
    transform: translate(-50%, -8px);
  }

  .hello-most-popular-badge {
    transform: translate(-50%, -2px);
  }
}

@media (max-width: 420px) {
  .most-popular::after,
  .hello-most-popular-badge {
    padding: 6px 6px;
    font-size: 11px;
  }

  .most-popular::after {
    transform: translate(-50%, -6px);
  }
}

.alpn-balance-tab-subs #advanced-title {
  margin-left: -50px;
  padding-inline: 0;
}