/* Reporter tag overlay for in-page feed previews (control card + TV tile).
   Sized in em relative to .ftag's own font-size; a small JS helper sets that
   font-size from each card's width (sizeFeedTags). No container-query units —
   smart-TV browsers don't support cqw, which made the photo balloon full-size. */

@font-face{font-family:'MVWaheed';src:url('fonts/MVWaheed.otf') format('opentype')}
@font-face{font-family:'MvEamaan';src:url('fonts/Mv_Eamaan_XP.otf') format('opentype')}

.feed-video{position:relative}
.tile-media{position:relative}

.ftag{
  position:absolute;z-index:5;top:1.6em;left:1em;
  display:flex;align-items:center;direction:rtl;gap:.5em;
  pointer-events:none;filter:drop-shadow(0 .2em .5em rgba(0,0,0,.5));
  opacity:0;transform:translateY(-12%);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
  font-size:16px;   /* JS overrides this per card via sizeFeedTags() */
}
.ftag.on{opacity:1;transform:translateY(0)}

.ftag-photo{
  width:3.4em;height:3.4em;flex:0 0 3.4em;
  border-radius:50%;object-fit:cover;
  border:.2em solid #f5821f;background:#0a0a12;display:none;
}
.ftag-photo.show{display:block}

.ftag-panel{display:flex;flex-direction:column;border-radius:.5em;overflow:hidden;max-width:18em}

.ftag-name{
  background:#16161c;color:#fff;
  font-family:'MVWaheed','Segoe UI',Arial,sans-serif;
  font-size:1.35em;line-height:1.2;padding:.4em 1em .3em;
  direction:rtl;text-align:right;white-space:nowrap;
}
.ftag-loc{
  background:#f5821f;color:#16161c;
  font-family:'MvEamaan','Segoe UI',Arial,sans-serif;
  font-size:.9em;font-weight:600;line-height:1.2;padding:.3em 1em .4em;
  display:flex;align-items:center;gap:.4em;direction:rtl;white-space:nowrap;
}
.ftag-loc.empty{display:none}
.loc-icon{width:.95em;height:.95em;fill:currentColor;flex:0 0 auto}