/*
 * stammtisch-media-viewer.css
 * Styles for StammtischMediaViewer (see stammtisch-media-viewer.js).
 * Shared between stammtisch-viewer-v2.html and stammtisch-family-tree.html.
 */
.popup-bg {
    display: flex;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    align-items: center; justify-content: center;
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.popup-bg.active { opacity: 1; pointer-events: auto; }
.popup-card {
    background: #faf8f3; border-radius: 14px; padding: 24px;
    width: min(560px, 92vw); max-height: 88vh; overflow-y: auto;
    position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
    transform: scale(0.92);
    transition: transform .3s ease;
}
.popup-bg.active .popup-card { transform: scale(1); }
.popup-x {
    position: absolute; top: 10px; right: 12px; z-index: 10;
    background: none; border: none; font-size: 34px; cursor: pointer; color: #e8382c;
    line-height: 1; font-weight: 700;
}
.popup-x:hover { color: #c41e12; }
.popup-media-card { background: #111; padding: 0; width: min(720px, 94vw); max-height: 92vh; }
.popup-zoom-wrap { overflow: auto; max-height: 82vh; position: relative; }
.popup-media-card img { max-width: 100%; max-height: 82vh; display: block; margin: 0 auto; border-radius: 6px; }
.popup-media-card img.zoomed-in { max-width: none; max-height: none; margin: 0; border-radius: 0; }
.popup-media-caption {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 4px 0;
}
.popup-media-caption span { color: #eee; font-size: 13px; }
.popup-media-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 4px; }
.zoom-toggle-btn {
    background: #b8935a; color: #fff; border: none; border-radius: 6px;
    padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.zoom-toggle-btn.active { background: #8a6d3a; }
.mag-controls {
    display: none;
    align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 8px; padding: 8px 10px;
    background: rgba(255,255,255,.06); border-radius: 6px;
}
.mag-controls.active { display: flex; }
.lens {
    position: absolute;
    display: none;
    border-radius: 50%;
    border: 3px solid #b8935a;
    box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.15);
    pointer-events: none;
    background-repeat: no-repeat;
    z-index: 5;
}
.confidence-badge {
    display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 10px; margin-left: 8px; text-transform: uppercase; letter-spacing: .03em;
}
.confidence-badge.confirmed { background: #d9f2e6; color: #1a6d4d; }
.confidence-badge.likely { background: #fdf3e3; color: #8a6a1f; }
.confidence-badge.speculative { background: #f5e5e3; color: #9a4a3f; }