/* ==================================================
   THEPETGRID — LOST ALERT TOAST + NOTIFICATION BELL
================================================== */

.tpg-lost-alert{
  position:fixed;
  top:86px;
  right:18px;
  z-index:9300;
  width:min(390px,calc(100vw - 36px));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  border-radius:18px;
  background:linear-gradient(135deg,#fb7185,#e11d48);
  color:#fff;
  box-shadow:0 22px 70px rgba(105,11,42,.38);
  opacity:0;
  transform:translateY(-10px) scale(.98);
  transition:opacity .22s ease,transform .22s ease
}

.tpg-lost-alert[hidden]{display:none!important}

.tpg-lost-alert.is-visible{
  opacity:1;
  transform:none
}

.tpg-lost-alert.is-leaving{
  opacity:0;
  transform:translateY(-8px) scale(.98)
}

.tpg-lost-alert__inner{
  min-height:74px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:11px 12px
}

.tpg-lost-alert__dismiss{
  position:absolute;
  top:5px;
  right:6px;
  z-index:2;
  width:25px;
  height:25px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:1rem;
  cursor:pointer
}

.tpg-lost-alert__icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  background:rgba(255,255,255,.16)
}

.tpg-lost-alert__content{min-width:0}

.tpg-lost-alert__label{
  display:block;
  margin-bottom:3px;
  color:#fff7ed;
  font-size:.63rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase
}

.tpg-lost-alert__title,
.tpg-lost-alert__meta{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.tpg-lost-alert__title{font-size:.88rem;font-weight:850}
.tpg-lost-alert__meta{margin-top:3px;color:rgba(255,255,255,.82);font-size:.72rem}
.tpg-lost-alert__time{display:block;margin-top:4px;color:rgba(255,255,255,.72);font-size:.67rem;font-weight:700}

.tpg-lost-alert__view{
  min-height:37px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#be123c;
  text-decoration:none;
  font-size:.77rem;
  font-weight:900
}

.tpg-lost-alert-bell{
  position:relative;
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  flex:0 0 43px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(7,15,34,.78);
  color:#fff;
  font:inherit;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}

.tpg-lost-alert-bell[hidden]{display:none!important}

.tpg-lost-alert-bell__badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:2px solid #050a17;
  border-radius:999px;
  background:#ff526e;
  color:#fff;
  font-size:.62rem;
  font-weight:900
}

.tpg-lost-alert-bell__badge[hidden]{display:none!important}

.tpg-lost-alert-panel{
  position:fixed;
  top:76px;
  right:18px;
  z-index:9250;
  width:min(360px,calc(100vw - 36px));
  max-height:min(520px,calc(100vh - 100px));
  overflow:auto;
  border:1px solid rgba(117,147,200,.22);
  border-radius:19px;
  background:rgba(4,12,29,.97);
  color:#edf5ff;
  box-shadow:0 28px 90px rgba(0,0,0,.52);
  backdrop-filter:blur(18px)
}

.tpg-lost-alert-panel[hidden]{display:none!important}

.tpg-lost-alert-panel__header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(4,12,29,.96)
}

.tpg-lost-alert-panel__header small{
  display:block;
  color:#ff7188;
  font-size:.63rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase
}

.tpg-lost-alert-panel__header strong{display:block;margin-top:2px}
.tpg-lost-alert-panel__header button{border:0;background:none;color:#ffc45e;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer}

.tpg-lost-alert-panel__list{display:grid;padding:8px}

.tpg-lost-alert-panel__item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:13px;
  color:#edf5ff;
  text-decoration:none
}

.tpg-lost-alert-panel__item:hover{background:rgba(255,255,255,.06)}

.tpg-lost-alert-panel__avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:rgba(255,82,110,.13)
}

.tpg-lost-alert-panel__avatar img{width:100%;height:100%;object-fit:cover}

.tpg-lost-alert-panel__item span:nth-child(2){min-width:0}
.tpg-lost-alert-panel__item strong,
.tpg-lost-alert-panel__item small,
.tpg-lost-alert-panel__item time{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.tpg-lost-alert-panel__item small{margin-top:2px;color:#96a9ca;font-size:.7rem}
.tpg-lost-alert-panel__item time{margin-top:3px;color:#677da5;font-size:.64rem}
.tpg-lost-alert-panel__item>b{color:#69e8ff}

.tpg-lost-alert-panel__all{
  display:block;
  margin:0 8px 8px;
  padding:11px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#a9bddf;
  text-align:center;
  text-decoration:none;
  font-size:.75rem;
  font-weight:800
}

.tpg-lost-alert-panel__empty{margin:0;padding:25px;color:#8296ba;text-align:center}

@media(max-width:820px){
  .tpg-lost-alert{
    top:72px;
    right:10px;
    width:min(360px,calc(100vw - 20px))
  }

  .tpg-lost-alert-panel{
    top:64px;
    right:10px;
    width:min(360px,calc(100vw - 20px))
  }
}

@media(max-width:520px){
  .tpg-lost-alert{
    top:68px;
    right:9px;
    width:calc(100vw - 18px)
  }

  .tpg-lost-alert__inner{
    grid-template-columns:minmax(0,1fr) auto;
    min-height:66px;
    padding:10px
  }

  .tpg-lost-alert__icon{display:none}

  .tpg-lost-alert-panel{
    top:62px;
    right:9px;
    width:calc(100vw - 18px);
    max-height:calc(100vh - 78px)
  }
}