/* ═══════════════════════════════════════════════════════════════════════════
 * Crystal Prism Gallery  –  v1.0  Stylesheet
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Canvas-Wrapper ──────────────────────────────────────────────────────── */
.cpg-wrap {
    position:   relative;
    width:      100%;
    overflow:   hidden;
    display:    block;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.cpg-canvas {
    display:  block;
    width:    100% !important;
    height:   100% !important;
    cursor:   crosshair;
}

/* ── Icon-Overlay-Schicht ─────────────────────────────────────────────────── */
.cpg-icon-layer {
    position: absolute;
    inset:    0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Icon-Buttons auf den Kristallen ─────────────────────────────────────── */
.cpg-tile-icon {
    position:       absolute;
    pointer-events: all;
    transform:      translate(-50%, -50%);
    width:          36px;
    height:         36px;
    border-radius:  50%;
    border:         1px solid rgba(180, 200, 255, 0.4);
    background:     rgba(10, 10, 30, 0.65);
    color:          #fff;
    font-size:      15px;
    line-height:    36px;
    text-align:     center;
    cursor:         pointer;
    opacity:        0;
    transition:     opacity 0.25s, transform 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cpg-tile-icon:hover {
    opacity:    1 !important;
    transform:  translate(-50%, -50%) scale(1.15);
    background: rgba(30, 50, 120, 0.8);
}

.cpg-wrap:hover .cpg-tile-icon,
.cpg-tile-icon--always {
    opacity: 0.75;
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.cpg-lb {
    position:       fixed;
    inset:          0;
    z-index:        99999;
    display:        none;
    align-items:    center;
    justify-content: center;
    opacity:        0;
    transition:     opacity 0.28s ease;
}

.cpg-lb.cpg-lb-on {
    opacity: 1;
}

.cpg-lb-inner {
    position:       relative;
    max-width:      90vw;
    max-height:     90vh;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0;
}

.cpg-lb-img {
    display:     block;
    max-width:   90vw;
    max-height:  80vh;
    object-fit:  contain;
    border-radius: 6px;
    box-shadow:  0 8px 48px rgba(0, 0, 100, 0.6), 0 0 0 1px rgba(100,140,255,0.15);
    transform:   scale(0.88);
    transition:  transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cpg-lb.cpg-lb-on .cpg-lb-img {
    transform: scale(1);
}

.cpg-lb-cap {
    margin-top:  10px;
    color:       rgba(200, 210, 255, 0.85);
    font-size:   14px;
    text-align:  center;
    line-height: 1.45;
    max-width:   540px;
    font-family: inherit;
}

/* ── Lightbox Buttons ─────────────────────────────────────────────────────── */
.cpg-lb-close,
.cpg-lb-prev,
.cpg-lb-next {
    position:       absolute;
    background:     rgba(15, 15, 40, 0.7);
    border:         1px solid rgba(120, 150, 255, 0.3);
    color:          rgba(200, 210, 255, 0.9);
    border-radius:  50%;
    cursor:         pointer;
    font-size:      18px;
    line-height:    1;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     background 0.15s, transform 0.15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cpg-lb-close:hover,
.cpg-lb-prev:hover,
.cpg-lb-next:hover {
    background: rgba(30, 40, 100, 0.9);
    transform:  scale(1.08);
}

.cpg-lb-close {
    top:    -14px;
    right:  -14px;
    width:  32px;
    height: 32px;
}

.cpg-lb-prev,
.cpg-lb-next {
    top:    50%;
    transform: translateY(-50%);
    width:  40px;
    height: 40px;
    font-size: 22px;
}

.cpg-lb-prev:hover,
.cpg-lb-next:hover {
    transform: translateY(-50%) scale(1.08);
}

.cpg-lb-prev { left:  -54px; }
.cpg-lb-next { right: -54px; }

@media (max-width: 600px) {
    .cpg-lb-prev { left:  4px; }
    .cpg-lb-next { right: 4px; }
    .cpg-lb-close { top: -12px; right: -8px; }
}

/* ── Performance-Hinweis ─────────────────────────────────────────────────── */
.cpg-perf-notice {
    position:   absolute;
    bottom:     8px;
    left:       50%;
    transform:  translateX(-50%);
    background: rgba(0,0,0,0.7);
    color:      #aac;
    font-size:  12px;
    padding:    4px 12px;
    border-radius: 4px;
    pointer-events: none;
    z-index:    10;
    white-space: nowrap;
    animation:  cpg-fade-out 5s forwards;
}

@keyframes cpg-fade-out {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Elementor-Editor-Vorschau ───────────────────────────────────────────── */
.elementor-editor-active .cpg-wrap {
    pointer-events: none;
}