/* Compact, responsive camera modals */
.capture-modal .modal-dialog {
    max-width: 440px;
    width: 92vw;
}

@media (min-width: 576px) {
    .capture-modal .modal-dialog {
        max-width: 480px;
    }
}

/* Keep header/footer visible; body scrolls within available viewport */
.capture-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

.capture-modal .modal-header,
.capture-modal .modal-footer {
    position: sticky;
    background: #fff;
    z-index: 3;
}

.capture-modal .modal-header { top: 0; }

.capture-modal .modal-footer {
    bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem);
}

.capture-modal .modal-body { overflow: auto; }

/* Guide image: responsive width + viewport-height cap */
.capture-modal .guide-img {
    display: block;
    width: 50% !important;                          /* fill container width */
    max-width: clamp(150px, 80vw, 360px) !important; /* responsive width limits */
    max-height: min(36vh, 260px) !important;         /* never too tall */
    height: auto !important;                          /* keep aspect ratio */
    object-fit: contain;
}

@media (min-width: 576px) {
    .capture-modal .guide-img {
        max-width: clamp(220px, 60vw, 420px) !important;
        max-height: min(40vh, 250px) !important;
    }
}

.capture-modal .capture-stage {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 0.5rem;
}

.capture-modal .capture-media {
    width: clamp(240px, 80vw, 340px);
    aspect-ratio: 1.585 / 1;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #ccc;
    background-color: #000;
}

.capture-modal .preview-media {
    width: clamp(240px, 80vw, 340px);
    aspect-ratio: 1.585 / 1;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #ccc;
}

/* Keep camera action buttons visible when scrolling */
.capture-modal .sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: .5rem .25rem;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 40%);
}

/* Preserve circular selfie shape while using compact sizing */
#selfieVideoWizard.capture-media,
#selfiePreviewWizard.preview-media {
    border-radius: 20rem !important;
}