/*
  Allow angular.js to be loaded in body, hiding cloaked elements until
  templates compile.  The !important is important given that there may be
  other selectors that are more specific or come later and might alter display.
 */


.icon-disabled {
    color: rgb(173, 173, 173);
}

.icon-blue-disabled {
    color: rgb(1, 1, 202);
}

.scale-80 {
  zoom: 0.5;  /*
    /* transform: scale(0.5);
    transform-origin: top center; */
}

.adaptive-icon {
  font-size: 1rem; /* desktop = normal FA size */
}

@media (max-width: 767px) {
  .adaptive-icon {
    font-size: 1.5rem; /* mobile only */
  }
}

.disable-zoom {
    touch-action: manipulation;
}



.chip-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.chip-btn {
  width: 42px;
  height: 42px;
  padding: 0;
}

.chip-score {
  min-width: 24px;
  font-size: 1.4rem;
  text-align: center;
}

@media (min-width: 992px) {
  .chip-btn {
    width: 50px;        /* ✅ noticeably larger */
    height: 50px;
    font-size: 1.8rem;
  }

  .chip-score {
    font-size: 2.5rem;    /* ✅ readable from distance */
    min-width: 40px;
  }
}


/* MOBILE UI SHRINK */
@media (max-width: 768px) {

  .scale-80 {
    zoom: 0;
  }

  

  .mobile-scale-inner {
   
    transform-origin: top center;
    width: 100%;
  }


  .card {
    font-size: 1.2rem !important;
  }


  .img-thumbnail {
    max-width: 150px !important;
    max-height: 150px !important;
  }
  .slider-tooltip {
    font-size: 0.85rem !important;
    padding: 2px 6px !important;
  }

  .slider-extremes span {
    font-size: 1rem !important;
  } *



  .reactions-box {
    padding: 12px 20px !important;
    transform: scale(0.78);
    transform-origin: left center;
    border-radius: 999px;
  }

  .reaction i {
    font-size: 1.6rem !important;
  }

  .reaction-count {
    font-size: 1.1rem !important;
  }


  .comment-box {
    width: 38px !important;
    height: 38px !important;
    padding: 20px !important;
    border-radius: 50% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px !important;
    transform: translateY(-2px); /* ← alignment fix */
  }

  .comment-box i {
    font-size: 1.3rem !important;
  }

  .comment-box .reaction-count {
    font-size: 1rem !important;
    margin-left: 1px !important;
  }

  .comment-mobile {
    font-size: 0.75rem !important
  }


  .post-title {
    font-size: 1.3rem !important;
  }

  .post-text {
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
  }


  .comment-link {
    font-size: 1rem !important;
  }

  .top-comment-text {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }

  .top-comment-icon {
    font-size: 1.6rem !important;   /* was fa-3x (~48px) */
  }

  .top-comment-count {
    font-size: 1.3rem !important;   /* was xx-large */
    margin-left: 6px !important;
  }

  .top-comment-row {
    margin-top: 0.7rem !important;
  }


  .comment-link {
    font-size: 1rem !important;      /* much smaller */
    line-height: 1.2;
  }
}




.slider-extremes {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
  padding: 0 2px;
}
.slider-tooltip {
  position: absolute;
  top: -30px;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 12px;
  transform: translateX(-50%);
}

.feed-image-container {
  width: 100%;
  aspect-ratio: 4 / 5; /* ← taller rectangle, adjust as needed */
  overflow: hidden;
  border-radius: 8px;

}
.feed-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reactions-box {
  flex: 1; /* takes full width left side */
  border: 2px solid #000;
  border-radius: 50px;
  padding: 12px 28px; /* adjust spacing here */
  margin-right: 18px; /* spacing between reactions and comment */
}
.reaction {
  display: flex;
  align-items: center;
  gap: 12px; /* space between icon + number */
}
.reaction-count {
  font-size: xx-large;
}
.comment-box {
  width: 85px; /* perfect circle size with your scale */
  height: 85px;
  border: 2px solid #000;
  border-radius: 50%;
}
.scale-80 i {
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.scale-80 i:hover {
  transform: scale(1.12);
  filter: brightness(0.85);
}
.no-hover i:hover,
.no-hover .reaction i:hover,
.no-hover .comment-box i:hover {
  transform: none !important;
  filter: none !important;
  cursor: default !important;
}

.icon-hover {
  transition: color 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.icon-hover:hover {
  filter: brightness(0.7); /* makes the current color ~30% darker */
  transform: scale(1.1); /* slight zoom */
}

.icon-red {
  color: red;
}

.icon-blue {
  color: blue;
}

.icon-yellow {
  color: rgb(194, 197, 30);
}

.slidecontainer {
  position: relative;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #AB6548;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04aa6d;
  cursor: pointer;
}