/* ==========================================
   GALLERY ICON BUTTONS
   ========================================== */

/* Icon Button Basis */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px) scale(1.1);
}

.icon-btn:active {
    transform: translateY(0) scale(0.95);
}

.icon-btn svg {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

/* Icon-spezifische Hover-Effekte */
.icon-btn[data-action="select"]:hover svg {
    filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.8));
}

.icon-btn[data-action="lightbox"]:hover svg {
    filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.8));
}

.icon-btn[data-action="cart"]:hover svg {
    filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.8));
}

.icon-btn[data-action="wishlist"]:hover svg {
    filter: drop-shadow(0 0 8px rgba(233, 30, 99, 0.8));
}

/* ==========================================
   SELECTED STATES - GRÜN
   ========================================== */

/* Active/Selected State für Select Icon */
.icon-btn[data-action="select"] svg.selected {
    color: #4CAF50 !important;
    filter: drop-shadow(0 0 8px rgba(76, 175, 80, 1));
    transform: scale(1.1);
}

/* Active/Selected State für Cart Icon - GANZER BUTTON GRÜN */
.icon-btn[data-action="cart"].selected {
    background: rgba(76, 175, 80, 0.2) !important;
}

.icon-btn[data-action="cart"] svg.selected {
    color: #4CAF50 !important;
    filter: drop-shadow(0 0 8px rgba(76, 175, 80, 1));
    transform: scale(1.1);
}

/* ==========================================
   CART ICON - NUR AUF GALERIE-SEITE SICHTBAR
   ========================================== */

/* Cart Icon standardmäßig versteckt */
.icon-btn[data-action="cart"] {
    display: none;
}

/* Cart Icon nur in Galerie sichtbar */
body.gallery-active .icon-btn[data-action="cart"] {
    display: inline-flex;
}

/* Verhindere Bild-Auswahl bei Icon-Klicks */
.overlay-icons {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Mobile Optimierung */
@media (max-width: 900px) {
    .icon-btn {
        padding: 10px;
    }
    
    .icon-btn svg {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 600px) {
    .icon-btn {
        padding: 12px;
    }
    
    .icon-btn svg {
        width: 28px;
        height: 28px;
    }
    
    .overlay-icons {
        font-size: 22px;
    }
}