/**
 * Verified badge ("Ellenorzott szakember") on profile photos.
 *
 * The JS wraps every matched profile <img> in span.ellenorzott-wrap and
 * appends span.ellenorzott-badge (green check). The hover label is one
 * shared body-level element (.ellenorzott-tooltip) positioned by JS with
 * position:fixed, so ancestor overflow:hidden can never clip it.
 */

.ellenorzott-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

/* Green circle with a white check (inline SVG, no external asset). */
.ellenorzott-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #7cc576;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%237cc576'/%3E%3Cpath d='M7 12.6l3.1 3.1L17 9.2' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 0 0 2px #fff;
  z-index: 5;
  pointer-events: none;
}

/* Bigger badge on the large profile-page header photo. */
.profile-picture .ellenorzott-badge {
  width: 28px;
  height: 28px;
  right: 6px;
  bottom: 6px;
}

/* Body-level label pill; left/top set by JS on hover. */
.ellenorzott-tooltip {
  position: fixed;
  display: none;
  padding: 4px 12px;
  border-radius: 4px;
  background: #7cc576;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  z-index: 100000;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* ------------------------------------------------------------------ *
 * Badge clipping fix (2026-07).
 *
 * In the round-avatar card blocks (recommended / featured psychologists,
 * blog & Q&A author avatars, review avatars) the element directly holding
 * the avatar has overflow:hidden, which cuts off the bottom of the green
 * check (it sits at the bottom-right corner, slightly over the image edge).
 *
 * We open ONLY those avatar containers (matched via the avatar img class,
 * so the rectangular profile-header photo and the search-result thumbnails
 * are left completely untouched), and keep the avatars perfectly round via
 * border-radius on the img itself - independent of the container overflow.
 * ------------------------------------------------------------------ */
:where(*):has(> .ellenorzott-wrap > img.psy-card__avatar),
:where(*):has(> .ellenorzott-wrap > img.blog-card__author-image),
:where(*):has(> .ellenorzott-wrap > img.review-card__avatar),
:where(*):has(> .ellenorzott-wrap > img.pszv-tile__avatar),
:where(*):has(> .ellenorzott-wrap > img.pszv-answer__avatar) {
  overflow: visible !important;
}

.ellenorzott-wrap > img.psy-card__avatar,
.ellenorzott-wrap > img.blog-card__author-image,
.ellenorzott-wrap > img.review-card__avatar,
.ellenorzott-wrap > img.pszv-tile__avatar,
.ellenorzott-wrap > img.pszv-answer__avatar {
  border-radius: 50% !important;
}