/* Physics Image Wall Pro – Styles v1.4 */

.piwp-canvas-wrap {
    position: relative; width: 100%; height: 600px;
    overflow: hidden; background: #111;
    cursor: crosshair; user-select: none; -webkit-user-select: none; touch-action: none;
}
.piwp-canvas { display: block; width: 100%; height: 100%; }

/* ── HUD buttons base ────────────────────────────────────────────────────── */
.piwp-pin-btn, .piwp-audio-btn {
    position: absolute; z-index: 20;
    font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600; border: none; border-radius: 20px; cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.55); white-space: nowrap; line-height: 1;
}

/* ── Pin button ──────────────────────────────────────────────────────────── */
.piwp-pin-btn { padding: 7px 14px; background: rgba(25,35,50,0.85); color: #aaccee; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.piwp-pin-btn:hover { background: rgba(45,60,85,0.95); transform: scale(1.04); }
.piwp-pin-btn--on { background: rgba(210,70,30,0.88); color: #fff; }
.piwp-pin-btn--on:hover { background: rgba(235,85,40,0.96); }

.piwp-btn-tl { top: 10px; left:  10px; }
.piwp-btn-tr { top: 10px; right: 10px; }
.piwp-btn-bl { bottom: 10px; left:  10px; }
.piwp-btn-br { bottom: 10px; right: 10px; }

/* ── Audio button ────────────────────────────────────────────────────────── */
.piwp-audio-btn {
    bottom: 10px; right: 10px;
    width: 38px; height: 38px; padding: 0; font-size: 17px; line-height: 38px;
    text-align: center; border-radius: 50%;
    background: rgba(25,35,50,0.85); color: #aaccee;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.piwp-audio-btn:hover { background: rgba(45,60,85,0.95); transform: scale(1.1); }
.piwp-audio-btn--on { background: rgba(50,170,80,0.85); color: #fff; }
.piwp-btn-br ~ .piwp-audio-btn { bottom: 54px; }

/* ── Tile icon overlay (lightbox trigger = icon) ─────────────────────────── */
.piwp-tile-icon {
    display: block;
    background: rgba(0,0,0,0.52);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 34px; height: 34px;
    font-size: 16px; line-height: 34px; text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, transform 0.15s;
    pointer-events: all;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
/* Show on hover over the canvas wrap */
.piwp-canvas-wrap:hover .piwp-tile-icon,
.piwp-canvas-wrap:focus-within .piwp-tile-icon {
    opacity: 0.85;
}
.piwp-tile-icon:hover { opacity: 1 !important; transform: translate(-50%,-50%) scale(1.15); }
/* Always-visible variant */
.piwp-tile-icon--always { opacity: 0.75 !important; }
.piwp-tile-icon--always:hover { opacity: 1 !important; }
/* ── Nav arrows – hover-fade mode ────────────────────────────────────────── */
.piwp-lb-nav-hide .piwp-lb-prev,
.piwp-lb-nav-hide .piwp-lb-next {
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.piwp-lb-overlay:not(.piwp-lb-nav-hide):hover .piwp-lb-prev,
.piwp-lb-overlay:not(.piwp-lb-nav-hide):hover .piwp-lb-next,
.piwp-lb-overlay.piwp-lb-nav-hide:hover .piwp-lb-prev,
.piwp-lb-overlay.piwp-lb-nav-hide:hover .piwp-lb-next {
    opacity: 1;
    pointer-events: all;
}

.piwp-worker-badge, .piwp-scroll-badge {
    position: absolute; z-index: 25;
    font-size: 16px; line-height: 1; cursor: default;
    opacity: 0.65; transition: opacity 0.2s;
}
.piwp-worker-badge:hover, .piwp-scroll-badge:hover { opacity: 1; }
.piwp-worker-badge { bottom: 10px; left: 10px; }
.piwp-scroll-badge { bottom: 10px; left: 36px; }

/* ── Performance notice ──────────────────────────────────────────────────── */
.piwp-perf-notice {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    background: rgba(200,80,0,0.85); color: #fff; font-size: 11px;
    padding: 4px 12px; border-radius: 4px; z-index: 30;
    pointer-events: none; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════ */
.piwp-lb-overlay {
    position: fixed; inset: 0; z-index: 999999;
    display: none; align-items: center; justify-content: center;
    cursor: zoom-out; opacity: 0; transition: opacity 0.28s ease;
}
.piwp-lb-overlay.piwp-lb-on { opacity: 1; }

.piwp-lb-inner {
    position: relative; max-width: min(92vw,1200px); max-height: 92vh;
    display: flex; flex-direction: column; align-items: center; cursor: default;
}
.piwp-lb-imgwrap {
    max-width: 100%; max-height: 82vh; overflow: hidden;
    border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,0.85); line-height: 0;
}
.piwp-lb-img { display: block; max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 4px; }

/* Animations */
.piwp-lb-zoom .piwp-lb-imgwrap { transform: scale(0.55); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.piwp-lb-on .piwp-lb-zoom .piwp-lb-imgwrap { transform: scale(1); }
.piwp-lb-fade .piwp-lb-imgwrap { opacity: 0; transition: opacity 0.32s ease; }
.piwp-lb-on .piwp-lb-fade .piwp-lb-imgwrap { opacity: 1; }
.piwp-lb-slide .piwp-lb-imgwrap { transform: translateY(50px); opacity: 0; transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.28s ease; }
.piwp-lb-on .piwp-lb-slide .piwp-lb-imgwrap { transform: translateY(0); opacity: 1; }

.piwp-lb-cap { color: rgba(255,255,255,0.88); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; text-align: center; padding: 10px 20px 2px; max-width: 680px; margin: 0; }

.piwp-lb-close {
    position: fixed; top: 16px; right: 20px;
    background: rgba(255,255,255,0.14); color: #fff; border: none; border-radius: 50%;
    width: 42px; height: 42px; padding: 0; font-size: 19px; line-height: 42px; text-align: center;
    cursor: pointer; z-index: 10; transition: background 0.2s, transform 0.15s;
}
.piwp-lb-close:hover { background: rgba(255,255,255,0.26); transform: scale(1.1) rotate(90deg); }

.piwp-lb-prev, .piwp-lb-next {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.12); color: #fff; border: none; border-radius: 50%;
    width: 46px; height: 46px; padding: 0; font-size: 22px; line-height: 46px; text-align: center;
    cursor: pointer; z-index: 10; transition: background 0.2s, transform 0.15s;
}
.piwp-lb-prev:hover, .piwp-lb-next:hover { background: rgba(255,255,255,0.26); transform: translateY(-50%) scale(1.1); }
.piwp-lb-prev { left: 14px; }
.piwp-lb-next { right: 14px; }

@media (max-width: 480px) {
    .piwp-lb-prev { left: 4px; } .piwp-lb-next { right: 4px; } .piwp-lb-close { top: 6px; right: 8px; }
}