/* ── Image Picker Icon Add-on ─────────────────────────────────────────── */

/* Icon-Wrapper (im image-warpper-Container des Original-Plugins) */
.yia-wrap .yia-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: var(--yia-icon-size, 48px);
    line-height: 1;
}

/* Icon-Font (Font Awesome etc.) */
.yia-wrap .yia-icon i {
    font-size: var(--yia-icon-size, 48px);
    line-height: 1;
    color: var(--yia-icon-color, #444);
    transition: color 0.2s ease;
}

/* SVG aus Elementor Icons Manager */
.yia-wrap .yia-icon svg {
    width: var(--yia-icon-size, 48px);
    height: var(--yia-icon-size, 48px);
    fill: var(--yia-icon-color, #444);
    transition: fill 0.2s ease;
}

/* SVG-Bild aus Mediathek */
.yia-wrap .yeekit-img-picker-image-warpper img[src$=".svg"] {
    width: var(--yia-icon-size, 48px);
    height: var(--yia-icon-size, 48px);
    object-fit: contain;
}

/* ── Aktiv-Zustand: Farbumschaltung ──────────────────────────────────── */
.yia-wrap .yeekit-img-picker-item.active .yia-icon i,
.yia-wrap input:checked + .yeekit-img-picker-label .yia-icon i {
    color: var(--yia-icon-color-active, #4db8c8);
}

.yia-wrap .yeekit-img-picker-item.active .yia-icon svg,
.yia-wrap input:checked + .yeekit-img-picker-label .yia-icon svg {
    fill: var(--yia-icon-color-active, #4db8c8);
}

/* ── Barrierefreiheit: sichtbarer Fokus-Indikator (WCAG 2.1 AA) ──────── */
.yia-wrap input:focus-visible + .yeekit-img-picker-label {
    outline: 3px solid var(--yia-icon-color-active, #4db8c8);
    outline-offset: 3px;
}