/**
 * ST Gallery – Selection Overlay Styles
 * Version: 1.1.7
 * Autor: AI Assistent "Henry" für WDSB / SaarlandToday
 */

.st-galerie-item-img { 
  position: relative; 
}

.st-gallery-select{
  position: absolute; 
  top: 8px; 
  right: 8px;
  width: 36px; 
  height: 36px; 
  border-radius: 6px;
  border: 2px solid #ff0; 
  background: rgba(255, 255, 0, 0.75); /* #ff0 mit 75% Deckkraft */
  cursor: pointer; 
  z-index: 5; 
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.st-gallery-select:hover,
.st-gallery-select:focus-visible{
  background: rgba(255, 162, 0, 0.75); /* #ffa200 mit 75% Deckkraft */
  border-color: #ffa200;
  transform: scale(1.05);
}

.st-gallery-select.is-selected,
.st-gallery-selected .st-gallery-select{
  background: rgba(104, 180, 45, 0.75); /* #68B42D mit 75% Deckkraft */
  border-color: #68B42D;
}

.st-gallery-select::after{
  content: "✓"; 
  position: absolute; 
  inset: 0; 
  display: flex;
  align-items: center; 
  justify-content: center;
  font-weight: 700; 
  font-size: 18px; 
  color: #333; /* Dunkler Text für bessere Sichtbarkeit */
  pointer-events: none;
  opacity: 0; /* Standardmäßig unsichtbar */
  transition: opacity .2s ease;
}

/* Haken nur bei ausgewählten Buttons anzeigen */
.st-gallery-select.is-selected::after,
.st-gallery-selected .st-gallery-select::after{
  opacity: 1;
  color: #fff; /* Weißer Haken auf grünem Hintergrund */
}

/* Badge für Bildnummer anzeigen - nur eine Nummer */
.st-gallery-select::before{
  content: "No: " attr(data-media-id);
  position: absolute;
  top: -4px;
  right: 100%;
  margin-right: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  background: rgba(0,0,0,.7);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 10;
}

/* Badge nur bei Hover anzeigen */
.st-gallery-select:hover::before,
.st-gallery-select:focus-visible::before{
  opacity: 1;
}

/* Badge für ausgewählte Buttons immer anzeigen */
.st-gallery-select.is-selected::before,
.st-gallery-selected .st-gallery-select::before{
  opacity: 1;
  background: #68B42D;
  color: #fff;
}

/* Sicherheitsnetz gegen blockierende Pointer-Events in Eltern */
.st-galerie-item-img, 
.st-galerie-item-img * { 
  pointer-events: auto; 
}

/* Verbesserte Sichtbarkeit für ausgewählte Bilder */
.st-galerie-item-img.st-gallery-selected {
  box-shadow: 0 0 0 3px #68B42D, 0 4px 12px rgba(104, 180, 45, 0.3);
  border-radius: 8px;
  transform: scale(0.98);
  transition: all .2s ease;
}

/* Hover-Effekt für nicht-ausgewählte Bilder */
.st-galerie-item-img:hover:not(.st-gallery-selected) {
  box-shadow: 0 0 0 2px #ffa200, 0 2px 8px rgba(255, 162, 0, 0.2);
  border-radius: 6px;
  transform: scale(1.02);
  transition: all .2s ease;
}