// Styles for delete caption modal
#delete-caption-modal {
    .delete-caption-modal {

        &__holder {
            padding: 40px;
        }

        &__container {
            overflow: scroll;
            width: 395px;
            max-width: 90%;
            height: auto;
            max-height: 75vh;
            margin: auto;
            opacity: 0;
            position: fixed;
            top: 200px;
            left: 160px;
            right: 0;
            background-color: $white;
            border: 0.5px solid $grey;
            
            /* Hide scrollbar for IE, Edge and Firefox */
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        
            &::-webkit-scrollbar {
                display: none;
            }
            
            h3 {
                color: $black;
                margin: 0;
                font-size: $font-size-xl;
                font-weight: 600;
                text-align: center;
            }
        }
        
        &__content {
            padding: 0;
            margin: 24px 0;
            
            .delete-caption-description {
                margin-bottom: 20px;
                color: $grey800;
                font-size: $font-size-s;
                line-height: 1.5;
                text-align: center;
                
                .highlight {
                    background-color: $grey50;
                    padding: 0 4px;
                    font-weight: 500;
                }
            }
            
            .delete-caption-info {
                background-color: $grey50;
                border: 1px solid $grey100;
                border-radius: 4px;
                padding: 15px;
                margin-bottom: 20px;
                
                .delete-caption-info-row {
                    display: flex;
                    margin-bottom: 8px;
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                    
                    .info-label {
                        width: 100px;
                        font-weight: 600;
                        color: $grey800;
                        font-size: $font-size-s;
                    }
                    
                    .info-value {
                        color: $grey300;
                        font-size: $font-size-s;
                    }
                }
            }
            
            input[type="hidden"] {
                display: none;
            }
        }
    }
    
    .sc-buttons-container {
        display: flex;
        gap: 24px;
        justify-content: center;
        
        // Using your existing button styles
        .btn {
            font-size: 14px;
            height: 40px;
            padding: 0.5rem 1.5rem;
            min-width: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            font-weight: 500;
        }
        
        #delete-caption-cancel-button {
            border: 1px solid $grey200;
            color: $grey800;
            background: $white;    
            
            &:hover {
                color: $grey800;
                border-color: $grey800;
                background-color: $grey50;
            }
        }
        
        #delete-caption-confirm-button {
            color: $white;
            background-color: $red;
            border: none;
            
            &:hover {
                background-color: darken($red, 10%);
            }
            
            &:disabled {
                opacity: 0.7;
                cursor: not-allowed;
            }
        }
    }
    
    .loader-delete-caption-container {
        position: fixed;
        top: 200px;
        right: 0;
        left: 160px;
        display: flex;
        align-items: center;
        z-index: 11;
        
        .loading-container {
            justify-content: center;
            
            div {
                background: $white;
                height: 15px;
                width: 15px;
            }
        }
    }
}