/* Web Photobooth — shared styles */

:root {
    --pb-bg: #f4f6fb;
}

.pb-body {
    background: var(--pb-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pb-body main { flex: 1 0 auto; }

/* ---------- Booth camera ---------- */
.camera-frame video,
#camera {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* Mirror the live preview for the front camera (selfie-mirror feel).
   The capture step applies the same horizontal flip, so the saved photo
   matches what the user sees. */
#camera.mirrored {
    transform: scaleX(-1);
}

/* Watermark template overlaid on the live feed before capture. Stretched to
   fill (object-fit: fill) to mirror exactly how watermark.js composites it
   onto the final photo. Never mirrored, so its text stays readable. */
.camera-watermark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 1;
}

.camera-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2;
}

.busy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
}

.booth-step { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Gallery ---------- */
.gallery-item img { transition: transform .25s ease; }
.gallery-item:hover img { transform: scale(1.05); }

/* ---------- Admin ---------- */
.admin-sidebar {
    width: 250px;
    min-height: 100vh;
    position: sticky;
    top: 0;
}

@media (max-width: 767.98px) {
    .admin-sidebar {
        position: fixed;
        left: -260px;
        transition: left .2s ease;
        z-index: 1050;
    }
    .admin-sidebar.show { left: 0; }
    .admin-main { width: 100%; }
}

.admin-sidebar .nav-link { border-radius: .5rem; }
.admin-sidebar .nav-link.active { background: var(--bs-primary); }