/* ============================================================
   ai-badge.css
   Required AI-content disclosure badge (EU AI Act, Art. 50) shown on the
   bottom-right corner of photos that were generated or modified with AI.
   Loaded globally (_LayoutPublic.cshtml / _LayoutPublicB2C.cshtml) since it
   is used across many pages. Wrap the <img> in ".t2a-ai-photo" and place the
   badge (see _AiBadgePartial.cshtml) as its sibling.
   ============================================================ */

.t2a-ai-photo {
  position: relative;
  max-width: 100%;
}

.t2a-ai-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.t2a-ai-badge .t2a-ai-badge__icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.t2a-ai-badge:hover,
.t2a-ai-badge:focus,
.t2a-ai-badge:focus-visible {
  opacity: 1;
  outline: none;
}

.t2a-ai-badge__tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

.t2a-ai-badge__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 10px;
  border: 6px solid transparent;
  border-top-color: #111827;
}

.t2a-ai-badge:hover .t2a-ai-badge__tooltip,
.t2a-ai-badge:focus .t2a-ai-badge__tooltip,
.t2a-ai-badge:focus-visible .t2a-ai-badge__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 480px) {
  .t2a-ai-badge__tooltip { max-width: 200px; }
}

/* ---------- Rounded variant: for photos whose own <img> (not this wrapper)
   carries the border-radius + its own margin-bottom (the "How it works" step
   photos). A flex item establishes its own formatting context, so that
   margin-bottom doesn't collapse through this wrapper like it did on the
   bare <img> — it gets trapped inside, pushing the wrapper's own bottom edge
   (and this badge, which is positioned against it) below the photo's real
   visible edge. Move that margin onto the wrapper itself (a flex item's own
   margin is never trapped) so the wrapper's box exactly matches the photo,
   and nudge the badge in a bit further so it clears the rounded corner. ---------- */
.t2a-ai-photo--rounded {
  margin-bottom: 14px;
}

.t2a-ai-photo--rounded > img {
  margin-bottom: 0 !important;
}

.t2a-ai-photo--rounded .t2a-ai-badge {
  right: 14px;
  bottom: 14px;
}

/* ---------- Compact variant for small avatar-sized photos (e.g. testimonial
   headshots) where the default badge would overwhelm the image ---------- */
.t2a-ai-photo--compact .t2a-ai-badge {
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
}

.t2a-ai-photo--compact .t2a-ai-badge__tooltip {
  bottom: calc(100% + 6px);
}