/* Reset and Fullscreen setup */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Prevent scrolling, true fullscreen app feel */
    background-color: #000;
}

/* Main container */
.camera-container {
    width: 100%;
    height: 100%;
}

/* Landscape modes (16:9 / horizontal screen layout) */
@media (orientation: landscape) {
    .camera-container {
        flex-direction: row;
    }
    .viewfinder {
        flex: 3; /* ~75% width */
        height: 100%;
    }
    .controls-panel {
        flex: 1; /* ~25% width */
        height: 100%;
        border-left: 2px solid #222;
    }
}

/* Portrait modes (9:16 / vertical screen layout) */
@media (orientation: portrait) {
    .camera-container {
        flex-direction: column;
    }
    .viewfinder {
        flex: 3; /* ~75% height */
        width: 100%;
    }
    .controls-panel {
        flex: 1; /* ~25% height */
        width: 100%;
        border-top: 2px solid #222;
    }
}

/* Viewfinder Area Styling */
.viewfinder {
    background-color: #111;
    overflow: hidden; /* Prevent zoomed image from spilling over */
}

#target-image {
    display: block;
    /* Do not restrict bounds, the bounding box will mirror the natural image dimensions */
}

/* Overlay elements should stay above the image */
.position-absolute {
    z-index: 2;
    pointer-events: none; /* Let touches pass through the text to the image */
}

/* Simple visual focus box inside the camera view */
.focus-brackets {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    pointer-events: none; /* Let clicks pass through to the image */
    z-index: 1;
}

/* Corner highlights for the focus box */
.focus-brackets::before, .focus-brackets::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid transparent;
}
.focus-brackets::before {
    top: -2px; left: -2px;
    border-top-color: rgba(255, 255, 255, 0.5);
    border-left-color: rgba(255, 255, 255, 0.5);
}
.focus-brackets::after {
    bottom: -2px; right: -2px;
    border-bottom-color: rgba(255, 255, 255, 0.5);
    border-right-color: rgba(255, 255, 255, 0.5);
}

/* Central crosshair */
.crosshair {
    position: absolute;
    width: 20px;
    height: 20px;
}
.crosshair::before, .crosshair::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
}
.crosshair::before {
    top: 9px; left: 0; right: 0; height: 2px;
}
.crosshair::after {
    top: 0; bottom: 0; left: 9px; width: 2px;
}

/* Controls Panel Styling */
.controls-panel {
    background-color: #2b2b2b;
}

/* Round shutter button style */
.btn-shutter {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #fff;
    background-color: #dc3545;
    transition: transform 0.1s ease, background-color 0.2s ease;
}
.btn-shutter:hover {
    background-color: #ff4757;
    transform: scale(1.05);
}
.btn-shutter:active {
    transform: scale(0.95);
    background-color: #c0392b;
}