/* Make the icon row behave consistently on small screens */
.img-overlay .figcaption ul.list-inline.d-flex {
  padding-left: 0;     /* kill default UL indent */
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* iPhone / small screens: center the icons and use a gap */
@media (max-width: 575.98px) {
  .img-overlay .figcaption ul.list-inline.d-flex {
    justify-content: center !important; /* override justify-content-between */
    gap: 18px;                          /* spacing between icons */
  }

  .img-overlay .figcaption ul.list-inline.d-flex > li {
    margin: 0 !important;               /* remove list-inline spacing quirks */
  }

  /* Your inline margin-left:12px can skew on small screens */
  .img-overlay .figcaption .favorite-btn {
    margin-left: 0 !important;
  }
}
/* Chrome-safe: pin the entire bottom navbar to the viewport */
.navbar-wrapper.navbar-bottom-fixed {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  z-index: 99999 !important;

  /* Helps Chrome keep it stable during scroll */
  transform: translateZ(0);
  will-change: transform;
}

/* If any CSS sets margin/padding that can "lift" it, neutralize */
.navbar-wrapper.navbar-bottom-fixed {
  margin-bottom: 0 !important;
}
    /* If readMore.js uses these */
    .more-text { display: none; }
    .dots { display: inline; }
	
.live-image-wrapper {
    position: relative;
    display: inline-block;
}

.live-image-wrapper img {
    display: block;
    border-radius: 6px; /* optional – match your cards */
}

.live-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.8);
    z-index: 2;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

.live-dot {
    animation: pulse 1.5s infinite;
}