/* Pyramid verified badges — tier-colored pyramid seal + white check; the
   server-admin badge is an adaptive (black/white) pyramid with a gold crown. */

.x-check,
.yal-plan-check,
.yal-acct-verify,
.yal-explore-user-check,
.yal-global-badge,
.yal-nf-badge,
.yal-chat-badge,
.yi-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: text-bottom;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  max-width: 20px;
  max-height: 20px;
  margin-inline-start: 0.15em;
  line-height: 0;
  clip-path: none !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: normal !important;
  color: inherit;
  overflow: visible;
  transform: translateY(-0.07em);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.yal-verify-badge-svg {
  display: block;
  width: 100%;
  height: 100%;
  background: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  color: transparent !important;
}

svg.x-check,
.x-check > svg,
.x-check .yal-verify-badge-svg,
.yal-plan-check svg,
.yal-acct-verify svg,
.yal-explore-user-check svg,
.yi-verified-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Circle verified (membership / standard) */
.yal-verify-badge--circle circle[fill]:not([stroke]) {
  fill: var(--check-color, #1d9bf0);
}

.yal-verify-badge--circle path {
  fill: #ffffff !important;
}

/* Pyramid seal — tier color */
.yal-verify-badge--pyramid .yal-vbadge-seal {
  fill: var(--check-color, #1d9bf0);
}

/* Server-admin pyramid: adaptive ink (black on a light background, white on a
   dark background) via currentColor. The check is an evenodd knockout so the
   page background shows through it — no fixed burgundy color anymore. */
.yal-verify-badge--admin {
  color: inherit !important;
}

.yal-verify-badge--admin .yal-vbadge-admin {
  fill: currentColor !important;
}

/* Unified Isweet badge for ALL tiers: flat tier-colored seal + white check.
   The class selectors outrank the legacy `.yal-verify-badge-svg path` rule below,
   so the seal keeps its color and the check stays white in every context. */
.yal-verify-badge-svg .yal-vbadge-seal {
  fill: var(--check-color, #1d9bf0) !important;
}

.yal-verify-badge-svg .yal-vbadge-check {
  fill: #ffffff !important;
}

.x-check .yal-verify-badge--pyramid,
.yi-verified-badge .yal-verify-badge--pyramid {
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
}

/* Server-admin crown: seal + gold crown to its right (wider 40x22 viewBox).
   :has() lets any badge container (profile, posts, chat, spaces, explore, …)
   grow to fit the crown without each caller needing a special class. The svg is
   sized by HEIGHT so the seal stays the normal badge size and the crown extends
   to the right. */
.x-check:has(.yal-verify-badge--crowned),
.yal-plan-check:has(.yal-verify-badge--crowned),
.yal-acct-verify:has(.yal-verify-badge--crowned),
.yal-explore-user-check:has(.yal-verify-badge--crowned),
.yal-global-badge:has(.yal-verify-badge--crowned),
.yal-nf-badge:has(.yal-verify-badge--crowned),
.yal-chat-badge:has(.yal-verify-badge--crowned),
.yal-follows-check:has(.yal-verify-badge--crowned),
.yal-plan-check-preview:has(.yal-verify-badge--crowned),
.yi-verified-badge:has(.yal-verify-badge--crowned) {
  width: auto !important;
  max-width: none !important;
  aspect-ratio: auto !important;
}

.yal-verify-badge--crowned {
  width: auto !important;
  height: 100% !important;
}

.yal-verify-badge--crowned .yal-crown {
  fill: #f5c518 !important;
  stroke: #9a6a00;
  stroke-width: 0.5;
  stroke-linejoin: round;
}

/* Legacy flat circle fills */
svg.x-check circle,
.x-check > svg circle,
.x-check svg circle,
.yal-plan-check svg circle,
.yal-acct-verify svg circle,
.yal-explore-user-check svg circle,
.yi-verified-badge svg circle {
  fill: var(--check-color, currentColor);
}

svg.x-check path,
.x-check > svg path,
.x-check svg path,
.yal-plan-check svg path,
.yal-acct-verify svg path,
.yal-explore-user-check svg path,
.yi-verified-badge svg path,
.yal-verify-badge-svg path {
  fill: #ffffff !important;
}

.x-identity-line .x-check {
  width: 18.75px;
  height: 18.75px;
  max-width: 18.75px;
  max-height: 18.75px;
  margin-inline-start: 3px;
}

.x-profile-topbar-main .x-identity-line .x-check {
  width: 16.25px;
  height: 16.25px;
  max-width: 16.25px;
  max-height: 16.25px;
}

.x-post-header .x-check,
.x-post-row .x-identity-line .x-check {
  width: 18.75px;
  height: 18.75px;
  max-width: 18.75px;
  max-height: 18.75px;
}

.x-profile-hero .x-identity-line .x-check {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

.yal-membership-active .yal-plan-check,
.x-plan-card .yal-plan-check,
.x-plan-card .yal-plan-check-preview .yal-plan-check {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  margin: 0 0 0.35rem;
  transform: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.yal-acct-verify {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  margin-inline-start: 0.2em;
}

@media (max-width: 760px) {
  .x-identity-line .x-check,
  .x-post-header .x-check,
  .x-post-row .x-identity-line .x-check {
    width: 18.75px;
    height: 18.75px;
    flex-shrink: 0;
  }

  .x-identity-line {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .x-check,
  .yal-plan-check,
  .yal-acct-verify {
    transition: filter 0.15s ease, transform 0.15s ease;
  }

  .x-profile-hero .x-check:hover,
  .x-identity-line .x-check:hover {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
    transform: translateY(-0.07em) scale(1.06);
  }
}