/* ==========================================================================
   SWAM OCR SCANNER MODAL STYLES
   Dropzone, scanning laser animation, and multi-modal stacking
   ========================================================================== */

/* Multi-modal stacking: Ensure OCR modal and its dialog always sit above all backdrops and parent modals */
    #ocrScanModal {
        z-index: 1070 !important;
    }

    #ocrScanModal .modal-dialog {
        z-index: 1071 !important;
        position: relative;
    }

    /* Nested backdrop: any backdrop that follows an existing one, or custom */
    .modal-backdrop~.modal-backdrop,
    .ocr-nested-backdrop {
        z-index: 1065 !important;
        background-color: rgba(11, 34, 72, 0.8) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    .modal-parent-dimmed {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: scale(0.97) !important;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
    }

    #ocrStartMultiScanBtn:disabled {
        opacity: 0.6 !important;
        background: #e2e8f0 !important;
        color: #94a3b8 !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
        transform: none !important;
    }

    .ocr-slot-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        transition: all 0.2s ease;
    }

    .ocr-slot-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .ocr-slot-dropzone {
        border: 2px dashed #cbd5e1;
        background: #f8fafc;
        transition: all 0.2s ease;
    }

    .ocr-slot-dropzone.dragover {
        border-color: #b18327 !important;
        background: rgba(177, 131, 39, 0.06) !important;
    }

    .ocr-scan-laser {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #b18327, transparent);
        box-shadow: 0 0 10px #b18327;
        animation: ocrScanLaserAnim 2s infinite ease-in-out;
    }

    @keyframes ocrScanLaserAnim {
        0% {
            top: 5%;
            opacity: 0.2;
        }

        50% {
            top: 90%;
            opacity: 1;
        }

        100% {
            top: 5%;
            opacity: 0.2;
        }
    }

    .ocr-highlight-glow {
        animation: ocrFieldHighlight 2.5s ease-out;
    }

    @keyframes ocrFieldHighlight {
        0% {
            background-color: rgba(177, 131, 39, 0.35);
            box-shadow: 0 0 12px rgba(177, 131, 39, 0.5);
        }

        70% {
            background-color: rgba(177, 131, 39, 0.15);
        }

        100% {
            background-color: transparent;
        }
    }