/* AI-Generated Code - 2026-08-07 - Cursor Grok 4.5 */
/* AI-Generated Code - 2026-08-10 - Composer */
/* AI-Generated Code - 2026-08-17 - Composer */

.umm-new-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 12px 5px;
  background:
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 22%,
      transparent 42%
    ),
    linear-gradient(180deg, #ff4b55 0%, #e00012 52%, #a9000d 100%);
  color: #fff !important;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.08em;
  vertical-align: middle;
  white-space: nowrap;
  text-transform: uppercase;
  /* Soft outline for contrast; avoid heavy glow that blurs small type */
  text-shadow: 0 1px 0 rgba(90, 0, 0, 0.85);
  /* Shallower spikes so the word sits in a larger flat center */
  clip-path: polygon(
    0% 50%, 4% 36%, 2% 24%, 12% 20%, 14% 8%, 26% 14%,
    36% 4%, 50% 10%, 64% 4%, 74% 14%, 86% 8%, 88% 20%,
    98% 24%, 96% 36%, 100% 50%, 96% 64%, 98% 76%, 88% 80%,
    86% 92%, 74% 86%, 64% 96%, 50% 90%, 36% 96%, 26% 86%,
    14% 92%, 12% 80%, 2% 76%, 4% 64%
  );
  filter:
    drop-shadow(0 1px 1px rgba(70, 0, 0, 0.45))
    drop-shadow(0 0 1px rgba(255, 55, 65, 0.55));
}

/* Mega-menu / sidenav: keep readable — do not shrink below base */
.menu-content .umm-new-badge,
[role="navigation"] .umm-new-badge,
.sub_menu_block .umm-new-badge,
.docs-nav .umm-new-badge,
.sub_menu_block a .umm-new-badge {
  font-size: 11px;
  padding: 4px 11px 5px;
  line-height: 1.15;
  letter-spacing: 0.07em;
}

#operation\/create_simple_transfer h2 .umm-new-badge,
[id^="operation/"] h2 .umm-new-badge {
  font-size: 12px;
  padding: 5px 13px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.field_name_sp .umm-new-badge,
.tr .umm-new-badge,
td .umm-new-badge {
  font-size: 11px;
  padding: 3px 10px 4px;
  margin-left: 6px;
}

/* Sit beside the field name; Redoc's "required" label is a block <div> below. */
td[kind="field"] > .umm-new-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  margin-right: 0;
}

/* ---- One-time coach mark (portal-wide via localStorage) ---- */

.umm-coach-root {
  position: fixed;
  inset: 0;
  z-index: 100000;
  /* Never capture page scroll/wheel — only the bubble is interactive */
  pointer-events: none;
}

/* Visual dimming only; must not block scroll or clicks on the page */
.umm-coach-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

/*
 * Magnifier: the element box is a clear hole over the page; the huge box-shadow
 * dims everything else. Do not put a solid backdrop under this or the hole looks empty.
 */
.umm-coach-spotlight {
  position: absolute;
  border-radius: 6px;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(15, 23, 32, 0.45),
    0 0 0 2px #e00012;
  pointer-events: none;
  transition:
    top 0.22s ease,
    left 0.22s ease,
    width 0.22s ease,
    height 0.22s ease;
}

.umm-coach-bubble {
  position: absolute;
  width: min(320px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 14px 16px 12px;
  background: #fff;
  color: #1a2330;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  font-family: 'Source Sans Pro', sans-serif;
  pointer-events: auto;
  z-index: 1;
  transition: top 0.22s ease, left 0.22s ease;
}

.umm-coach-caret {
  position: absolute;
  top: -8px;
  left: 28px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
}

/* Bubble sits left of Developer Center; caret points right toward the link. */
.umm-coach-bubble--to-center .umm-coach-caret {
  top: 28px;
  left: auto;
  right: -8px;
  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.06);
}

/* Bubble sits right of a request-field cell; caret points left toward the field. */
.umm-coach-bubble--to-field .umm-coach-caret {
  top: 28px;
  left: -8px;
  right: auto;
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.06);
}

.umm-coach-bubble::before {
  content: none;
}

.umm-coach-kicker {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e00012;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umm-coach-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}

.umm-coach-body {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5563;
}

.umm-coach-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.umm-coach-step {
  margin: 0 auto 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.umm-coach-btn {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  /* Match Redoc "Coming soon" / HTTP method badge blue */
  background: #61affe;
  color: #fff;
}

.umm-coach-btn:hover {
  background: #4a9aef;
}

.umm-coach-btn--secondary {
  background: #e5e7eb;
  color: #111827;
}

.umm-coach-btn--secondary:hover {
  background: #d1d5db;
}

.umm-coach-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.umm-coach-close:hover {
  background: #f3f4f6;
  color: #111827;
}

@media (prefers-reduced-motion: reduce) {
  .umm-coach-spotlight {
    transition: none;
  }
}