/* =========================================================
   ARFU GALLERY SYSTEM
   Botones + Placeholder (GLOBAL)
   ========================================================= */

/* Placeholder */
/* Deja espacio para los botones (like/upload) abajo-derecha */
.thumb{ --actions-safe: 40px; } /* ajusta si quieres: 36–48px */

/* Placeholder "Próximamente..." */
.placeholder{
  position:absolute;
  bottom: calc(8px + var(--actions-safe)); /* <-- lo sube */
  right: 10px;
  padding:4px 8px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(154,163,178,.85);
  background:rgba(0,0,0,.45);
  border-radius:6px;
  backdrop-filter: blur(3px);
  pointer-events:none;
  z-index:4;
}

/* Icon Stack */
.thumb .icon-stack{
  position:absolute;
  right:10px;
  bottom:10px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:6;
}

/* Base Button */
.icon-btn{
  width:27px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,24,39,.45);
  backdrop-filter: blur(8px);
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:.15s ease;
  opacity:0;
}

.card:hover .icon-btn{ opacity:1; }

.icon-btn svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Like */
.like-btn.liked{
  border-color:rgba(0,170,255,.7);
  background:rgba(0,170,255,.18);
}

.like-btn .count{
  position:absolute;
  bottom:-6px;
  right:-6px;
  min-width:15px;
  height:15px;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.55);
}

/* Upload */
.change-btn.busy{
  pointer-events:none;
  opacity:.6;
}

/* Mobile always visible */
@media (hover: none), (pointer: coarse){
  .icon-btn{ opacity:1; }
}
