/**
 * BP Verified Member — Frontend styles
 * Clean rewrite v1.2.8.4 — three verified badge variants, no unverified badge.
 *
 * CSS variable naming pattern (must match render_radio_image_field output):
 *   Badge 1 (badge_type='verified')  → --bp-verified-members-verified-badge-shape
 *   Badge 2 (badge_type='verified-2')→ --bp-verified-members-verified-2-badge-shape
 *   Badge 3 (badge_type='verified-3')→ --bp-verified-members-verified-3-badge-shape
 */

/* ── CSS variables ─────────────────────────────────────────────────────────── */
:root {
  --bp-verified-members-tooltip-color: #fff;
  --bp-verified-members-tooltip-background-color: rgba(0,0,0,0.75);
  --bp-verified-members-tooltip-border-radius: 3px;
  --bp-verified-members-tooltip-padding: 5px 8px;
  --bp-verified-members-tooltip-padding-x: 12px;
  --bp-verified-members-tooltip-padding-y: 3px;
  --bp-verified-members-tooltip-font-family: inherit;
  --bp-verified-members-tooltip-font-weight: 400;
  --bp-verified-members-tooltip-font-size: .8rem;
  --bp-verified-members-tooltip-max-width: 200px;
  --bp-verified-members-tooltip-box-shadow: none;
  --bp-verified-members-tooltip-arrow-size: 6px;
  /* Badge shape defaults — overridden per-element via inline style in the settings
     page selector, and site-wide via wp_add_inline_style in enqueue_scripts(). */
  --bp-verified-members-verified-badge-shape:   url("../images/mask-circle.svg");
  --bp-verified-members-verified-2-badge-shape: url("../images/mask-circle.svg");
  --bp-verified-members-verified-3-badge-shape: url("../images/mask-circle.svg");
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE 1  (.bp-verified-badge / .bp-verified-member)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared size & inline positioning */
.bp-verified-badge,
.bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name-item > a:after,
.bp-verified-member:not(.bp-verified-member-badge-loaded) .item-title > a:after,
.bp-verified-member:not(.bp-verified-member-badge-loaded) > .author > a:after,
.bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name > a:after {
  display: inline-block;
  position: relative;
  top: -0.05em;
  margin-left: 0.2em;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Activity stream — margin on the right instead */
.activity .bp-verified-badge,
.activity .bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name-item > a:after,
.activity .bp-verified-member:not(.bp-verified-member-badge-loaded) .item-title > a:after,
.activity .bp-verified-member:not(.bp-verified-member-badge-loaded) > .author > a:after,
.activity .bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name > a:after {
  margin-right: 0.2em;
}

/* Widget generic: hide badge (overlaid below on specific widgets) */
.widget img:not(.emoji) ~ .bp-verified-badge,
.widget img:not(.emoji) ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name-item > a:after,
.widget img:not(.emoji) ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .item-title > a:after,
.widget img:not(.emoji) ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) > .author > a:after,
.widget img:not(.emoji) ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name > a:after {
  position: absolute;
  bottom: -6px;
  right: -6px;
  top: auto;
  margin: 0 !important;
  display: none;
}

/* Specific BP widgets: show overlay badge on avatar */
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-badge,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-badge,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name-item > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name-item > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .item-title > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .item-title > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) > .author > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) > .author > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name > a:after {
  display: inline-block;
}

/* Badge 1 appearance — shape mask + colour */
.bp-verified-badge,
.bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name-item > a:after,
.bp-verified-member:not(.bp-verified-member-badge-loaded) .item-title > a:after,
.bp-verified-member:not(.bp-verified-member-badge-loaded) > .author > a:after,
.bp-verified-member:not(.bp-verified-member-badge-loaded) .member-name > a:after {
  background: #1DA1F2 url("../images/verified-check.svg") no-repeat center center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask: var(--bp-verified-members-verified-badge-shape);
          mask-size: 100% 100%;
          mask: var(--bp-verified-members-verified-badge-shape);
}

/* Profile header: slightly larger */
#item-header-content .bp-verified-badge,
#profile-header .bp-verified-badge {
  width: 24px;
  height: 24px;
  background-size: 12px;
  margin-left: 0.3em;
}

/* Member directory: link must be inline-block so :after renders */
.bp-verified-member .item-title > a,
.bp-verified-member .member-name > a,
.bp-verified-member > .author > a,
.bp-verified-member .member-name-item > a {
  display: inline-block;
}

/* :after content trigger */
.bp-verified-member .item-title > a:after,
.bp-verified-member .member-name > a:after,
.bp-verified-member > .author > a:after,
.bp-verified-member .member-name-item > a:after {
  content: "";
}

/* Hide explicit badge span when :after already handles it */
.bp-verified-member .item-title > a ~ span.bp-verified-badge,
.bp-verified-member .member-name > a ~ span.bp-verified-badge,
.bp-verified-member > .author > a ~ span.bp-verified-badge,
.bp-verified-member .member-name-item > a ~ span.bp-verified-badge {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE 2  (.bp-verified-badge-2 / .bp-verified-member-2)
   ═══════════════════════════════════════════════════════════════════════════ */

.bp-verified-badge-2,
.bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name-item > a:after,
.bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .item-title > a:after,
.bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) > .author > a:after,
.bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name > a:after {
  display: inline-block;
  position: relative;
  top: -0.05em;
  margin-left: 0.45em;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.activity .bp-verified-badge-2,
.activity .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name-item > a:after,
.activity .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .item-title > a:after,
.activity .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) > .author > a:after,
.activity .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name > a:after {
  margin-right: 0.2em;
}

.widget img:not(.emoji) ~ .bp-verified-badge-2,
.widget img:not(.emoji) ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name-item > a:after,
.widget img:not(.emoji) ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .item-title > a:after,
.widget img:not(.emoji) ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) > .author > a:after,
.widget img:not(.emoji) ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name > a:after {
  position: absolute;
  bottom: -6px;
  right: -6px;
  top: auto;
  margin: 0 !important;
  display: none;
}

.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-badge-2,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-badge-2,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name-item > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name-item > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .item-title > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .item-title > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) > .author > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) > .author > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name > a:after {
  display: inline-block;
}

.bp-verified-badge-2,
.bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name-item > a:after,
.bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .item-title > a:after,
.bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) > .author > a:after,
.bp-verified-member-2:not(.bp-verified-member-2-badge-loaded) .member-name > a:after {
  background: #FF6B00 url("../images/verified-check.svg") no-repeat center center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask: var(--bp-verified-members-verified-2-badge-shape);
          mask-size: 100% 100%;
          mask: var(--bp-verified-members-verified-2-badge-shape);
}

#item-header-content .bp-verified-badge-2,
#profile-header .bp-verified-badge-2 {
  width: 24px;
  height: 24px;
  background-size: 12px;
  margin-left: 0.3em;
}

.bp-verified-member-2 .item-title > a,
.bp-verified-member-2 .member-name > a,
.bp-verified-member-2 > .author > a,
.bp-verified-member-2 .member-name-item > a {
  display: inline-block;
}

.bp-verified-member-2 .item-title > a:after,
.bp-verified-member-2 .member-name > a:after,
.bp-verified-member-2 > .author > a:after,
.bp-verified-member-2 .member-name-item > a:after {
  content: "";
}

.bp-verified-member-2 .item-title > a ~ span.bp-verified-badge-2,
.bp-verified-member-2 .member-name > a ~ span.bp-verified-badge-2,
.bp-verified-member-2 > .author > a ~ span.bp-verified-badge-2,
.bp-verified-member-2 .member-name-item > a ~ span.bp-verified-badge-2 {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE 3  (.bp-verified-badge-3 / .bp-verified-member-3)
   ═══════════════════════════════════════════════════════════════════════════ */

.bp-verified-badge-3,
.bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name-item > a:after,
.bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .item-title > a:after,
.bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) > .author > a:after,
.bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name > a:after {
  display: inline-block;
  position: relative;
  top: -0.05em;
  margin-left: 0.2em;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.activity .bp-verified-badge-3,
.activity .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name-item > a:after,
.activity .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .item-title > a:after,
.activity .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) > .author > a:after,
.activity .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name > a:after {
  margin-right: 0.2em;
}

.widget img:not(.emoji) ~ .bp-verified-badge-3,
.widget img:not(.emoji) ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name-item > a:after,
.widget img:not(.emoji) ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .item-title > a:after,
.widget img:not(.emoji) ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) > .author > a:after,
.widget img:not(.emoji) ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name > a:after {
  position: absolute;
  bottom: -6px;
  right: -6px;
  top: auto;
  margin: 0 !important;
  display: none;
}

.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-badge-3,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-badge-3,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name-item > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name-item > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .item-title > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .item-title > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) > .author > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) > .author > a:after,
.widget.widget_bp_core_recently_active_widget img ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name > a:after,
.widget.widget_bp_core_whos_online_widget img ~ .bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name > a:after {
  display: inline-block;
}

.bp-verified-badge-3,
.bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name-item > a:after,
.bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .item-title > a:after,
.bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) > .author > a:after,
.bp-verified-member-3:not(.bp-verified-member-3-badge-loaded) .member-name > a:after {
  background: #8B00FF url("../images/verified-check.svg") no-repeat center center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask: var(--bp-verified-members-verified-3-badge-shape);
          mask-size: 100% 100%;
          mask: var(--bp-verified-members-verified-3-badge-shape);
}

#item-header-content .bp-verified-badge-3,
#profile-header .bp-verified-badge-3 {
  width: 24px;
  height: 24px;
  background-size: 12px;
  margin-left: 0.3em;
}

.bp-verified-member-3 .item-title > a,
.bp-verified-member-3 .member-name > a,
.bp-verified-member-3 > .author > a,
.bp-verified-member-3 .member-name-item > a {
  display: inline-block;
}

.bp-verified-member-3 .item-title > a:after,
.bp-verified-member-3 .member-name > a:after,
.bp-verified-member-3 > .author > a:after,
.bp-verified-member-3 .member-name-item > a:after {
  content: "";
}

.bp-verified-member-3 .item-title > a ~ span.bp-verified-badge-3,
.bp-verified-member-3 .member-name > a ~ span.bp-verified-badge-3,
.bp-verified-member-3 > .author > a ~ span.bp-verified-badge-3,
.bp-verified-member-3 .member-name-item > a ~ span.bp-verified-badge-3 {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE BADGE SELECTOR PREVIEWS
   .bp-verified-2-badge and .bp-verified-3-badge are used only in the admin
   settings page shape-picker. Badge 1 uses .bp-verified-badge (same class as
   frontend) so it inherits the rules above and no separate rule is needed.
   ═══════════════════════════════════════════════════════════════════════════ */

.bp-verified-2-badge {
  display: inline-block;
  position: relative;
  top: -0.05em;
  margin-left: 0.2em;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: #FF6B00 url("../images/verified-check.svg") no-repeat center center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask: var(--bp-verified-members-verified-2-badge-shape);
          mask-size: 100% 100%;
          mask: var(--bp-verified-members-verified-2-badge-shape);
}

.bp-verified-3-badge {
  display: inline-block;
  position: relative;
  top: -0.05em;
  margin-left: 0.2em;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: #8B00FF url("../images/verified-check.svg") no-repeat center center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask: var(--bp-verified-members-verified-3-badge-shape);
          mask-size: 100% 100%;
          mask: var(--bp-verified-members-verified-3-badge-shape);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════════════════ */

.bp-verified-badge-tooltip {
  color: var(--bp-verified-members-tooltip-color);
  background-color: var(--bp-verified-members-tooltip-background-color);
  padding: var(--bp-verified-members-tooltip-padding-y) var(--bp-verified-members-tooltip-padding-x);
  border-radius: var(--bp-verified-members-tooltip-border-radius);
  font-family: var(--bp-verified-members-tooltip-font-family);
  font-weight: var(--bp-verified-members-tooltip-font-weight);
  font-size: var(--bp-verified-members-tooltip-font-size);
  max-width: var(--bp-verified-members-tooltip-max-width);
  box-shadow: var(--bp-verified-members-tooltip-box-shadow);
  border: none;
  font-style: normal;
  display: block;
  transition: 0.2s ease-in-out;
  position: absolute;
  z-index: 1070;
  margin: 0;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  word-wrap: break-word;
  opacity: 1;
  pointer-events: none;
}
.bp-verified-badge-tooltip[style*=hidden] {
  opacity: 0;
}
.bp-verified-badge-tooltip .bp-verified-badge-tooltip-arrow {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  width: 0;
  height: 0;
  left: calc(50% - var(--bp-verified-members-tooltip-arrow-size));
}
.bp-verified-badge-tooltip[x-placement=top] .bp-verified-badge-tooltip-arrow,
.bp-verified-badge-tooltip[data-popper-placement=top] .bp-verified-badge-tooltip-arrow {
  top: calc(100% - 1px);
  border-width: var(--bp-verified-members-tooltip-arrow-size) var(--bp-verified-members-tooltip-arrow-size) 0;
  border-top-color: var(--bp-verified-members-tooltip-background-color);
}
.bp-verified-badge-tooltip[x-placement=bottom] .bp-verified-badge-tooltip-arrow,
.bp-verified-badge-tooltip[data-popper-placement=bottom] .bp-verified-badge-tooltip-arrow {
  bottom: calc(100% - 1px);
  border-width: 0 var(--bp-verified-members-tooltip-arrow-size) var(--bp-verified-members-tooltip-arrow-size) var(--bp-verified-members-tooltip-arrow-size);
  border-bottom-color: var(--bp-verified-members-tooltip-background-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN — Users table column & toggle
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-list-table .column-bp-verified-member {
  text-align: center;
}

.dashicons.bp-verified-member-spin {
  animation: bp-verified-member-spin 1s infinite;
  animation-timing-function: linear;
}

@keyframes bp-verified-member-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.bp-verified-member-toggle.bp-verified-by-role,
.bp-verified-member-toggle.bp-verified-by-member-type {
  cursor: not-allowed;
}
.bp-verified-member-toggle.bp-verified-by-role .bp-verified-badge,
.bp-verified-member-toggle.bp-verified-by-member-type .bp-verified-badge {
  opacity: 0.5;
}
.bp-verified-member-toggle:focus {
  outline: none;
  box-shadow: none;
}
.bp-verified-member-toggle.bp-verified-badge-2-indicator,
.bp-verified-member-toggle.bp-verified-badge-3-indicator {
  cursor: help;
}
.bp-verified-member-toggle.bp-verified-badge-2-indicator .bp-verified-badge-2,
.bp-verified-member-toggle.bp-verified-badge-3-indicator .bp-verified-badge-3 {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VERIFICATION REQUEST BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.bp-verified-member-request-button {
  background-color: #fff;
  border-radius: 8px;
  color: #000;
  display: inline-block;
  margin: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  text-align: center;
  vertical-align: middle;
}
.bp-verified-member-request-button.bp-verified-member-verification-pending {
  opacity: 0.7;
  cursor: not-allowed;
}
.bp-verified-member-request-button .bp-verified-badge {
  width: 20px !important;
  height: 20px !important;
  background-size: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN NOTICES
   ═══════════════════════════════════════════════════════════════════════════ */

.bp-verified-member-new-requests-notice p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bp-verified-member-new-requests-notice .notice-dismiss {
  top: 5px;
}